べんりワザ・WordPressのテンプレートと投稿の取得

テンプレート階層早見表(どのファイルが使われる?)

そのページはどのテンプレートファイルが担当している?トップ・一覧・詳細・カテゴリ・404まで、URLごとの優先順位を早見表に。使用中のファイルを確認する方法もまとめました。

「このページ、どのファイルを直せばいいの?」——WordPressはURLの種類に応じて決まった順番でテンプレートを探します(テンプレート階層)。よく使うところだけ早見表にまとめました。

共通のルールは1つ——具体的なファイルから探し、無ければ抽象的なファイルへ、最後はindex.phpにたどり着きます。

URLごとの早見表

数字は探す順番です。①から順に見ていって、最初に見つかったファイルが使われます(無ければ次の番号へ)。

表示するページ123456
トップページfront-page.phphome.phpまたはpage.phpindex.php
投稿一覧home.phpindex.php
投稿の詳細single-post.phpsingle.phpsingular.phpindex.php
固定ページ選んだページテンプレートpage-{スラッグ}.phppage-{ID}.phppage.phpsingular.phpindex.php
カテゴリ一覧category-{スラッグ}.phpcategory-{ID}.phpcategory.phparchive.phpindex.php
タグ一覧tag-{スラッグ}.phptag-{ID}.phptag.phparchive.phpindex.php
カスタムタクソノミーtaxonomy-{名前}-{ターム}.phptaxonomy-{名前}.phptaxonomy.phparchive.phpindex.php
カスタム投稿タイプの一覧archive-{投稿タイプ}.phparchive.phpindex.php
カスタム投稿タイプの詳細single-{投稿タイプ}.phpsingle.phpsingular.phpindex.php
検索結果search.phpindex.php
404404.phpindex.php
日付アーカイブdate.phparchive.phpindex.php
投稿者アーカイブauthor.phparchive.phpindex.php
添付ファイルattachment.phpsingle.phpindex.php

※トップページの2番目は、設定「ホームページの表示」が最新の投稿ならhome.php固定ページならpage.phpです。

必須なのはindex.phpstyle.cssの2つだけ。ほかは全部任意で、無ければ上の順番で代用されます。

テーマ開発テンプレート階層——URLごとに担当ファイルが決まる仕組みを手を動かして理解したいときは、テーマ開発コースのこの回へ

つまずきの定番:front-page.phpとhome.php

