最小限のファイルでテーマを作成してみる
※この記事は、以前アップした【第１回 WPテーマに必要最低限のファイルを揃える】をリバイズしたものです。
最初のWordPressテーマ作成
適当なディレクトリに、フォルダを１つ作成します。そして次のファイルを作成して、フォルダに入れてください。
作成するファイル
- index.php
- style.css
- screenshot.jpg
ファイル名は大切です。このままの名前でファイルを作成してください。
index.php
htmlを生成する基本ファイルになります。
style.css
基本のスタイルシートです。全てコメントアウト（/*〜*/）してありますが、これらはWordpressにテーマを登録するときに必要な情報です。style.cssファイルの先頭に書かれている必要があります。
各行のコロン（：）の後に、テーマ名や、テーマの説明、作成者などの情報を記載します。ここは、あなたの情報に書き換えてください。なお、この状態はまだスタイル指定をしておりません。
screenshot.jpg
WordPressのダッシュボード上で、外観＞テーマを表示したときに表示される画像です。画像の大きさは（W880 x H660ピクセル）で作成すると、そのままの大きさで表示されます。通常はサイト実行したときのスクリーンショットを利用します。形式はjpg/pngともにOKです。
３つのファイルが用意できたら、フォルダをZIP形式で圧縮してください。これで、最初のテーマは完成です。
自作テーマをWordPressに適用する
1. テーマをアップロードする
作成したテーマをWordPressにアップロードします。アップロードの方法は【こちら】などのサイトに詳しく書いてあります。アップロード出来たら、そのテーマを有効化してください。
インストールしたテーマは直接編集できる
アップロードすると、前回記事で紹介した/themesフォルダに、今回作成したフォルダが新規作成されています。ローカルPC上で開発するときは、このフォルダに入っているファイルを直接編集すればOKです。
インストール失敗した場合
テーマのインストールに失敗した場合は、コードのどこかに誤りがあります。セミコロン（;）やコロン（:）などは間違え易い所です。抜けや誤りがないかどうか確認してください。
2. ダッシュボードのテーマ一覧を確認する
まずは、WordPressの外観＞テーマで、今アップロードしたテーマを確認してみましょう。サムネイルの写真はscreenshot.jpgとして指定した画像が表示されていますよね。そして、テーマ名や説明文の欄に、cssファイルに書いた内容が表示されています。
3. サイトを確認する
次に、「サイトを表示」でサイトを見てみましょう。下のような画面が出てくるはずです。ブラウザのタイトルバーに、あなたがWordPressの設定メニューで指定した「サイト名」が表示されているでしょうか？またページ内に、index.php内で記載した「Hello, welcome to WordPress!」というメッセージが表示されていれば、実験成功です。
4. サイトのソースを確認する
ブラウザの「ソースを表示」を使って、ソースコードを確認してみます。
※Mountain Lionがリリースされた頃から、Safariからソースを表示する機能が削除されちゃいましたね。MacユーザはFirefoxかChromeで見てください。
サイトのソース
ソースコードを理解する
今回作成したテーマは、「index.php」と「WordPressダッシュボードでの設定情報」の２つから、先ほどのサイトが出来上がっています。「index.php」と「サイトのソース」を比べてみると、その内容はかなり似通ったものになっています。違うところは、PHPやWordPress関数をを挿入した所です。index.phpのファイルの中で、関数を挿入した箇所を、上から順に見て行きましょう。
文字コードを出力する
元のコード
<meta charset="<?php bloginfo('charset'); ?>" />
出力結果
<meta charset="UTF-8" />
WordPress関数は、<?phpと?>の間に書く
元のコードのうち、<?php bloginfo(‘charset’); ?>がPHPとWordPress関数を利用している箇所です。まず覚えるべき決まり事ですが、WordPress関数はPHPブロック<?phpと?>の中に書きます。
PHPのコードは、PHPブロックの中に書くという決まりがあります。また、WordPress関数はPHPで書かれています。なので、WordPress関数はPHPブロックの中に書くことで使えます。
bloginfo()は、WordPressの設定情報をHTML出力するWP関数
このコードではWordPressのダッシュボードで指定している文字のエンコード情報を、bloginfo(‘charset’)関数でソースコードに出力しています。WordPressのダッシュボード＞設定＞表示設定＞ページとフィードの文字コードを確認してみてください。それがあなたのサイトソースに反映されているはずです。
サイト名を出力する
元のコード
<title><?php bloginfo('name'); ?></title>
出力結果
<title>HitsujixWordpress</title>
bloginfo()は、括弧内の値でHTML出力する内容を指定する
ここでは、HTMLのタイトルに、WordPressのダッシュボードで指定した「サイトのタイトル」を出力しています。サイト名を出力するには、bloginfo()関数の括弧内に’name’を指定すればOKです。このように、bloginfo関数は、括弧内の値によって、HTML出力する内容を変えることができます。
実行すると<?php bloginfo(‘name’); ?>がサイト名に置換
サイトを表示すると、PHPブロックで書いた所が、WordPress関数によって置換されます。<title>タグなど、そのほかの部分はそのまま出力されます。
スタイルシートを適用する
元のコード
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
出力結果
<link rel="stylesheet" href="http://127.0.0.1:8080/wordpress/wp-content/themes/Training/style.css" type="text/css" />
このテーマのスタイルシート（style.css）のURLを出力する関数bloginfo(‘stylesheet_url’);を使って、スタイルシートをインポートするコードを出力します。実行すると、PHPブロックの箇所がスタイルシートの絶対URLに置き換わります。
文字列を出力する
元のコード
<body> <?php echo 'Hello, welcome to WordPress!'; ?> </body>
出力結果
<body>
Hello, welcome to WordPress!
</body>
PHP関数も混在できる
bodyの中に、PHPのecho文で”Hello, welcome to WordPress!”というテキストを出力しています。WordPressはPHPを使って動作するので、WordPress関数だけでなく、PHPの関数も同じPHPブロックに混在させることができます。
echoは、指定した文字列を出力するPHP関数
echoはPHP関数です。echo ○○; の形で、○○に指定した文字列を出力できます。
[補足]
○○には、変数を指定することもできます。
bloginfo()関数
今回作成したテーマで利用しているWordPress関数は、全てbloginfo()です。これはサイトの設定情報を出力する関数です。引数によって、どの情報を出力するかを制御することができます。WordPressの公式リファレンスに引数リストがあります。
テーマ作成のまとめ
最後に、今回のテーマ作成のポイントをまとめます。
- WordPress関数は、PHPブロック<?php ?>内に書く。
- bloginfo()はサイトの情報を出力する関数。どの情報を出力するかを、引数で制御する。
- PHP関数とWordPress関数は、htmlコードの中に混在できる。
次回は、投稿した記事を出力できるように、テーマをカスタマイズする方法を紹介します。