WordPressを学習していると、最初につまづくのがテンプレート階層ではないでしょうか。ファイル名による適用テンプレートの変化と、複雑な優先順位。今回は、そんなWordPressのテンプレート階層について紹介しましょう。
テーマに必要なのはindex.phpのみ
WordPressでサイトを作る場合は、「テーマ」を作ることになります。テーマは、次のディレクトリーに、サブディレクトリーを作成し、その中にオリジナルのファイルを置いていきます。
wp-content/themes
この時、テーマとして認識させるには「style.css」というスタイルシート兼設定ファイルと、「index.php」というファイルだけがあれば、テーマとしては成立します。
index.phpだけで作成するマイクロサイト
ではこの時、この「index.php」だけがあるテーマはどんな動きをするでしょうか。この場合、フロントページも投稿の一覧も個別ページも、固定ページもカテゴリーも、全ての画面において「index.php」が利用されます。
見た目が極限までシンプルなマイクロサイトなどの場合は、この「index.php」だけでサイトを構築することもできます。しかし、さすがに全ての画面が同じ見た目というサイトはなかなかないので、ここから派生して「例外」の画面を作成していくことになります。
ファイルの有無によって変化する優先順位
では例えば、固定ページのレイアウトを変化したい場合はどうしたら良いでしょう。この場合、テーマディレクトリーの中に「page.php」という名前のファイルを作成ます。ファイル名は「page」に限定されていて、それ以外のファイル名では正しく認識されません。
最初のつまづきポイントは、このファイル名のスペルミスで新しいレイアウトを追加しようとしてファイルを作成したものの、スペルを間違えていて認識されないということがよくあります。この場合、エラーメッセージなども表示されないためファイル名には細心の注意を払いましょう。
テンプレート階層図を確認しよう
では、今の動作を「テンプレート階層図」で確認してみましょう。WordPressの公式ドキュメント「WordPress Codex」にアクセスします。
ページ内に「テンプレート階層図」があるので、これをクリックして内容を確認しましょう。頻繁に確認するため、印刷などをしても良いでしょう。
まず、一番右側を見ると「index.php」というファイル名があります。これが「根」になります、ここからツリー(階層)状にファイルの種類が増えていくのがテンプレート階層という概念です。
では、今度は左端を見ていきましょう。ここには、画面の名前が書いてあります。そして、index.phpに向かって線が引かれていて、途中にファイル名が書かれていたり、分岐していたりします。これが、優先順位で、左に書かれたファイル名ほど優先順位が高くなります。
今、「個別ページ→固定ページ→ページテンプレート→標準テンプレート」と辿っていくと、その先に「page.php」があります。これはつまり、固定ページのテンプレートとして「page.php」は「index.php」よりも優先順位が高いことがわかります。
こうして、テンプレート階層を確認していきます。
WordPress開発マスター講座
世界でもっとも使われているWordPressのテーマ開発手法を、PHPの基本からカスタムフィールドやフックの知識まで、幅広く紹介します。
まずは、プライマリーテンプレートを覚えよう
テンプレート階層図は色分けされていますが、この中で濃いブルーのファイル名が「プライマリーテンプレート」と呼ばれ、基本となるテンプレートなので、この機会に暗記してしまうとサイト構築が楽になります。
一覧系 | archive.php |
個別系 | singular.php(投稿が single.php、固定ページが page.php) |
フロントページ | home.php |
コメントポップアップ | comment-popup.php |
404エラー | 404.php |
検索結果 | search.php |
index.phpは使わないのがおすすめ
テンプレート階層図を見ると、プライマリーテンプレートのファイルを作成すると、index.phpにたどり着く画面は1つもなくなることが分かります。つまり、利用しなくても良いのです(ただし、削除してしまうとエラーになるので空のファイルとして置いておきましょう)。
実際、index.phpは利用しないほうがトラブルが少なくなります。index.phpを空のファイルにしておくと、万が一テンプレートファイル名のスペルを間違えた時などに、真っ白の画面になるため分かりやすくなります。
セカンダリーテンプレートを使いこなそう
プライマリーテンプレートを使えるようになったら、続いてセカンダリーテンプレート(水色部分)を使いこなしていきましょう。次のようなテンプレートがあります。
author.php | 作成者別アーカイブ |
category.php | カテゴリーアーカイブ |
date.php | 日別・月別アーカイブ |
tag.php | タグアーカイブ |
front-page.php | トップページ |
この他、カスタム投稿タイプ・カスタムタクソノミーを利用した場合のテンプレートや添付ファイル用などがありますが、ここでは省略します。
ID別にテンプレートを作れるバリアブルテンプレート
最後に、赤い枠のバリアブルテンプレートです。これは、IDなどの値を使って個別のテンプレートを作ることができます。例えば、カテゴリーアーカイブを見ていきましょう。次のようなファイル名があります。
category-$id.php
この「$id」という部分にカテゴリーのIDをふかします。カテゴリーIDは、カテゴリーの編集画面などで知ることができます。例えば、ID=1のテンプレートを作るなら
category-1.php
とします。
スラッグを使いこなそう
IDの場合、テンプレートファイル名だけでは見分けがつきにくくなってしまうため、「スラッグ」を使った方が良いでしょう。
スラッグ(Slug)とは、固定ページや投稿に付加できる固有のキーワードです。例えば、「company」というスラッグを付加した固定ページの場合、/companyといったURLでアクセスできるようになります(パーマリンクの設定による)。
例えば、「company」というスラッグを固定ページに付加した場合、次のようなファイル名で独自のテンプレートファイルを作成できます。
page-company.php
カスタムテンプレートとは
固定ページの階層図を見ると、「ページテンプレート」となっていて、その後が「カスタムテンプレート」と「標準テンプレート」に分岐しています。標準テンプレートというのは、通常の固定ページのことですが、「カスタムテンプレート」とはなんでしょうか?
これは、固定ページを作るときにテンプレートを選択できる機能で、テーマによって固定ページの編集画面に右下の「ページ属性」部分でドロップダウンが表示される事があるのを見たことがあるかもしれません。これが「カスタムテンプレート」です。
カスタムテンプレートを作成するには、次のような手順で行います。
- テーマディレクトリー内に任意の名前のファイルを作成します(例: template-original.php)
- ファイルの先頭に、次のように記述します。
/* Template Name: オリジナル */
こうして、自由にテンプレートを作成してみましょう。ドロップダウンに選択肢が表示されるようになります。この数はいくつでも増やすことができます。
ファイル名は任意ですが、他のテンプレート名と重なることを防いだり、見分けがつきやすくするために一定のルールを定めると良いでしょう(先頭に template-をつけるなど)
今、どのテンプレートを使っているかが分からなくなったら、テンプレートを知るための開発用プラグインがあります。筆者は、専用プラグインではありませんが「Query Monitor」を利用しています。
これを利用すると、管理者ツールバーに専用のボタンが増え、これをクリックするとテンプレート名を知ることができます。この他にもさまざまな機能があるので別の機会に紹介しましょう。
WordPressのテンプレートは、ルールが複雑ですが使いこなすと非常に自由度が高くサイトがカスタマイズできます。正しく理解して使いこなしましょう。