Wordpressで簡単なホームページを作る手順
Wordpressでホームページを作るには？
Wordpressでホームページができるまでの手順を自分なりに解説してみたいと思います。
Wordpressって何？ってかたはこちらをご一読
まずは下記のようなデザインをPhotoshop（グラフィックソフト）などで作ります。 今回は架空のウェブ制作会社「阿呆ワークス」を見立ててデザインを作ってみました。 [caption width="1024" align="alignnone"]
完全におふざけです。ごめんなさい。[/caption] 手順としてはまずこのデザインからHTMLを作っていきます。 大まかに書くとこんな感じです。[html toolbar="true"]
<html lang="ja">
<head>
<meta charset="utf-8">
<title>阿呆ワークス｜アホすぎて救いようの無いウェブ制作会社です。 SEOなんかくそくらえです。</title>
<link rel="stylesheet" href="style.css" >
</head>
<body>
<header>
<h1>アホワークス</h1>
<nav>
<ul>
<li><a href="">ホーム</a></li>
<li><a href="">え？なに？</a></li>
<li><a href="">一応できること</a></li>
<li><a href="">全くできないこと</a></li>
<li><a href="">何か？</a></li>
</ul>
</nav>
</header>
<div id="main">
<section>
<img alt="阿呆ワークスの職場の雰囲気" src="images/top/main.gif" />
<h1>阿呆ワークスはアホすぎて救いようの無いウェブ制作会社です。SEOなんかくそくらえです。</h1>
</section>
<div id="able-to">
<section>
<h1>一応できること</h1>
<ul>
<li>どんぶり勘定</li>
<li>悪ふざけ</li>
<li>メーゴーサー（沖縄の方言でげんこつ）</li>
</ul>
</section>
</div>
<div id="can-not">
<section>
<h1>全くできないこと</h1>
<ul>
<li>SEO対策</li>
<li>ソーシャル的なこと</li>
</ul>
</section>
</div>
</div><!-- #main -->
</body>
</html>
[/html]
Wordpressで作る場合もHTMLで書くということに変わりはありません。 これにしたがってスタイルシートも書いていきます。
[css]
/* Header
=================================================== */
header {
margin: 10px 0;
}
/* header nav
=================================================== */
header nav li {
float: left;
}
/* #main
=================================================== */
#main {
width: 980px;
margin:0 auto;
position: relative;
}
[/css]
こんな感じでだらだらと書いていきます。
で、HTMLとCSSが出来上がったら Wordpressに組み込んでいきます。
Wordpressではデザインを管理する部分は「テーマ」という機能で提供されています。
そのサイトの内容はそのままで「テーマ」を切り替えるとデザインが変わるという便利な機能です。
これを使えば内容は変えずに見た目だけを変えるという画期的なことが可能になってしまいます。
ちなみにWordpressのシステムのフォルダ構造は下記のようになっています。
ここで「.php」と拡張子のつくファイルがたくさん出てきますが、これでWordpressがPHPというプログラム言語で作られているシステムだということがわかります。 ちなみにFacebookなんかもこの「PHP」という言語で作られているそうです。
この「PHP」のおかげで更新機能などサイトを運営するうえで便利な機能を使えることができます。PHPで作るからこそ、さきほどいったような内容は変えずにデザインだけ「テーマ」という機能で切り替えられるといったことも可能になります。
[caption width="800" align="alignnone"]
これがWordpressの更新画面[/caption]これが管理画面がなくHTMLとCSSだけだとHTML編集ソフトなんかを使って編集して
FTPでアップしてみたいな感じのやり方になります。HTML編集ソフトは「Dreamweaver」や「ホームページビルダー」などです。
それはそれでいいのですが、更新機能があればインターネットがつながる環境さえあれば
HTMLがわかる人でもわからない人でも、更新機能を使って書き換えることができます。（最近ではスマフォのアプリでも更新できます。）
デザイン部分を触る必要がないのですから更新の際にデザイン部分を誤って編集してしまうこともありません。
[caption width="1583" align="alignnone"]
こんなかんじで管理画面からテーマが選べます。既存のテーマや配布されているテーマもあり、ここからデザイン部分のみを自由に変えられます。[/caption]そしてデザインを変えたい場合はその部分だけを編集して「テーマ」フォルダにアップロードすればいいのです。
そしてWordpressでホームページを作るうえでまず覚えるべきは「テーマ」です。「テーマ」ができれば何でもできる！
では、そんなことでテーマの簡単な作り方を見ていきましょう。
Wordpressのインストールやテーマに関してはGoogle先生に聞けば山ほど出てくるのでそれを参考に。
これとかね。
Wordpressのテーマを作る手順
まずはテーマフォルダを作ります。ここでは「aho-works」という名前にしました。 その中に「index.php」と「style.css」ファイルを作ります。 index.phpは何も書かなくてもこの時点では大丈夫ですが、style.cssにはコメントを記述する必要があります。 ファイルの一番上に下記のように書きます。
[css]
/*
Theme Name: aho-works
Theme URI:
Description:
Version: 1.0
Author: saniman
Author URI:
*/
[/css]
このコメントによってテーマファイルとして認識され名前や作者が管理画面で表示されるようになります。 ではこの作ったファイルをフォルダごとWordpressにインストールしてあるサーバーにアップロードしてみます。（FTPツールなどでthemesフォルダの中にフォルダごとアップします。）
そして管理画面にログインして「外観」のメニューに進むと今作った「テーマ」が認識されるようになります。
おっとプレビュー画面がグレーになっていますね。こちらは同じフォルダの中に「screenshot.png」というサイトのデザインのW600xH450の画像ファイルを入れてあげるだけで表示されるようになります。
ではこれを有効化リンクを押してテーマを有効化します。これでこのテーマが使えるようになったのです！素晴らしいですね！ではサイトを見てみましょう！
真っ白です。そうこの時点ではindex.phpに何も書いていないので真っ白なんです。
では先ほど書いたHTMLをもとにindex.phpに色々書いていきましょう。
[php]
<html lang="ja">
<head>
<meta charset="utf-8">
<title><?php bloginfo('name'); ?>｜<?php bloginfo('description'); ?></title>
<link rel="stylesheet" href="style.css" >
</head>
<body>
<header>
<h1><?php bloginfo('name'); ?></h1>
</header>
</body>
</html>
[/php]
PHPにはHTMLのタグをそんまま書くことができます。「PHPで動的にHTMLをはきだす」なんていったりしますが、
まぁPHPというプログラム言語を使って、こうゆうパターンはこれとか、HTMLの要素を部品化して条件によって自由に書き換えていくって感じでしょうか？（説明むずかしいっすね;）
そしてここからWordpress独特のテンプレートタグというものがでてきました。
[php highlight="1"]
<h1><?php bloginfo('name'); ?></h1>
[/php]
ここの部分ですね。このテンプレートタグとうものがWordpressには用意されていて、
このテンプレートタグを駆使してサイトを作っていきます。
覚えるのは大変ですが、サイトを作っていくうちに自然と覚えていくものだと思います。
さあ、この状態でアップしてみましょう。
サイトのタイトルが表示されるようになりました！
[php]
<?php ?>
[/php]
この部分はここはPHPのコードですよというのをコンピュータにわからせるための宣言です。 同じように続々と書いていきます。
[php highlight="5" wraplines="true"]
<html lang="ja">
<head>
<meta charset="utf-8">
<title><?php bloginfo('name'); ?>｜<?php bloginfo('description'); ?></title>
<link href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" rel="stylesheet" >
</head>
<body>
<header>
<h1><?php bloginfo('name'); ?></h1>
</header>
</body>
</html>
[/php]
[php highlight="1"]<link href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" rel="stylesheet" >[/php]
こちらはこの部分で「テーマ」のスタイルシートのあるフォルダのパスを表示させています。
[php]<?php echo ----[/php]
「echo」はPHPで結果を出力するという意味です。
そしてその後にスラッシュに続けてstyle.cssと書いてスタイルシートのパスを指定しています。 これでstyle.cssへのリンクを記述することができました。
なんだかHTMLで書くよりもややこしく感じてしまうかもしれませんが、 実際にこのコードを書くのはサイト制作を通して一度だけです。あとはその部分を部品化して、 それを使い回せばいいからです。そういった柔軟なことがPHPを使うとできることになります。 次々と書いていきます。
[php highlight="" wraplines="true"]
<html lang="ja">
<head>
<meta charset="utf-8">
<title><?php bloginfo('name'); ?>｜<?php bloginfo('description'); ?></title>
<link href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" rel="stylesheet" >
</head>
<body>
<header>
<h1><?php bloginfo('name'); ?></h1>
<nav>
<?php wp_list_pages(); ?>
</nav>
</header>
<div id="main">
<section>
<img alt="阿呆ワークスの職場の雰囲気" src="images/top/main.gif" />
<h1>阿呆ワークスはアホすぎて救いようの無いウェブ制作会社です。SEOなんかくそくらえです。</h1>
</section>
<div id="able-to">
<section>
<h1>一応できること</h1>
<ul>
<li>どんぶり勘定</li>
<li>悪ふざけ</li>
<li>メーゴーサー（沖縄の方言でげんこつ）</li>
</ul>
</section>
</div>
<div id="can-not">
<section>
<h1>全くできないこと</h1>
<ul>
<li>SEO対策</li>
<li>ソーシャル的なこと</li>
</ul>
</section>
</div>
</div><!-- #main -->
</body>
</html>
[/php]
ちょっと難しくなったでしょうか？
では、ここからサイトの要素を部品化していきます。
[html highlight="1,2-12,13" wraplines="true"]
<html lang="ja">
<head>
<meta charset="utf-8">
<title><?php bloginfo('name'); ?>｜<?php bloginfo('description'); ?></title>
<link href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" rel="stylesheet" >
</head>
<body>
<header>
<h1><?php bloginfo('name'); ?></h1>
<nav>
<?php wp_list_pages(); ?>
</nav>
</header>
[/html]
までの部分を切り取ってheader.phpとして保存します。 そしてそれをindex.phpで
[php]
<?php get_header(); ?>
[/php]
として読み込みます。 すると、こうやって書くだけで他のページでもこのヘッダー部分が使い回しできるわけです。便利ですね。 自動化できるところは自動化する。これがPHPを使うメリットです。
そんな感じで完成したindex.php（トップページ）のコードは下記のようになります。
[php highlight="1"]
<?php get_header(); ?>
<div id="main">
<section>
<img alt="阿呆ワークスの職場の雰囲気" src="images/top/main.gif" />
<h1>阿呆ワークスはアホすぎて救いようの無いウェブ制作会社です。SEOなんかくそくらえです。</h1>
</section>
<div id="able-to">
<section>
<h1>一応できること</h1>
<ul>
<li>どんぶり勘定</li>
<li>悪ふざけ</li>
<li>メーゴーサー（沖縄の方言でげんこつ）</li>
</ul>
</section>
</div>
<div id="can-not">
<section>
<h1>全くできないこと</h1>
<ul>
<li>SEO対策</li>
<li>ソーシャル的なこと</li>
</ul>
</section>
</div>
</div><!-- #main -->
</body>
</html>
[/php]
なんだか最初書いたHTMLより短くなっている気がしませんか？
もっとちゃんとしたホームページならここに「フッター要素」「サイドバー要素」なんかもでてきますね。ここらへんも部品化して使いまわすことができます。
コードにすると
[php]
<?php get_footer(); ?>
<?php get_sidebar(); ?>
[/php]
とかですね。
PHPによって自動化できるところは自動化したり部品化したりしたおかげで、書くコードの量も少なくすることもできるのです。いいですね。
この「阿呆ワークス」のようなホームページなら、Wordpressでもけっこう簡単にできちゃいます。
（むしろWordpressでいちいちつくる必要があるのだろうか・・・）
まぁ、実際にサイトはもっと複雑で内容や見せ方なんかもページによって変えたりすると思いますので、そのときにこそ、Wordpressの便利な機能が生きてくるってことですね。
んで、個人的にはWordpressでサイトが作れるようになるにはまずHTMLとCSSが書ければ
なんとか作れてしまうんじゃないかなぁと思います。
PHPの知識は作っていくうちに覚えていくかなと思います。（自分がそうでした。）
今回はWordpressでホームページを作るのはそんなに難しくないんですよ〜
ということと合わせて、ちょっとWordpressでホームページ作ってみたくなるきっかけみたいなのを作れればと思い、記事を書いてみました。みなさんもWordpressでホームページ作りにLet'sチャレンジ！！
コメント