【ワードプレス】テーマの作り方③：テンプレートファイルでページの種類ごとに表示を切り替える

テーマの作り方①では、テーマとしてワードプレスに認識させ、ページを表示するまでの手順を解説しました。

【ワードプレス】テーマの作り方①：まずは簡単なテーマを作ってページを表示する

そしてテーマの作り方②では、ヘッダー・フッター・サイドバーを表示する方法について解説しました。

【ワードプレス】テーマの作り方②：ヘッダー・フッター・サイドバーを追加する

ここまでで用意した PHP ファイルは index.php のみでしたね。この状態だとウェブサイトにアクセスされた場合は、どのページであってもこの index.php が実行されることになります。

この状態でもウェブサイトとしては機能しているのですが、表示するページの種類（カテゴリページ・投稿ページ・固定ページなど）に応じて実行される PHP を切り替えられた方が、ページの種類ごとにカスタマイズがしやすくて便利です。

今回のテーマの作り方③では、テンプレートファイルを用意し、表示されるページの種類に応じて実行される PHP を切り替える方法を解説します。

テンプレートファイルとは

最初にテンプレートファイルについて解説していきます。

テンプレートファイル

テンプレートファイルとはまさに、表示するページのテンプレート（ひな形）となるファイルです。

例えば私のウェブサイトでは、あるページだと下のように表示され、

他のあるページだと下のように表示されています。

記事本文部分は異なりますが、その他の大枠部分は同じ見た目・同じ構成になっていることが分かると思います。このように大部分が同じ見た目・同じ構成になっている理由は、この２つのページが同じテンプレートファイルから生成されたページだからです。

この各ページで同じ見た目・同じ構成となっている部分がまさにテンプレートです。そして、このテンプレートを作成しているのがテンプレートファイルです。

同じテンプレートファイルを用いて表示されるページは、基本的に全て同じテンプレートとなります。そして記事本文部分のみは別途データベースから取得して異なる内容となり、見た目が統一された様々なページを表示することができます。

スポンサーリンク

index.php もテンプレートファイル

テーマの作り方①や、テーマの作り方②で作成した index.php ファイルはまさにこのテンプレートファイルの１つとなります。

特にテーマの作り方②で index.php にヘッダー・フッター・サイドバーを表示させるようにしましたが、これによりどのページを表示してもヘッダー・フッター・サイドバーが表示されるようになったと思います。

これは各ページ表示時に、テンプレートファイルである index.php ファイルが実行されているためです。この index.php がテンプレート部分を生成し、さらに記事本文をそのテンプレートに埋め込むことでページ（HTML）が生成され、ウェブブラウザにページが表示されています。

ページ種類に応じたテンプレートファイルの切り替え

ただ、ウェブサイト内の全てのページが全て同じテンプレートだと少し味気ないですよね？

大丈夫です。ワードプレスにはページの種類ごとに実行するテンプレートファイルを切り替える仕組みがあります。そして、この仕組みによりページの種類ごとに表示するテンプレートを変更することが可能です。

テンプレートファイルの選択の仕組み

ワードプレスでは、ページ表示の要求があった際に、そのページの種類（カテゴリや投稿、固定ページ、トップページなど）を分析し、その種類に応じて実行する PHP ファイル（テーマ内のPHPファイル）を選択する仕組みがあります。

ここで選択される PHP ファイルがまさにテンプレートファイルです。つまり、どのテンプレートファイルを選択して実行するかは、表示するページの種類に応じてワードプレスが自動的に決定し、自動的に実行してくれます。

例えば上の図のようなファイル構成の場合、投稿のページの表示が要求された場合は single.php が選択されて実行されるという感じです。

スポンサーリンク

テンプレートファイル選択時のルール

では、どの種類のページを表示した時にどのテンプレートファイルが選択されるのでしょうか？この情報は下記ページで図として表されています。

ちょっと難しいかもしれませんので、具体例で解説します。

例えばカテゴリーアーカイブページを表示する場合は、次の複数の php を上から順にファイルがあるかどうかを確認し、最初にあったファイルをテンプレートファイルとして実行することになっています（$slug はカテゴリーのスラッグ、$id はカテゴリーの ID が入ります）。

• category-$slug.php
• category-$id.php
• category.php
• archive.php
• index.php

下の図のようにテーマフォルダ内にテンプレートファイル「category-test.php」「archive.php」「index.php」のみが存在する場合を考えてみましょう。

この場合、スラッグが「test」のカテゴリーページ一覧を表示する際は、category-test.php が実行されるようになります。

しかし、スラッグが「exam」のカテゴリーページ一覧を表示する際は、存在するテンプレートファイルの中で一番優先度の高い「category.php」が実行されることになります。

もしテンプレートファイルが index.php ファイルしかない場合は、必ずテンプレートファイルとして index.php が選択されます。テーマの作り方①やテーマの作り方②ではテンプレートファイルに index.php しか用意していませんでしたので、必ず index.php が実行され、全てテンプレートは同じになっていたというわけです。

