ワードプレスのテーマ開発入門③:テンプレートファイルでページの種類ごとに表示を切り替える

ワードプレスのテーマ開発入門③のアイキャッチ

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

ワードプレステーマ開発入門1のアイキャッチワードプレスのテーマ開発入門①:まずは簡単なテーマを作ってページを表示する

そしてワードプレスのテーマ開発入門②では、ヘッダー・フッター・サイドバーを表示する方法について解説しました。

ワードプレステーマ開発入門②のアイキャッチワードプレスのテーマ開発入門②:ヘッダー・フッター・サイドバーを追加する

ここまでで用意した PHP ファイルは index.php のみでしたね。

この状態だとウェブサイトにアクセスされた場合は、どのページであってもこの index.php が実行されることになります。この状態でもウェブサイトとしては機能しているのですが、表示するページの種類(カテゴリページ・投稿ページ・固定ページなど)で実行される PHP を切り替えられた方が、ページの種類ごとにカスタマイズがしやすくて便利です。

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

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

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

テンプレートファイル

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

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

あるテンプレートファイルで生成したページ1

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

あるテンプレートファイルで生成したページ2

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

1つのテンプレートファイルが複数ページ生成する様子

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

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

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

ワードプレスのテーマ開発入門①やワードプレスのテーマ開発入門②で作成した index.php ファイルはまさにこのテンプレートファイルの1つとなります。

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

index.phpがテンプレートファイルの時のページ表示

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

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

ただ、ウェブサイト内の全てのページが全てテンプレートだと少し味気ないですよね?大丈夫です。ワードプレスにはページの種類ごとに実行するテンプレートファイルを切り替える仕組みがあります。そして、この仕組みによりページの種類ごとに表示するテンプレートを変更することが可能です。

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

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

ワードプレスでページの種類ごとにPHPが振り分けられる様子

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

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

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

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

参考 テンプレート階層WordPress Codex 日本語版

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

例えばカテゴリーアーカイブページを表示する場合は、次の複数の 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 が実行され、全てテンプレートは同じになっていたというわけです。

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

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

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

single.php

投稿表示時に実行されるテンプレートファイル

page.php

固定ページ表示時に実行されるテンプレートファイル

404.php

ページが見つからなかった時に実行されるテンプレートファイル

archive.php

カテゴリ別・投稿日付別など特定の項目で分類された記事の一番を表示するアーカイブを表示する時に実行されるテンプレートファイル

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

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

このページで覚えておいて欲しいことは「テンプレートファイルというものの存在」「テンプレートファイルの選択の仕組み」そして「テンプレートファイルの選択には優先度が考慮されること」です。この辺りを覚えておくと、テーマ開発に慣れてきてより細かくテーマをカスタマイズしたくなった時に、何のファイルを追加すれば良いかが見えてくると思います。

スポンサーリンク

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

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

テンプレートファイルの追加は単純です。テーマフォルダに特定の名前の PHP ファイルを置くだけ追加することが可能です(重要なのはファイルの中身ではなくてファイルの名前です)。ファイル名は下記ページで登場するテンプレートファイルの名前にしておく必要があります。

参考 テンプレート階層WordPress Codex 日本語版

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

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

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 で保存してください。

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

そして3つのファイルをテーマフォルダ内に置きます。置くだけで、アーカイブ表示時には category.php が、投稿表示時には single.php が、それ以外のページを表示する時は index.php が実行されるようになります。

index.phpとsingle.phpとcategory.phpがある時のテンプレートファイル選択

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

index.phpがテンプレートファイルの時のページ表示

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

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

single.phpがテンプレートファイルの時のページ表示

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

caregory.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 がどのようなページ表示時に選択されるかや優先度について確認しておくと良いと思います。

参考 テンプレート階層WordPress Codex 日本語版

まとめ

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です