名前から想像する意味とずれているのが混乱の元です。

  • front-page.php——サイトのトップページ(https://example.com/
  • home.php——投稿一覧のページ

front-page.phpがあれば、トップの設定(最新の投稿/固定ページ)に関係なく最優先で使われます。「トップに固定ページを設定したのに反映されない」ときは、このファイルの存在を確認します。

べんりワザWordPressの条件分岐タグ早見表is_home()とis_front_page()の違いもセットで押さえると迷いません

使われているファイルを確認する方法

推測せず、確かめるのがいちばん速いです。

いちばん楽:プラグインで管理バーに出す

Query Monitorを入れると、管理バーに使用中のテンプレート名が出ます。パネルを開けば「探された候補の一覧」と「読みこまれたテンプレートパーツ」まで見えるので、階層のどこで勝負が決まったのかがそのまま分かります。コードを触らずに済むのが最大の利点です。

Query MonitorのWordPress公式プラグインページ。管理画面にクエリ情報のパネルが重なったバナー
表示はログイン中の自分だけ。調べ終わったら無効化しておくと安心です

Query Monitor

べんりワザ目的別・WordPressおすすめプラグイン13選ほかに入れておくと安心なプラグインはこちらにまとめています

以下はプラグインを入れられない環境(本番の調査など)での確認方法です。

目印を置く

<?php echo '★single.php'; ?>

疑わしいファイルの先頭に置いて画面に出るかを見ます。出なければ別のファイルが担当です。

body_classから推測する

<body <?php body_class(); ?>>と書いてあれば、HTMLにclass="single single-post postid-42"のような情報が出ます。ブラウザの開発者ツールでbodyのclassを見れば、ページの種類が分かるので担当ファイルを絞りこめます。

テンプレート名を画面に出す

add_action('wp_footer', function () {
  global $template;
  echo '<!-- template: ' . esc_html(basename($template)) . ' -->';
});

HTMLのコメントに担当ファイル名が出ます。公開サイトでは外すか、ログイン中だけ出す条件を付けてください。

テンプレートを分割する(共通パーツ)

同じHTMLを何枚ものテンプレートに書かないための仕組みです。

<?php get_header(); ?>       <!-- header.php -->
<?php get_footer(); ?>       <!-- footer.php -->
<?php get_sidebar(); ?>      <!-- sidebar.php -->
<?php get_template_part('parts/card'); ?>            <!-- parts/card.php -->
<?php get_template_part('parts/card', 'wide'); ?>    <!-- parts/card-wide.php -->

get_template_part()値を渡すこともできます(第3引数)。

<?php get_template_part('parts/card', null, ['size' => 'large']); ?>
<?php $size = $args['size'] ?? 'medium'; ?>

一覧の1件分のHTMLをパーツにしておくと、トップ・カテゴリ・検索結果で使い回せます。修正も1か所で済みます。

固定ページごとにデザインを変える3つの方法

  1. page-about.php——スラッグがaboutの固定ページ専用(作るだけで自動的に使われる)
  2. page-12.php——ID指定(スラッグを変えても効くが、IDが分かりにくい)
  3. ページテンプレート——編集画面から選ばせる方式
<?php
/**
 * Template Name: LP(1カラム)
 */
?>

先頭にTemplate Name:を書くと、固定ページの編集画面の「テンプレート」から選べるようになります。同じレイアウトを複数のページで使うならこの方式が便利です。

テーマ開発page.phpで会社案内ページを作るページテンプレートの作り方はテーマ開発コースのこの回で

ブロックテーマ(FSE)の場合

ここまでは.phpファイルでテンプレートを作るテーマ(クラシックテーマ)の話でした。ブロックテーマ——サイト全体をブロックエディタで編集するタイプのテーマ——では、テンプレートが.phpではなく.htmlファイルになります。

まず自分のテーマがどちらか確かめる

管理画面の「外観」メニューを見るのがいちばん早いです。

  • 「エディター」がある → ブロックテーマ(テンプレートは.html
  • 「テーマファイルエディター」だけ(「カスタマイズ」がある) → クラシックテーマ(テンプレートは.php

テーマフォルダの中身なら、templates/フォルダとtheme.jsonがあればブロックテーマです。

ファイル構成

your-theme/
├── templates/          ← テンプレート(.php ではなく .html)
│   ├── index.html
│   ├── single.html
│   └── page.html
├── parts/              ← header.php / footer.php の代わり
│   ├── header.html
│   └── footer.html
├── theme.json          ← 色・文字サイズなどの設定
└── style.css

必須なのはtemplates/index.htmlstyle.css。クラシックテーマのindex.phpと同じ位置づけです。

早見表はそのまま使える

探す順番のルールは同じで、拡張子が変わるだけです。

クラシックテーマブロックテーマ
single-shohin.phpsingle.phpindex.phpsingle-shohin.htmlsingle.htmlindex.html

上の早見表の.php.htmlに読みかえれば、そのまま通用します。ただし編集方法は別物で、ファイルを直接書くよりも管理画面の「外観 → エディター」から編集するのが基本です(保存内容はデータベース側に記録され、テーマのファイルより優先されます)。

まとめ

  1. WordPressは具体的なファイル→抽象的なファイル→index.phpの順にテンプレートを探す
  2. front-page.php=トップ、home.php=投稿一覧。名前に惑わされない
  3. 迷ったらQuery Monitor(または目印のecho・$template)で、実際に使われているファイルを確かめる
  4. 共通部分はget_template_part()で切り出す。固定ページはpage-{スラッグ}.phpかページテンプレート

「どこを直せばいいか」が一目で分かるようになると、カスタマイズの速度が一気に上がります。

よくある質問

編集しているテンプレートが反映されません
別のファイルが担当している可能性があります。Query Monitorを入れると管理バーに使用中のテンプレート名が出るので、それがいちばん確実です。プラグインを使えない場合は、ファイルの先頭に一時的にechoで目印を出し、画面に出るか確認してください。出なければ別のファイル(front-page.php・single-xxx.phpなど)が使われています。
home.phpとfront-page.phpの違いは何ですか?
front-page.phpがサイトのトップページ、home.phpが投稿一覧の担当です。トップに固定ページを設定していても、front-page.phpがあればそれが最優先で使われます。
テンプレートに必須のファイルはありますか?
index.phpとstyle.cssの2つだけです。ほかのファイルはすべて任意で、無ければindex.phpが代用されます。
固定ページごとにデザインを変えたいです
page-about.php(スラッグ指定)やpage-12.php(ID指定)を作るか、ファイル先頭にTemplate Name:を書いたページテンプレートを作って編集画面から選ばせます。