HTMLファイルを用意する
HTMLファイルがあるとテーマ作成はラク
新規のテーマを開発し始める方法の１つに、まず元となるHTMLファイルを作成して、それをWordPressのテーマファイルに直すというやり方があります。予めサイトのデザインが決まっていると、テーマ開発はよりスムーズです。
今回は、下記サイトを例にします。
HTML
このHTMLの軽い説明
- div#container: サイトの中身全体を囲んで中央寄せ
- header#header: サイト名とメニューバーを入れる
- div#main: サイト中央のブロック。投稿記事＋サイドメニューを囲む
- div#content: 投稿記事を囲む
- aside#sidebar: サイドメニューを囲む
- footer: コピーライトを表示
CSS
HTMLファイルからWPテーマファイルを作成する
1. style.cssを作成する
まずは、スタイルシートをWordPress用に修正します。とても簡単です。
- エンコード指定行を削除（@CHARSET…）
- テーマの情報を挿入
前々回記事でも紹介しましたが、テーマの情報をファイル先頭に挿入します。コロンに続けて、それぞれテーマ名や、テーマの説明、作成者などの情報を記載します。適宜書き換えてください。
【補足】指定できるテーマの情報（ライセンス形態の指定など）は他にもあります。Twenty Elevenなどのプリインストールテーマのstyle.cssを見ると参考になります。
2. index.phpを作成する
index.phpという名前で空のファイルを作成してください。そのファイルに、元となるHTMLファイルのコード全てを、index.phpにコピー＆ペーストしてください。コードの中身は、後で修正します。
3. WPテーマを適用する
空のフォルダを作成して、index.phpとstyle.cssを入れます。このフォルダを、/themesフォルダに入れるか、またはZIP化した後にダッシュボード＞外観＞テーマからアップロードしてください。サイト表示すると、下記のようなページになります。
表示はされたものの、この状態ではWPテーマとして不十分ですね。
HTMLをWordPress関数やPHPに置き換える
上で作成したテーマをカスタマイズしていきます。
- スタイルシートのパスを修正する
- 投稿記事を反映させる
- ダッシュボードで設定したサイト名を反映させる
- ダッシュボードで設定したエンコードを指定する
この中でも、重要な作業が#1と#2です。
1. スタイルシートのパスを修正する
先ほど確認したサイトは、スタイルシートが正しく反映されていませんでした。スタイルシートの絶対パスをWordPress関数で出力するように書き換えます。
修正前のコード
<link rel="stylesheet" href="style.css" type="text/css" />
修正後のコード
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
修正後の実行結果（あなたの実行環境に対応したパスが生成されます）
<link rel="stylesheet" href="http://localtest.net/wp-content/themes/training02-01/style.css" type="text/css" />
正しく動作していれば、スタイルシートが適応されたはずです。
2. 投稿記事を反映させる
index.phpに書き込んだ仮の記事が表示されているので、WordPressで投稿した記事を表示できるように書き換えます。
修正前のコード
<article class="post">
<header>
<h1 class="post-title">２件目の投稿</h1>
<p class="post-meta">2012年9月2日</p>
</header>
<div class="post-content">
<p>今日もWordPressでサイトを作っている。10年前にWebサイトを作ったときは、ページ毎にHTMLをゴリゴリ書いていたので、更新やメンテナンスが大変だった。こんなに高機能なツールが無料で公開されている現代は凄いと思う。</p>
<p>サイト制作に飽きて来たので、今日はこれから外に出掛けます。</p>
</div>
</article>
<article class="post">
<header>
<h1 class="post-title">１件目の投稿</h1>
<p class="post-meta">2012年9月1日</p>
</header>
<div class="post-content">
<p>おはようございます。もう９月だと言うのに、毎日暑い日が続きますね。</p>
</div>
</article>
修正後のコード
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<article class="post">
<header>
<h1 class="post-title"><?php the_title(); ?></h1>
<p class="post-meta"><?php the_date(); ?></p>
</header>
<div class="post-content">
<?php the_content(); ?>
</div>
</article>
<?php endwhile; endif; ?>
WordPress関数をさらっと説明
- have_posts() 投稿記事がある場合はtrue, ない場合はfalseを返す
- the_post() 記事を１つ取り出す
- the_title() 取り出した記事のタイトルを表示
- the_date() 取り出した記事の日付を表示
- the_content() 取り出した記事の本文を表示
関連記事はここにあります
3. ダッシュボードで設定したサイト名を反映させる
サイト名を、index.phpに直接書き込むのではなく、ダッシュボードで設定したサイト名を反映するように修正します。今回のサイトでは、サイト名が３カ所で使われていました。
（１）タイトルタグ
修正前のコード
<title>Hitsuji x WordPress</title>
修正後のコード
<title><?php bloginfo('name'); ?></title>
修正後の実行結果（ダッシュボードで設定したサイト名が出力されます）
<title>Hitsuji x WordPress</title>
（２）サイト名表示＠ページ上部
修正前のコード
<h1 id="site-title"><a href="index.html">Hitsuji x WordPress</a></h1>
修正後のコード（ついでに、トップページへのリンクも修正）
<h1 id="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
修正後の実行結果（あなたの実行環境に対応したリンク先、サイト名が表示されます）
<h1 id="site-title"><a href="http://localtest.net">Hitsuji x WordPress</a></h1>
（３）コピーライト表示＠フッター
修正前のコード
<p>©Hitsuji x WordPress, All rights reserved.</p>
修正後のコード
<p>©<?php bloginfo('name'); ?>, All rights reserved.</p>
修正後の表示結果（ダッシュボードで設定したサイト名が出力されます）
<p>©Hitsuji x WordPress, All rights reserved.</p>
4. ダッシュボードで設定したエンコードを指定する
エンコード情報を、WordPress関数を使って出力するように変更します。
修正前のコード
<meta charset="utf-8" />
修正後のコード
<meta charset="<?php bloginfo('charset'); ?>" />
修正後の実行結果（ダッシュボードの設定が反映されます）
<meta charset="utf-8" />
まとめ
以上の作業手順をまとめます。
- サイトデザインを決めて、HTML＆CSSファイルを作成する
- CSSファイルの冒頭に、テーマ名などの情報を書く。エンコード指定行は削除
- index.phpファイルを作成して、HTMLのコードを全てコピペ
- テーマをWPに適用させる
- スタイルシートのパス、投稿記事表示コードを、WordPress関数＆PHPで書き換え
- その他のサイト情報（サイト名、エンコード）を、bloginfo()関数で出力するように書き換え
【補足】メニューバーのURLが、相変わらず”dummy.html”となっていますが、別の回で取り扱います。
最後に、すべての変更を行った後のindex.phpを書いておきます。
index.php
以上、お疲れさまでした！
「index.phpをカスタマイズする」の記事