このように、テンプレートファイル選択のルールを利用すれば、特定の種類のページのみを他と異なるテンプレートにすることが可能になります。例えば「投稿のページだけ他と異なるテンプレートにする」「特定のカテゴリーのみ他と異なるテンプレートにする」といったことが可能です。

代表的なテンプレートファイル

ただ、いきなりたくさんテンプレートファイルが出てきてテーマ開発初心者の方だとかなり混乱すると思います。まずは下記の代表的なテンプレートファイルの存在を覚えておくと良いと思います。

また、テーマ開発の初期段階だとここまで細かくテンプレートファイルを分ける必要はないと思います。テンプレートファイルがない場合には自動的に index.php ファイルがテンプレートファイルとして実行されます。

ですので、最初はこの index.php を育てていき、ある程度 index.php に満足がいくようになった時に、index.php のプログラムをコピーして他のテンプレートファイルを追加し個別のカスタマイズをしていくので良いと思います。

まずこのページで覚えておいて欲しいことは「テンプレートファイルというものの存在」「テンプレートファイルの選択の仕組み」そして「テンプレートファイルの選択には優先度が考慮されること」です。

この辺りを覚えておくと、テーマ開発に慣れてきてより細かくテーマをカスタマイズしたくなった時に、何のファイルを追加すれば良いかが見えてくると思います。

テンプレートファイルの追加方法

ここまで長々とテンプレートファイルについて説明してきましたが、最後にテンプレートファイルの追加方法について解説したいと思います。

テンプレートファイルの追加は単純です。テーマフォルダ直下に特定の名前の PHP ファイルを置くだけ追加することが可能です（重要なのはファイルの中身ではなくてファイルの名前です）。

ファイル名は下記ページで登場するテンプレートファイルの名前にしておく必要があります。

テンプレートファイルを置けば、前述の通りワードプレスがページ表示時に自動的にテンプレートファイルを選択して実行してくれます。

では実際にテンプレートファイルを追加してみましょう！下記のプログラムの PHP ファイルを作成し、名前を index.php で保存してください。

<?php
get_header();
echo "<div id=\"content\">\n";
while ( have_posts() ) {
	the_post();
	the_title();
	the_content();
}
echo "</div>\n";
get_sidebar();
get_footer();
?>

次に、下記のプログラムの PHP ファイルを作成し今度は名前を single.php で保存してください。

<?php
get_header();
echo "<div id=\"content\">\n";
while ( have_posts() ) {
	the_post();
	the_title();
	the_content();
}
echo "</div>\n";
get_footer();
?>

もう一つ、下記のプログラムを名前を category.php で保存してください。

<?php
get_header();
echo "<div id=\"content\">\n";
while ( have_posts() ) {
	the_post();
	the_title();
}
echo "</div>\n";
get_sidebar();
get_footer();
?>

そして３つのファイルをテーマフォルダ直下に置きます。具体的には下記の位置になります。

ワードプレスインストールフォルダ/wp-content/themes/テーマ名/

置くだけで、アーカイブ表示時には category.php が、投稿表示時には single.php が、それ以外のページを表示する時は index.php が実行されるようになります。

まずはトップページを表示してみてください。

見た目は違うかもしれませんが、サイドバーが表示されていると思います（スタイルシートの設定が行われていない場合は、サイドバーがページの中央に表示されていると思います）。

続いて投稿のページを表示してみてください。今度はサイドバーが表示されないはずです。

さらにカテゴリーのページを表示してみてください。サイドバーはありますが、記事の内容は表示されず、タイトルのみが表示されるようになっていると思います。

つまり、表示するページの種類に応じて実行されるテンプレートが切り替わり、それによりテンプレートも切り替わっているのです。

トップページを表示した場合はテンプレートファイルとして index.php が実行されますが、投稿のページを表示する場合は single.php が、カテゴリーのページを表示する場合は category.php が実行されます。

index.php では get_sidebar() を実行しているのでサイドバーが表示されますが、single.php では get_sidebar() を実行していないのでサイドバーが表示されません。

また index.php では the_content() を実行しているので記事の本文が表示されますが、category.php では the_content() を実行していないので記事の本文は表示されません。

このことより single.php と category.php というテンプレートファイルをテーマファイルに置くだけで、投稿のページ表示時とカテゴリーのページ表示時に実行されるテンプレートファイルが変わることを実感していただけたと思います。

同様にして必要なテンプレートファイルを追加し、それぞれのテンプレートファイルをカスタマイズすることで、表示するページの種類に応じて異なったテンプレートのページを表示することができるようになります。

最後に下のページで、今回作成した single.php と category.php がどのようなページ表示時に選択されるかや優先度について確認しておくと良いと思います。

スポンサーリンク

まとめ

このページでは、まずテンプレートファイルについて解説し、テンプレートファイルが選択される時の仕組み、代表的なテンプレートファイル等について解説しました。

テンプレートファイルを活用すれば、ページの種類ごとにテンプレートをカスタマイズすることができるようになります。ただしいきなりテンプレートファイルを増やしてしまうとその分変更するファイルが増えるので大変ですので注意です。

まずはテンプレートファイルの概念について理解しておきましょう！