WordPress

WordPressテンプレートの仕組みと優先順位(階層)

コンテンツ

テンプレートの基本的な仕組み

このページをご覧の方は、WordPressのページがどういう仕組みで表示されているのかを知りたくてたどり着いた方だと思います。ここではWordPressのテンプレートの仕組みと優先順位というものについてお話させていただきます。

まず、WordPressには「テーマ」がありまして、選んだテーマによってサイトのデザインが変わるというのはご存知だと思います。各テーマというのは「テンプレート」といわれる複数のphpファイルの組み合わせでできています。

WordPressには、トップページだけでなく、投稿ページや固定ページ、記事の一覧ページなど、いろんなページが存在するわけですが、このようなページごとに適切なテンプレート(つまり、phpファイル)が読み込まれ、ページを表示させています。

試しに、お使いのWordPressのダッシュボードから「外観」>「テーマの編集」へと進んでみてください。
「テーマの編集」というページの右側にテンプレートの一覧が並んでいるのが分かります。

これらのテンプレートが複数組み合わさって1つのページが表示されます。「複数組み合わさって」と言うのは、次のような形です。

1つのページの中にはヘッダー、フッター、サイドバーなど、どのページを表示させたときでも共通で表示させたい部分とページごとに表示を変えたい部分があります。この共通で表示させたい部分というのは「パーツテンプレート(モジュールテンプレート)」と言われていて、「テンプレート内で読み込まれるテンプレート」として機能します。

つまり、先ほどサンプルでお見せしたテンプレートファイルがありますが、これらは1つ1つが「1ページ」なのではなくて、1ページとして表示させるファイルと、ページ内で読み込まれるパーツが混在しています。

まず、ここまでがテンプレートについての簡単な仕組みのお話です。次は、実際にご自分のサイトのテンプレートを理解する手順についてお話します。

現在表示させているページのテンプレートを知る方法

自分がいま表示させているページは、実際どのファイルを読み込んでいるのか?という疑問があると思いますので、それを簡単に確認する方法をご紹介します。

プラグインを使う方法

プラグインを使って現在表示しているページのテンプレートを確認する方法についてはこちらの記事でご紹介させていただいていますので、詳細は下記をご覧になってください。

テーマヘッダーにコードを入れる方法

こちらはプラグインを使用しない方法です。「テーマの編集」ページの右のテンプレート一覧の中から「テーマヘッダー (header.php)」というファイルを探して表示させてみてください。

テーマヘッダーが見つかったら、下の方までスクロールして、headerの終了タグの手間くらいに下記のコードを入れて更新します。

<!-- テンプレート:<?php global $template;$template_name = basename($template, '.php');echo $template_name;?> -->

このコードは、現在表示されているテンプレート名を表示してくれるコードになっています。コメントアウトされているので、実際に確認するときは「Ctrl」+「U」キーを押して、ソースコードを表示させた後、「Ctrl」+「F」キーで「テンプレート」と検索をしてください。<!-- テンプレート:index -->といった形で現在表示中のページで使用されているテンプレート名が表示されます。

表示させるページを変えて確認すると分かりますが、ページによってテンプレート名が変わっているのが確認できます。このように、ページを表示させたときに読み込まれるテンプレートというのは、それぞれ違うわけですが、実際に何が読み込まれるかは「必ずこのファイル」というのが1つだけ決まっているわけではなく、テーマ内に存在しているテンプレートに応じて優先順位が振り分けられる仕組みになっています。

テンプレートの優先順位

テンプレートの優先順位を知っていると、「このページには違うテンプレートを表示させたい」というときに、より優先順位の高いファイル名でテンプレートを作成して対応することができます。ここではページごとのテンプレートの優先順位を具体的にご紹介していきますので、必要なときに参考にしてみてください。

トップページ

トップページ(フロントページ)は、WordPressの設定で「最新の投稿」を表示させるか、「固定ページ」を表示させるかを選択する形になっています。トップページが「最新の投稿」の場合と「固定ページ」の場合では、読み込まれるテンプレートが異なります。

フロントページが「固定ページ」の場合

front-page.php > page-[slug].php > page-[id].php > page.php > singular.php > index.php

[slug]には任意のスラッグを入れます。特定のページのみ別のテンプレートにしたい場合に、そのページのスラッグを入れてテンプレートを作成します。
[id]には任意のidを入れます。特定のページのみ別のテンプレートにしたい場合に、そのページのidを入れてテンプレートを作成します。

フロントページが「固定ページ」の場合の「投稿ページ」として設定されたページ

home.php > index.php

これはいわゆる「ブログ投稿インデックスページ」といわれるページです。「アーカイブページ」と誤解しやすいので気をつけてください。「記事一覧=アーカイブ」というわけではありません。固定ページをトップページに設定した場合に最新記事の一覧を表示させるためのページのことを「ブログ投稿インデックスページ」と言います。

フロントページが「最新の投稿」の場合

front-page.php > home.php > index.php

固定ページ

page-[slug].php > page-[id].php > page.php > singular.php > index.php

[slug]には任意のスラッグを入れます。特定のページのみ別のテンプレートにしたい場合に、そのページのスラッグを入れてテンプレートを作成します。
[id]には任意のidを入れます。特定のページのみ別のテンプレートにしたい場合に、そのページのidを入れてテンプレートを作成します。

投稿ページ

single-post.php > single.php > singular.php > index.php

アーカイブページ

アーカイブページというのは、記事の一覧が表示されるページのことです。記事の一覧と一口に言ってもいろんな分類がありますので、それぞれ優先順位が異なります。

カテゴリー別

category-[slug].php > category-[id].php > category.php > archive.php > paged.php > index.php

日付別

date.php > archive.php > paged.php > index.php

タグ別

tag-[slug].php > tag-[id].php > tag.php > archive.php > paged.php > index.php

[slug]には任意のスラッグを入れます。特定のページのみ別のテンプレートにしたい場合に、そのページのスラッグを入れてテンプレートを作成します。
[id]には任意のidを入れます。特定のページのみ別のテンプレートにしたい場合に、そのページのidを入れてテンプレートを作成します。

以上が代表的なページの優先順位になります。

それぞれの階層をご覧になってお気づきになったかもしれませんが、すべてのページは最終的にindex.phpファイルを表示させるようになっています。index.phpファイルというのはテンプレートの中でも最も基本となるファイルになりますので覚えておいてください。

もっと詳しい優先順位が知りたいという方は、WordPress の公式オンラインマニュアルの「テンプレート階層」も合わせてご参照ください。>>テンプレート階層 – WordPress Codex 日本語版

最近の記事

  1. CSS

    CSS|中央寄せが効かないときは・・・
  2. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  3. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  4. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  5. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
PAGE TOP