ワードプレスのテンプレートとテンプレート階層を初心者にも分かりやすく解説

 

こんにちは、佐藤優里 (@engneerlabo)です。
フリーランスWebデザイナーとして主にホームページ制作・管理をしています。
このブログでは、テンプレートとテンプレート階層について解説していきます。

以上のような、ワードプレスのテンプレート階層に関するお悩みにお答えします。

 

ワードプレスでオリジナルテーマを作成するなら、テンプレート階層について知っておく必要があります。構築するサイトのページごとにコンテンツのレイアウトやデザインを変えたい、と考える人にとって必須知識です。では、ワードプレス初心者でも分かるように、ワードプレスのテンプレート階層の基本を解説しましょう。

ワードプレスのテンプレートとは

テンプレートとは、いわゆるひな形。Webページにおいて、コンテンツそれぞれの役割に対応して用意されているphpファイルをテンプレートといいます。ワードプレスを使ってオリジナルテーマを作成するときには、ワードプレスのルールに従って記述されたテンプレートを使う必要があります。

アクセスするページの持つ役割に合わせて、テンプレートファイルが自動的に紐づけられるワードプレスは初心者にとって扱いやすいでしょう。1つのテーマに複数のテンプレートを入れると、ページごとの役割を分割できます。

例えば、ワードプレスには次のようなテンプレートが用意されています。

ページの種類	テンプレート	概要
テーマの必須ファイル	index.php	他に適切なテンプレートが存在しない場合に使用されるファイル （最も汎用的なテンプレート）
フロントページ	front-page.php	サイトのトップページを出力
ホーム（メイン）ページ	home.php	記事コンテンツのトップページを出力
固定ページ	page.php	個々の固定ページを出力
投稿	single.php	個々の投稿ページを出力
カテゴリー	category.php	カテゴリーごとの一覧ページを出力

役割の違うページでも、同じパーツが存在する場合があります。複雑なコーディングで作ったヘッダーを使用していたとしても、phpファイルに記述するなら他のページでテンプレートを埋め込むと簡単に反映できるようになるので便利です。

ワードプレスのテンプレート階層を知る

ワードプレスのテンプレートには優先順位が定められています。アクセスされるページの役割に応じて優先順位の高いものを選択する仕組みが「テンプレート階層」です。選択されるテンプレートファイルは次のような順番で決まっています。

1. アクセスされたURLからページの役割を判別
2. テンプレート階層上位のテンプレートファイルを探す
3. 一致するテンプレートファイルを使用
4. 一致しなければ階層内の次に優先されるファイルを探す
5. 一致するファイルが見つからない場合は「index.php」を使う

ワードプレス初心者でも、テンプレート階層を正しく理解し、使いこなせるようになればURLごとにページを作成する必要がなくなります。ページ内の構成を同じにするならテンプレートファイルを呼び出すだけで簡単に作成できるので、作業の効率がアップします。

では、ワードプレスのテンプレート階層を表にまとめてみましょう。左から右に向かってテンプレートファイルの優先度が下がっていきます。

表の右側にいくほど優先順位は下がりますが、適用されるページの種類は多くなることを知っておきましょう。例えば投稿ページを表示するために使われる優先順位の高い「single-post_type.php」がありますが、優先順位の低い「singular.php」は投稿ページだけでなく固定ページのテンプレートとしても使えます。ページの役割が違っても、場合によっては同じテンプレートファイルを使うことが可能なのです。

フロントページ	front-page.php	-	-	-	-
ホームページ	home.php	-	-	-	-
カテゴリー	category-slug.php	category-id.php	category.php	archive.php	index.php
タグ	tag-slug.php	tag-id.php	tag.php	archive.php	index.php
カスタム分類	taxonomy-taxonomy-term.php	taxonomy-taxonomy.php	taxonomy.php	archive.php	index.php

※赤文字の部分は値を指定してください。

オリジナルテーマを作成するなら、作成するサイトの構造に適切なワードプレスのテンプレートを選択することがポイントです。「WordPress Codex」にはテンプレート階層図があるので、内容を確認しながら使っていきましょう。ワードプレス初心者は印刷しておくのがおすすめです。

ホームページを表示するテンプレート

＜ホームページのテンプレート階層＞

1. front-page.php
2. home.php
3. index.php

「front-page.php」が存在するなら、ワードプレスのホームページ表示設定が「固定ページ」を選択していても「front-page.php」が優先されます。「home.php」も存在している場合は「front-page.php」が優先されるのでトップページに表示されます。2つともない場合は、凡庸性の高い「index.php」が表示される流れになります。

「最新の投稿」ではなく「固定ページ」を選択していると、表示されるテンプレートのメインループでアクセスできるのは固定ページの記事ですので注意してください。投稿の一覧などを取得するためにはサブループを利用なさってください。

投稿ページを表示するテンプレート

＜投稿ページのテンプレート階層＞

1. single-{post_type（カスタム値）}.php
2. single.php
3. singular.php
4. index.php

通常は「single.php」を用いますが、スラッグやIDを使った振り分けが出来ないので、ページに合わせて表示内容を分けたいなら条件分岐タグを使ってください。例えば、「in_category」タグを使ってカテゴリー分岐したり、「get_template_part 」タグを使ってテンプレートパーツを読み込むことによって切替できます。

カスタムページを作成したいときには、投稿ページ用のテンプレートである「single-カスタム投稿名.php（single-{post_type}.php）」を使ってカスタム投稿名を設定すればオリジナルテンプレートを作成できます。

固定ページを表示するテンプレート

＜固定ページのテンプレート階層＞

1. customname.php
2. page-slug.php
3. page-id.php
4. page.php（固定ページの汎用テンプレート）
5. singular.php
6. index.php

通常、ウェブサイトではお問い合わせフォームやサイトの目的などを説明しているページ、Q＆Aなどの固定されたページが存在しています。固定ページを作成するときに呼び出されるテンプレートの優先順位は上記の通りです。

ワードプレスの管理画面で固定ページにスラッグを割り当てれば、固定ページそれぞれのレイアウトやでざいんを変えられます。

カスタムページを表示するテンプレート

＜カスタムページのテンプレート＞

<?php
/*
Template Name: カスタム投稿名
*/

カスタムページのテンプレートは特定のページに利用できるように設定できます。任意のファイル名を付けて作成し、ページの先頭でテンプレート名を指定する記述をつけることによっててきようできるようになります。

カスタムページのテンプレートはファイル名とテンプレート名が別でも構いません。「Template Name:」の部分ですが、「:」の前にスペースを入れないように注意してください。

カスタムテンプレートを作成すると、選択肢の幅が広がります。数はいくつでも増やすことができますので、見分けがつきやすいようにファイル名に一定のルールを定めておくようおすすめします。

「index.php」は使わなくてもOK

適用できるテンプレートが存在しなかった場合に、最終的に選択されるのはもっとも凡庸性の高い「index.php」です。オリジナルテーマを作成するには必須ですが、テンプレート階層では優先順位が最も低いので「index.php」を使わなくても、オリジナルテーマを作成することは可能です。

逆に、「index.php」だけを使ったテーマ作成もできますが、テンプレートコードがページの役割に適応させるため複雑になります。

オリジナルテーマに必須の「index.php 」を削除してしまうとエラーになるので、何も記述しない空ファイルとして残しておいてください。もし、他のテンプレートファイルのスペルを間違えると空ファイルの「index.php 」が適用されるため画面が真っ白になりミスに気づきやすくなります。

 

個別のテンプレート作りには「スラッグ」

IDの値を指定してオリジナルテーマに沿った個別のテンプレートを作成することも可能です。ただし、IDを使いすぎるとテンプレートファイルだけで見分けるのが難しくなるため、スラッグを使うのをおすすめします。

スラッグは固定ページや投稿ページのテンプレートコードに付加できるキーワード。例えばスラッグに「company」という固有キーワードを付加すると、アクセスリンクの「/company」で簡単に遷移できるようになるので便利です。その際に作成する個別のテンプレートは次のように記述します。

page-company.php

 

一覧ページを作るarchive.phpが表示されない解決方法・やり方

archive.phpは、一筋縄では表示させることができないという特殊なテンプレートファイルになります。
他のテンプレートファイルとは違って、functions.php に、アーカイブページを作成する記述をする必要があります。
そして管理画面の設定から、パーマリンク設定をして更新します。

 

オリジナルテーマにテンプレート階層の知識は必須

ワードプレスでオリジナルテーマを使ってウェブページを作成したいと考えていますか？まず、ワードプレスのテンプレート階層に関する知識をつけましょう。ページの種類に適応したテンプレートを知って、優先順位の高いものをできるだけ使うことが重要です。

初心者にとって、初めは理解しがたく、全く使いこなせないように感じるかもしれません。しかし、本来は利便性を追求されて作られているものなので、慣れれば作業効率を格段にアップできます。今回紹介したテンプレートを使用しながら徐々に覚えていきましょう。