WordPressテンプレート階層完全ガイド!実践ロードマップ、便利ツールなど徹底解説!
「テンプレートをいじったら表示が崩れた……」「どのファイルを編集すればいいのかわからない」「子テーマって本当に必要?」──そんな悩みを抱えていませんか?
「トップページだけ見た目を変えたいけど、どのファイルを編集すれば安全ですか?」
「投稿ページなのに期待したテンプレートが読み込まれない。どこから調べればいい?」
「テーマ更新でカスタマイズが消えないようにしたいがベストプラクティスは?」
「カスタム投稿やタクソノミーを追加したら、一覧がうまく表示されない……原因は何だろう?」
本記事は、初心者でも迷わず理解できるように「概念 → 代表ファイル → ページ別の優先順 → 実践チェックリスト」の順で丁寧に解説します。
読み終える頃には「どのテンプレートを作るべきか」「なぜそのファイルが選ばれるのか」「変更前に何を準備すべきか」がはっきりわかります。
この記事で学べること
- テンプレート階層の仕組み(優先順位の考え方)✅
- 代表的なテンプレートファイルと用途(どれが必須か)✅
- ページ種類ごとの読み込み順(front-page / single / page / archive 等)✅
- 実務で役立つチェックリストと検証手順(テンプレートの確認方法、便利プラグイン)🔧
- 安全なカスタマイズ手順(子テーマ・バックアップ・ステージング)🔒
まずは小さく着手して、段階的にカスタマイズする——この記事はそのための実践ロードマップとして設計しました。
読みながら手を動かせるように、確認用の小ネタやコマンド例も随所に載せています。
さあ、一歩ずつ進めましょう。🚀
テンプレートの基礎:役割と動作の概要
テンプレートとは何か(仕組みのやさしい解説)
テンプレートとは、WordPress が「どの HTML(=見た目)を出力するか」を決めるためのPHPファイル群です。
言い換えると、テンプレートは 「ページのレイアウトと表示ロジックを担う設計図」 のようなものです。
初心者向けのイメージ
- サイトに来た訪問者 → WordPress が「このリクエストは何を見せるべきか」を判断 → 該当するテンプレートファイルを読み込む → HTML を返す。
- つまりテンプレートは「どのパーツを、どの順番で組み合わせて表示するか」を決める役目を持ちます。
ポイント
- ファイル単位で分かれている(例:
header.php、single.php、404.phpなど)。 - PHP と HTML の混在で、動的にコンテンツを表示できる。
- テンプレートパーツ(
get_template_part())を使って再利用できる。
実例イメージ
- 訪問者が記事ページを要求 →
- WordPress が「これは個別投稿だ」と判断 →
- 個別投稿用テンプレート(例:
single.phpまたはsingle-post.php)を読み込む → header.php/本文/footer.phpを組み合わせて表示。
覚えておきたい注意点
- テンプレートの中身はテーマに依存します(テーマごとにファイル構成や命名が変わる)。
- 最終的なフォールバックが
index.php(どのテンプレートも当てはまらない時に使われる)であることを覚えておくと安心です。 ✅
テンプレート階層のルール(読み込み優先順位の考え方)
テンプレート階層とは、「どのテンプレートファイルを優先的に使うか」を決めるルールの集合です。
WordPress はリクエストの種類に応じて、あらかじめ定義された順序でファイルの存在をチェックし、最初に見つかったファイルを読み込みます。
基本ルール
- 特定度の高いファイル(より細かく指定されたファイル)をまず探す。
- 見つからなければ、より一般的なファイルを順に探す。
- 最後に
index.phpが使われる(フォールバック)。
具体的な優先例(代表的なケース)
| ページ種類 | 優先的に探されるテンプレート(上から順) |
|---|---|
| フロントページ(サイト先頭) | front-page.php → home.php → index.php |
| 個別投稿(Single) | single-{post_type}.php → single.php → singular.php → index.php |
| 固定ページ(Page) | page-{slug}.php → page-{ID}.php → page.php → singular.php → index.php |
| カテゴリー一覧 | category-{slug}.php → category-{ID}.php → category.php → archive.php → index.php |
| カスタム投稿アーカイブ | archive-{post_type}.php → archive.php → index.php |
| 検索結果 | search.php → index.php |
| 404(見つからない) | 404.php → index.php |
ポイント:上のテーブルは「探す順番」を示しています。上位にあるファイルを作れば、より細かい表示を実現できます。
実務での注意(初心者向け)
- 必要なテンプレートだけ最初に作る:まずは
index.phpとsingle.php、page.php、404.phpを作ってみると挫折しにくいです。🛠 - 名前の付け方が重要:
page-about.php(スラッグ)やcategory-news.php(スラッグ)など、命名で優先度を指定できます。 - 確認方法:ファイルを追加・編集したら実際に該当ページにアクセスして「期待通りのテンプレートが読み込まれているか」をチェックしましょう。👀
よくある誤解の解消
- 「ファイルを作れば必ず使われる」わけではありません。ファイル名が階層の上位条件に合致しているかが重要です。
- 同じ目的の複数ファイルがある場合、WordPress は最初に見つかったファイルだけを使うので、不要なファイルが邪魔をすることがあります(削除または整理を検討)。
まとめメモ
- テンプレート=ページ表示の設計図。
- 階層=どのファイルを優先するかのルール。
- まずは代表的なファイルを作り、必要に応じて細かいテンプレートを追加する。 🎯
主要テンプレートファイルとその役割
代表的なテンプレート(ファイル一覧と用途)
以下は よく使うテンプレートファイル と、その「何をするファイルか/どんなときに使うか」をわかりやすくまとめた表です。
まずはこの表を覚えるとテーマ編集がずっと楽になります。
| ファイル名 | 役割(何を表示するか) | 使う典型例(作るべき場面) |
|---|---|---|
index.php | どのテンプレートも当てはまらないときに使われる最終フォールバック | テーマ作成の最小限(まずはこれだけでも動く) |
single.php / single-{post_type}.php | 個別投稿ページ(投稿タイプごとの記事ページ)を出力 | 標準投稿(post)や、カスタム投稿ごとに別レイアウトが欲しいとき |
page.php / page-{slug}.php / page-{ID}.php | 固定ページ(固定コンテンツ)を出力 | 個別の固定ページで専用デザインが必要なとき(例:page-contact.php) |
archive.php / archive-{post_type}.php | 投稿一覧・カスタム投稿のアーカイブを出力 | カスタム投稿タイプの一覧を専用レイアウトにしたいとき |
category-{slug}.php / category-{ID}.php / category.php | カテゴリー別一覧を出力 | 特定カテゴリだけ見た目や構成を変えたい場合 |
tag.php | タグ別一覧を出力 | タグページの見た目をカスタマイズしたいとき |
search.php | 検索結果ページを出力 | 検索結果の見せ方を改善したいとき(例:ハイライト表示) |
404.php | 「ページが見つからない」エラー表示 | サイトで独自の404案内を出したいとき(検索ボックスやおすすめリンク) |
補足:single-{post_type}.php や page-{slug}.php のようなファイル名は より具体的(=優先度が高い) ため、存在すればそちらが使われます。存在しなければ次に一般的なファイル(例:single.php → index.php)が使われます。
汎用ファイルと特化ファイルの違い(いつファイルを作るべきか)
概念の違い
- 汎用ファイル:多数のページで共通して使うテンプレート(例:
index.php、archive.php、page.php)。保守が楽で、テーマ全体のベースを担う。 - 特化ファイル:特定のページ/条件のためだけに作るテンプレート(例:
category-news.php、page-contact.php、single-product.php)。個別要件に合わせた表示が可能。
いつ「特化」を作るべきか(実務ガイド)
- 強く作るべき場面
- そのページ群だけレイアウトや機能が大きく違う(例:商品一覧は大きいサムネ・絞り込み要素が必要)。
- SEO的に重要で、見せ方を最適化したい特定カテゴリや投稿タイプがある。
- 管理側がページごとに編集しやすいUIを用意したい(例:固定ページのテンプレートでセクションを増減できるようにする)。
- 作らなくてよい場面
- レイアウトがほぼ同じで、色や一部のテキストだけ違う程度なら汎用テンプレート+条件分岐で対応可能。
- ページ数が少なく、今後も同様の要件が生じる可能性が低い場合(メンテナンス負荷が増えるだけ)。
作る前のチェックリスト(✔︎で確認)
- [ ] 本当にそのページだけ表示が大きく変わるか?
- [ ] 条件分岐(
is_category()やis_singular())で済ませられないか? - [ ] 将来的に同じ設計を複数作る可能性があるか?(その場合は汎用化を検討)
- [ ] メンテナンス/子テーマ運用で管理しやすいか?
実務的なメリットとデメリット
- メリット(特化ファイル)
- 表示ロジックが単純になりやすい(そのページに集中できる)。
- ページごとの最適化(UI/UX・SEO)がしやすい。
- デメリット
- ファイルが増えて管理が複雑に。
- 同じロジックを複数場所にコピペしやすく、修正漏れの原因に。
実例シナリオ(判断の助け)
- ショップサイトで「商品一覧」はカードレイアウト+絞り込みが必要 →
archive-product.phpを作る。 - ブログの「ニュース」カテゴリだけ特別なヘッダー/ピックアップが必要 →
category-news.phpを作る。 - 会社サイトの「お問い合わせ」固定ページだけフォームと地図を特別表示 →
page-contact.phpを作る。 - 単に色を変えたいだけなら →
archive.phpに条件分岐(CSSクラス切替) で対応。
具体的な作り方の小技(重複を避けるための設計)
- テンプレートパーツ化:共通パーツは
get_template_part( 'parts/content', 'single' );のように分割しておき、各ファイルで再利用する。これにより同じコードを複数ファイルに書かず、修正は1箇所のみで済む。 - 条件分岐の活用:
is_category('news')やis_post_type_archive('product')を使えば、汎用テンプレート内で細かな差分だけ処理できる。 - 最小限の特化:まずは汎用テンプレートを作り、見た目や機能が不足してきた箇所だけを特化ファイルで置き換える。これが保守性と効率の両立に最も優しい方法です。
テストのための簡単なチェック(テンプレートが読み込まれているか確認)
- 該当テンプレートに簡単なコメントや識別用の HTML を入れてブラウザで確認:
<!-- loaded: single-product.php -->
- ブラウザで対象ページを表示して、開発者ツールでそのコメントを探す。
- もし想定したテンプレートが読み込まれていない場合は、ファイル名のスペル/配置(テーマ直下)/優先順位を再確認する。
まとめ
- 汎用ファイルでベースを作る → 必要な箇所だけ特化ファイルを追加するのが最も健全な設計。
- 特化は「必要な理由」が明確なときだけ作る。テンプレートパーツと条件分岐で重複を減らすのが鍵です。 ✨
ページ種類ごとの読み込み順(代表例)
ここでは「どのページを表示するときに、WordPress がどの順でテンプレートファイルを探すか」をページ種別ごとにわかりやすく解説します。
初心者向けに実務で役立つポイント(いつどのファイルを作ればよいか・確認方法など)も付けています。⚙️
サイト先頭(フロント)に用いるファイル順序
概要
フロントページは「サイトに最初に来るページ(トップページ)」のことです。WordPress の設定(設定 → 表示設定)で「最新の投稿を表示」か「固定ページを表示」かによって挙動が変わります。その上で、読み込み順は以下の通りです。
| 探される順序 | 何をするファイルか |
|---|---|
front-page.php | サイトの先頭を完全にカスタム表示したいときに最優先で使われる |
home.php | 投稿一覧(ブログ index)用。front-page.php がない場合に使われる |
index.php | 最終フォールバック。上がなければここが使われる |
実務ポイント
- 固定ページをフロントにする設定にしている場合、
front-page.phpを置くとそのファイルが優先されます。 - ブログの「投稿一覧」をトップに見せたいなら
home.phpを用意すると個別にデザイン可能です。 - 小さく始めるなら
index.phpを作り、必要に応じてfront-page.php/home.phpを追加しましょう。✨
個別投稿ページ(Single)の優先順
概要
個別投稿(ブログ記事やカスタム投稿の1件表示)を出すときに WordPress が探す順序です。カスタム投稿タイプ(CPT)を使っている場合、専用テンプレートを用意できます。
| 探される順序 | 何をするファイルか |
|---|---|
single-{post_type}.php | 指定投稿タイプ専用の個別ページ(例:single-product.php) |
single.php | 投稿一般(post)用の個別テンプレート |
singular.php | single.php 相当の汎用的な個別テンプレート |
index.php | フォールバック |
実務ポイント
- カスタム投稿ごとに異なる見せ方が必要なら
single-{post_type}.phpを作成。 - 単に記事本文を表示するだけなら
single.phpで十分。 - よく使うパターンは、個別記事のコンテンツ部分をテンプレートパーツ化して
single-*.phpとpage.php等で再利用すること。♻️
ファイル名の例
single-product.php → 商品用の詳細ページ
single-news.php → ニュース記事専用
single.php → 一般的な投稿用
固定ページ(Page)の優先順
概要
固定ページは会社概要やお問い合わせなど、個別に内容が決まっているページです。スラッグやIDで専用テンプレートを指定できます。
| 探される順序 | 何をするファイルか |
|---|---|
page-{slug}.php | スラッグ(例:page-contact.php)で指定した固定ページ専用 |
page-{ID}.php | ページIDで指定(変更されないID指定を優先する場合に有効) |
page.php | 固定ページ全般のテンプレート |
singular.php | 汎用個別テンプレート |
index.php | フォールバック |
実務ポイント
- スラッグは読みやすいが、将来変わる可能性があるので、変更されるかもしれないページは ID 指定(
page-12.phpなど)にする判断もあり。 - WordPress の「ページテンプレート機能(テンプレート名をヘッダで指定)」を使うと、管理画面からテンプレートを割り当てられます。
- 基本は
page.phpを作り、特別な固定ページだけpage-{slug}.phpを追加するのが保守にやさしい設計です。
サンプル
<?php
/* Template Name: Contact Page */
get_header();
?>
<!-- お問い合わせページのレイアウト -->
<?php get_footer(); ?>
カテゴリ/タグ/カスタム分類/カスタム投稿一覧の順序(要点)
概要
アーカイブ系(一覧ページ)は「どのテンプレート名が優先されるか」が細かく定められています。カテゴリやカスタムタクソノミーは より具体的なファイル名が優先されます。
| ページ種別 | 探される順序(代表) |
|---|---|
| カテゴリ | 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-{taxonomy}-{term}.php → taxonomy-{taxonomy}.php → taxonomy.php → archive.php → index.php |
| カスタム投稿タイプ(アーカイブ) | archive-{post_type}.php → archive.php → index.php |
実務ポイント
- 特定カテゴリだけ特別に見せたい場合は
category-news.phpのように作る。 - タグやタクソノミーも同様に、特定条件用のテンプレートで差し替え可能。
- 共通レイアウトは
archive.phpに置き、差分だけ条件分岐/テンプレートパーツで対応すると保守性が上がります。
デザインのコツ
- 一覧のレイアウト(カード・リスト・グリッド)は
archive.phpの中でget_template_part()によるパーツ化を行うと、カテゴリ専用テンプレートでも再利用できます。
著者一覧・日付アーカイブ・検索結果・404などの優先順
概要
その他の代表的な一覧や特殊ページの検索順は以下の通り。多くは「専用ファイルがあればそれを使う、なければ index.php」という形です。
| ページ種別 | 優先されるテンプレート |
|---|---|
| 作成者アーカイブ | author-{nicename}.php → author-{ID}.php → author.php → archive.php → index.php |
| 日付アーカイブ | date.php → archive.php → index.php |
| 検索結果 | search.php → index.php |
| 404(Not Found) | 404.php → index.php |
| 添付ファイル | attachment.php → single-attachment.php → index.php |
実務ポイント
- 404.php は必ず作ることを推奨(親切なナビや検索フォーム、人気記事リンクを置くと UX が良くなります)。🔍
- 検索結果は
search.phpで独自のメッセージや絞り込みUIを出すとユーザー体験が向上します。 - 日付・著者アーカイブは必要に応じてテンプレートを用意。しばしば
archive.phpで十分なことが多いです。
テンプレート読み込み順の確認とデバッグ(簡単チェックリスト)
確認手順(やること)
- 目的のページに直接アクセスして表示を確認。
- テンプレートファイルに一時的なコメントや HTML コメントを入れて、ブラウザのソースで確認する。
<!-- loaded: category-news.php -->
- 期待したテンプレートが読み込まれていなければ、ファイル名のスペル/配置(テーマ直下)/優先順位を見直す。
- キャッシュ系プラグインがある場合はクリアして再確認する。
よくあるミス
- ファイルをサブフォルダに置いてしまい、WordPress が探せない。
- スラッグとファイル名の不一致(
page-contact.phpと実際のスラッグがcontact-usの場合など)。 - 子テーマを使っているときに親テーマ側を編集してしまう(子テーマに同名ファイルがあるとそちらが使われる)。
まとめ:初めて触る人向けの順序と実践アドバイス
- まずは
index.php、single.php、page.php、404.php、archive.php、search.phpを用意して、サイト全体の基礎を作る。 - 次に「特別に見せたいページ」だけを
page-{slug}.php/single-{post_type}.php/category-{slug}.php等で差し替える。 - 共通ロジックは テンプレートパーツ化(
get_template_part())して重複を避ける。 - 変更したら必ず実際のページで読み込みファイルを確認してから本番に反映する。✅
階層を視覚化する/確認する方法
ここでは「テンプレート階層を図で把握する方法」と「実際にテンプレートファイルを作って動作を検証する手順」を、初心者にもわかりやすく丁寧に解説します。
絵や表、コード例を交えて具体的に進めます。実践しながら理解を深めてください。🧭
階層図(ツリー図)で把握するメリット(外観図の代替表現)
なぜ図にするのか?
- 視覚化すると「どのファイルが優先されるか」を直感的に理解できます。
- ページごとの分岐(どのテンプレート→どのテンプレート)を一目で追えるので、作るべきファイルや不要な重複がわかります。
- チームで作業する際の共通理解ツールになります。
手軽な視覚化の手法(3パターン)
- ASCIIツリー(手早く作る)
- テキストだけで階層を表現でき、READMEやメモに貼りやすい。
front-page.php
└─ home.php
└─ index.php
single-{post_type}.php
└─ single.php
└─ singular.php
└─ index.php
メリット:すぐ作れる/変更が簡単
注意:複雑になると見にくくなる
- 表(ファイルと優先度を一覧化)
- 各ページ種別ごとに「優先順」を表にして整理します(ドキュメント化に最適)。
| ページ種別 | 優先1 | 優先2 | フォールバック |
|---|---|---|---|
| フロント | front-page.php | home.php | index.php |
| 個別投稿 | single-{post_type}.php | single.php | index.php |
- メリット:見比べやすい/印刷対応
- 図形(フローチャート/ツリー)(推奨:視覚的に最もわかりやすい)
- 手書きでホワイトボードに描くか、図作成ツール(任意)でツリーを作る。
- メリット:大規模サイトや複雑なCPTを扱う時に強力
実務での使い方のコツ
- 最初は「代表的なページのみ(トップ/個別/固定/カテゴリ)」を図にする。徐々にカスタム投稿・タクソノミーを追加していく。
- 図の横に「作成済みファイル/未作成ファイル」をチェック欄で置くと、作業管理に便利です。✔️
実際にファイルを作って動作を確かめる手順(検証ワークフロー)
目的:どのテンプレートが読み込まれているかを確実に確認し、期待通りでなければ原因を特定する。
ステップ 0 ─ 準備
- テスト用の子テーマまたはローカル環境(例:ローカル開発環境)を用意する。
- キャッシュ系プラグインが有効なら一時的に無効にするか、キャッシュをクリアする。
ステップ 1 ─ 判別用の「印」をテンプレートに入れる(最も簡単)
対象ファイル(例:single.php、page-contact.php、category-news.php)に HTMLコメント を置きます。
ブラウザでソース表示すればどのテンプレートが読み込まれているかわかります。
<?php
/* single.php の先頭に入れる例 */
get_header();
?>
<!-- loaded-template: single.php -->
<main>
<!-- 以下、本文 -->
</main>
<?php get_footer(); ?>
確認方法:ブラウザで該当ページを表示 → 「ページのソースを表示」 → loaded-template: コメントを探す。
ステップ 2 ─ PHPで現在のテンプレートパスを出力する(応用)
テンプレート内で現在読み込まれているファイルのパスを出力する方法です。本番では外さないよう注意。
<?php
/* デバッグ用:読み込まれているテンプレート名をHTMLコメントで出力 */
global $template;
echo "n<!-- current template: " . basename( $template ) . " -->n";
?>
ポイント:global $template; は現在のテンプレートのファイルパスを返します。basenameでファイル名だけ表示。
ステップ 3 ─ 条件分岐で「期待どおりの分岐か」を確認する
汎用テンプレートの中で is_category() や is_page() などを使い、条件分岐が想定どおりに動くか確認します。
<?php
if ( is_category('news') ) {
echo "<!-- is category: news -->";
} elseif ( is_singular('product') ) {
echo "<!-- is singular: product -->";
}
?>
ステップ 4 ─ よくある不具合と対処一覧
| 症状 | チェック項目 | 対処例 |
|---|---|---|
| 想定テンプレートが読み込まれない | ファイル名のスペルミス・拡張子(.php)確認 | 正しい名前に修正 |
| テンプレートが親テーマのものを使っている | 子テーマに同名ファイルがあるか確認 | 子テーマにファイルをコピーして編集 |
| 変更が反映されない | キャッシュ(ブラウザ/プラグイン) | キャッシュ削除 |
| テンプレートの分岐が動かない | 条件関数(is_page 等)の引数が正しいか | スラッグ/IDを再確認 |
ステップ 5 ─ 実運用チェック(洗い出しフロー)
- 代表ページ(トップ・個別・固定・カテゴリ)をそれぞれ表示。
- 各ページで上記のコメントや変数出力が期待どおりか確認。
- 想定と違えば、図(ASCIIツリー/表)に戻って優先順を再確認→ ファイル名/配置を修正 → 再テスト。
- 最終的にデバッグコード(コメント・echo)は削除しておく。
補助的な検証手段(便利なツールとテクニック)
- ブラウザ開発者ツール:ソース確認やネットワーク確認に必須。
- ログ出力:
error_log( 'Loaded template: ' . basename( $template ) );を使えばサーバーログで追跡可能(本番では注意)。 - プラグイン(検証用):テンプレート判別用のプラグインやデバッグプラグインを一時的に使うと作業が速い(使用後は無効化)。
- テンプレートパーツの名称ルールを明確に:
parts/header.php、parts/content-single.phpのようにディレクトリ構成を統一しておくと追跡が楽。
最後に(実践アドバイス)
- まずは図で全体像を描き、代表ページだけ実際に作って確認する流れが学習効率を高めます。📈
- デバッグ用のコメントや
global $template;を活用して、どのテンプレートが実際に動いているかを逐一チェックしましょう。 - 図と実験(作成→確認→修正)を繰り返すことで、テンプレート階層の理解が確実に深まります。🔁
条件分岐とテンプレート再利用の技術
ここでは、テンプレートを「冗長にならず」「メンテしやすく」作るための実践テクニックを、初心者にもわかるように丁寧に説明します。
重複を避ける設計と読み込みの仕組みを押さえれば、テーマ開発がぐっと楽になります。✨
条件分岐タグ(is_home(), is_single() 等)の基本と使いどころ
概要
条件分岐タグは「今表示しているページが何か」を確認するための関数群です。テンプレート内で表示内容を切り替えたり、共通パーツで微妙に見た目を変えたいときによく使います。
よく使う関数(代表)
is_front_page()— 設定でフロントに設定した固定ページまたは投稿一覧か。is_home()— 投稿一覧ページ(ブログのインデックス)を指す(front_pageと混同しやすいので注意)。is_single()/is_singular()— 個別投稿ページ(投稿またはカスタム投稿)。is_page()— 固定ページ。is_category()/is_tag()/is_tax()— 各アーカイブ判定。is_post_type_archive()— カスタム投稿のアーカイブ。is_author()/is_date()/is_search()/is_404()/is_attachment()— その他の判定。
使いどころの例
- 同じ
archive.php内で「カテゴリー一覧ならサムネを大きく」「タグ一覧なら短い抜粋にする」など差分を入れる。 header.phpでis_front_page()のときだけ大きいヒーロー画像を表示する。single-{post_type}.phpを用意していないときに、single.php内でis_singular('product')に応じて微調整する。
注意点(重要)
is_home()とis_front_page()の違いに注意:管理画面の「表示設定」で「フロントに固定ページを指定」している場合、front_pageが true になり、homeは投稿一覧ページにだけ true になります。混同すると期待通り表示されません。- 条件タグはメインクエリがセットされた後で使う:テーマのテンプレートでは問題ないですが、プラグインや
functions.phpの初期処理で使うと未初期化で意図しない結果になることがあります。フックを使うならtemplate_redirectやwpなど、メインクエリが準備できているタイミングを選びましょう。 - 管理画面(is_admin())を忘れず:管理画面内で条件分岐を使うと誤動作する場合があるので
is_admin()チェックを活用。
簡単なコード例
<?php if ( is_front_page() ) : ?>
<!-- フロント特有の表示 -->
<?php elseif ( is_singular('product') ) : ?>
<!-- 商品ページの表示 -->
<?php elseif ( is_category('news') ) : ?>
<!-- newsカテゴリ用 -->
<?php else : ?>
<!-- その他 -->
<?php endif; ?>
テンプレートパーツの分割と get_template_part() の活用
目的:共通構造を1箇所にまとめ、複数テンプレートで再利用することで重複コードを減らす。
基本コンセプト
- 共通で使う「記事の本文ブロック」「カード表示」「パンくず」などは テンプレートパーツ として切り出す。
get_template_part( 'template-parts/content', 'single' );のように呼び出すことで、template-parts/content-single.phpを読み込めます。- 変更はパーツ側だけ直せば反映されるため保守が楽になります。✅
設計例(ディレクトリ構造)
/theme
/template-parts
content-single.php
content-archive.php
header-hero.php
single.php
archive.php
page.php
使い分けのコツ
- 表示ロジック(HTML構造)はパーツ内に、条件やデータ取得(複雑なクエリ)はテンプレートか functions.php に置く。
- 小さな差分はパラメータや条件で制御し、極端に分岐する場合のみ別パーツを作る。
実践例:条件分岐とパーツを組み合わせる
<?php
if ( is_singular('product') ) {
get_template_part( 'template-parts/content', 'product' );
} else {
get_template_part( 'template-parts/content', 'default' );
}
?>
こうすると content-product.php と content-default.php に表示を任せられます。
locate_template() や get_template_part() の違い
get_template_part()は子テーマ → 親テーマの順でテンプレートを探す(継承関係に強い)。locate_template()はファイルパスを返すので、条件によってrequireしたい場合に便利。通常はget_template_part()を優先で使えば十分です。
読み込み順とファイル参照の仕組み(どのタイミングでどのファイルが呼ばれるか)
高レベルの流れ
- ブラウザからリクエスト → WordPress が URL を解析してクエリを構築(
WP_Query)。 - メインクエリが実行され、どの種類のページかが確定(これで条件分岐タグが使える)。
- テンプレート階層ルールに従って、最も具体的なファイルを上から順に探す。
- 見つかったテンプレートが読み込まれ、テンプレート内で
get_header()、get_template_part()等で追加パーツを読み込む。 - 出力される HTML をブラウザに返す。
テンプレート呼び出しのタイミング
- 最初に呼ばれるテンプレート:例えば投稿ページなら
single-{post_type}.php(あれば)を最初に探す。見つからなければsingle.php→singular.php→index.phpと降りていきます。 - テンプレートの内部で呼ぶパーツ:
get_header()はヘッダーを、get_footer()はフッターを(通常はheader.phpとfooter.php)読み込みます。これらはテンプレートが読み込まれた後に実行されます。 - テンプレートパーツはテンプレートの実行時に評価される:
get_template_part()を呼ぶ時点でそのパーツがロードされ、中の条件分岐やループが実行されます。
注意・落とし穴
- 条件タグを早すぎるタイミングで使うと誤判定する:
initなど早いフックではメインクエリが未セットのためis_singular()等が期待通りになりません。テンプレート内やwp/template_redirectフックで使うのが安全です。 - 子テーマ/親テーマの優先:ファイル読み込みは子テーマを優先します。子テーマに同名ファイルがあるとそちらが使われる点を覚えておきましょう。
- キャッシュの影響:オブジェクトキャッシュやページキャッシュがあるとファイルを更新しても即座に見えないことがあるので、検証時はキャッシュクリアを必ず行うこと。
デバッグ用の小技
- 現在読み込まれているテンプレートを確認するにはテンプレート内で以下を一時出力:
global $template;
echo '<!-- current: ' . basename( $template ) . ' -->';
WP_DEBUGを有効にしてエラーや警告を確認することも重要。
実践アドバイス(まとめ)
- 条件分岐は「判定」に留め、出力の大部分はテンプレートパーツに任せると重複が減り可読性が上がります。🧩
- テンプレートパーツ化 + 条件分岐が、保守しやすいテーマ設計の王道パターンです。
- 条件分岐を使う際は タイミング(メインクエリの準備) と フックの選択 に注意してください。⚠️
- デバッグは
global $templateコメントや一時表示を使い、期待どおりにファイルが呼ばれているかを逐次確認しましょう。
カスタマイズ時に押さえる実務ポイント(安全対策)
テーマ編集は「見た目」を変えるだけでなく、サイトの動作や公開状態に直結します。
以下は初心者でも実務でそのまま使える、安全で再現性のある手順と注意点です。順を追って進めれば事故をかなり防げます。🛡️
子テーマを使って編集する理由と方法(直接編集を避ける)
なぜ子テーマ?
- 親テーマを直接編集すると、テーマの更新で変更が上書きされます。子テーマを使うと親テーマを残したまま上書き防止でカスタマイズできます。
- 子テーマは親テーマの機能を継承しつつ、必要なファイルだけ差し替えられるため安全で管理しやすいです。
基本手順(最小構成)
wp-content/themes/に新しいフォルダを作る(例:twentytwenty-child)。- フォルダ内に
style.cssを作る(必須ヘッダを含める)。 functions.phpを作り、親テーマのスタイルを読み込む(推奨:wp_enqueue_styleを使用)。
例:style.css
/*
Theme Name: TwentyTwenty Child
Template: twentytwenty
Description: Child theme for TwentyTwenty
Author: Your Name
Version: 1.0.0
*/
例:functions.php(親スタイルを正しく読み込む)
<?php
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );
function child_theme_enqueue_styles() {
// 親テーマのスタイルを先に読み込む
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
// 子テーマの style.css
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
}
運用のポイント
- 親テーマのテンプレートを置き換えるときは、子テーマ内に同名のファイル(例:
header.php)を置けば子が優先されます。 - functions.php は親と併用されるため、完全に上書きされるわけではありません(親のフックも動く点を理解する)。
- 子テーマ作成後は管理画面で子テーマを有効化して表示確認すること。
事前バックアップの重要性(変更前の保存)
バックアップは「失敗したときの保険」です。必ず作業前に取得しましょう。
| 方法 | 何を保存するか | 利点 | 欠点 |
|---|---|---|---|
| プラグイン(例:UpdraftPlus) | ファイル+DBのフルバックアップ | 手軽/スケジュール可能 | プラグイン依存、設定が必要 |
| ホスティングのバックアップ機能 | ファイル+DB | ワンクリック復元が多い | プラン依存(有料の場合あり) |
| 手動(FTP + phpMyAdmin / WP-CLI) | wp-content と DB ダンプ | 完全コントロール/オフライン保管可 | 手順がやや手間 |
| バージョン管理(Git) | テーマファイル等(DBは別扱い) | 差分管理が容易/履歴参照可 | DBは別で扱う必要あり |
簡単な WP-CLI コマンド(ローカルやSSHで使える)
# DB エクスポート
wp db export backup.sql
# ファイルを tar で保存(wp-content を例)
tar czf wp-content-backup-$(date +%F).tar.gz wp-content/
保存場所の注意
- バックアップはサーバー外(ローカルPC・クラウドストレージ)に複数世代残すこと。
- 本番作業時は直前のフルバックアップを1本必ず取り、リストア手順を事前に確認しておく。
テスト環境での動作確認(ローカル or ステージングで検証)
なぜテスト環境?
- 本番で直接試すとユーザーに影響が出るため、必ずローカルまたはステージングで検証します。
テスト環境の種類と特徴
- ローカル(Local / MAMP / XAMPP / Docker)
- オフラインで高速に開発。SSLやメール等は別設定が必要。
- ステージング(ホスティング側のステージング機能 / 専用サーバ)
- 本番環境に近く、環境差による不具合を検出しやすい。公開前の最終チェックに最適。
テストでやるべきチェックリスト
- [ ] テーマの見た目(各画面・レスポンシブ)を確認
- [ ] 主要機能(投稿表示・検索・フォーム・ログイン)を実行して確認
- [ ] プラグインとの互換性チェック(キャッシュ・セキュリティ系など)
- [ ] ログ(PHPエラー / ブラウザコンソール)を確認
- [ ] パフォーマンス確認(ページ読み込み、画像サイズ)
ステージング運用の注意
- ステージングを公開する場合は検索エンジンにインデックスされない設定(robots.txtやnoindex)を必ず入れる。🔒
- 認証(Basic Auth)やIP制限で一般公開を避けるのが安全。
実装例と注意点(よくある落とし穴)
よくある落とし穴と具体的対策
- 親スタイルを読み込まない(見た目が崩れる)
- 対策:子テーマの
functions.phpでwp_enqueue_styleを正しく使う(上の例参照)。
- 対策:子テーマの
- PHPエラーで白画面(WSOD)になる
- 対策:
WP_DEBUGをtrueにしてエラーを確認。エラー発生時はバックアップから復元して即時復旧。
- 対策:
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false ); // 本番では表示しないがログに残す
- 子テーマに置いたテンプレートが読み込まれない
- 対策:ファイル名・パスのスペル/階層が正しいか、子テーマが有効かを確認。子テーマの
style.cssヘッダ内のTemplate:が親テーマのディレクトリ名と一致しているか確認。
- 対策:ファイル名・パスのスペル/階層が正しいか、子テーマが有効かを確認。子テーマの
- プラグインと競合してレイアウト崩れ
- 対策:プラグインを一つずつ無効にして特定する。ステージングで検証してから本番反映。
- 本番環境と開発環境で動作が違う
- 対策:PHPバージョン、MySQLバージョン、PHP拡張、設定(
memory_limitなど)を確認。可能ならステージングは本番に極力近づける。
- 対策:PHPバージョン、MySQLバージョン、PHP拡張、設定(
実装例:ヘッダーにカスタムクラスを追加する安全な方法
- やってはいけない:親の
header.phpを直接編集。 - 推奨:子テーマに
header.phpをコピーして必要最小限を変更、もしくはwp_body_openなどフックで追加。
// functions.php にフックを追加する例(header.php を編集しなくて済む場合)
add_action( 'wp_body_open', function() {
echo '<div class="my-custom-banner">Welcome!</div>';
} );
デプロイ時のワンポイント
- 変更を本番へ反映する前に 差分を確認する(Gitなど)。大きな変更は段階的に反映(feature branch → staging → main)するのが安全。
- 本番へ反映するタイミングはトラフィックが少ない時間帯を選ぶ。
最終チェックリスト(作業前に必ず確認)
| 項目 | アクション |
|---|---|
| バックアップ | DB と wp-content を取得済みか |
| 子テーマ | 子テーマが作られ、有効化済みか |
| テスト環境 | ローカルまたはステージングで動作検証済みか |
| エラーログ | WP_DEBUG_LOG にエラーが出ていないか |
| キャッシュ | キャッシュをクリアして挙動を確認したか |
| ロールバック手順 | 万が一の復元手順を確認済みか |
まとめ
- 子テーマ+テスト環境+バックアップが安全なカスタマイズの3本柱です。
- 小さな変更でも必ずバックアップを取り、ステージングで確認してから本番へ。
- エラーや差し替えは冷静にログとバックアップで対処。Gitなどの履歴管理を併用すると更に安心です。✅
実務で使えるチェックリストと便利ツール
この節では、実運用でテンプレートの読み込みを確実に把握・検証するための「便利ツール」と「現場で使えるチェックリスト」をまとめます。
プラグインやデバッグ手順を組み合わせれば、原因特定が速くなり、安全に修正できます。🔧
テンプレートが何を読み込んでいるかを確認する方法(プラグイン等の補助)
使いやすいプラグイン(導入のメリット)
- Show Current Template / What The File
- 管理バーや画面上に「今読み込まれているテンプレート名」を表示します。ファイルがどれかを即座に把握できるため、テンプレート名ミスや子テーマ優先の確認が楽になります。
- Query Monitor
- 読み込まれたテンプレートだけでなく、実行された SQL クエリ、HTTP リクエスト、フックやエラー情報を網羅して表示します。テンプレートに紐づくクエリの性能や副作用も一目でわかるのが強みです。
- Theme Check
- テーマのファイル構造やコーディング規約を自動チェックします。テーマ配布や公開前の品質管理に有用です。
- Debug Bar / Debug Toolkit
- 管理バーからデバッグ情報へアクセス。テンプレート名だけでなく、メモリ使用量・ロード時間等も確認できます。
導入〜利用の簡単な流れ(一般的)
- 管理画面 → プラグイン → 新規追加で目的のプラグインを検索しインストール・有効化。
- 有効化後、サイトを普通に表示すると管理バーや表示パネルに「現在のテンプレート名」が出る(プラグインにより表示位置は異なる)。
- 期待しているテンプレート名と表示される名前を比較し、差があればファイル名や子テーマの干渉を疑う。
- Query Monitor 等で該当ページのメインクエリ・テンプレート読み込み履歴・エラーを確認する。
注意点(安全運用)
- 本番サイトで常時プラグインをONにすると情報漏洩や表示負荷のリスクがあるため、検証時のみ有効化するかアクセス制限を入れて使うのがおすすめです。🔒
- キャッシュ系プラグインが有効だと「古い出力」を見てしまうことがあるので、検証時はキャッシュをクリアしてください。
デバッグ・検証時の手順チェックリスト(ファイル配置・命名・優先度確認)
短縮版:最初にやること
- 検証用プラグインで読み込まれているテンプレート名を確認。
- 子テーマ/親テーマのどちらが読み込まれているかをチェック。
- キャッシュをすべてクリアして再確認。
- 期待と違うならファイル名・配置・優先順位(階層)を順に確認。
詳細チェックリスト
| ステップ | チェック項目 | なぜ確認するか / 対処法 |
|---|---|---|
| 1 | プラグインで「現在のテンプレート名」を確認 | まずどのファイルが呼ばれているか特定するため |
| 2 | 子テーマが有効か確認(子テーマに同名ファイルがあるか) | 子テーマの同名ファイルが優先されるため、子→親の優先関係を理解する |
| 3 | ファイル名のスペル・拡張子(.php)を確認 | 小さなタイプミスで読み込まれないことが多い |
| 4 | テーマ直下にファイルがあるか確認(サブフォルダ不可) | WordPress はテーマ直下でテンプレートを検索する |
| 5 | スラッグ/ID の一致を確認(page-{slug}.php vs 実際のスラッグ) | スラッグ変更でテンプレートが無効になる場合がある |
| 6 | 条件分岐(is_*)で想定通り true/false かを確認 | 決定ロジックが意図通り動いているかチェック |
| 7 | キャッシュ(ブラウザ・プラグイン・CDN)を全削除 | 古い出力による誤認を排除 |
| 8 | PHP エラーや警告が出ていないか(WP_DEBUG_LOG) | エラーでテンプレート処理が途中で止まることがある |
| 9 | パーミッション(ファイル読み込み権限)を確認 | サーバ権限で読み込めないケースを除外 |
| 10 | プラグイン競合チェック(プラグインを一つずつ無効化) | プラグインがテンプレート挙動を変える場合あり |
| 11 | パーマリンク再保存(設定 → パーマリンク → 保存) | リライトルールの問題を解決することがある |
| 12 | 最終的に差分確認(Git等)して本番反映 | どこを変えたか履歴で追えるようにする |
検証メモの付け方(推奨)
- 各ページで確認したテンプレート名と「期待するテンプレート名」を CSV やスプレッドシート に記録すると、大規模サイトでの把握が楽になります。
- 「何を変更したか」「いつ戻せるか(バックアップ)」を併せて記載しておくとトラブル時に速やかにロールバックできます。🗂
短いトラブルシューティング例
- 表示が崩れた →
WP_DEBUG_LOGを確認 → エラーログにファイル名と行番号が出る → 対象ファイルを修正 or バックアップから復元。 - 期待するテンプレートが読み込まれない → 子テーマの有無を確認 → 子テーマに同名ファイルがなければ親テーマを確認 → ファイル名/スラッグを照合。
すぐ使える「一枚もの」チェック表(印刷・共有用)
| 確認項目 | OK / NG | 備考 |
|---|---|---|
| 現在読み込まれているテンプレートをプラグインで確認 | ||
| 子テーマが有効で同名ファイルが存在しないか | ||
| ファイル名(スラッグ/ID)に誤りがないか | ||
| キャッシュをクリア済みか | ||
| エラーログ(WP_DEBUG_LOG)で致命的エラーなし | ||
| パーミッション(644, 755 等)問題なし | ||
| プラグイン競合テスト済み | ||
| パーマリンクを再保存して確認済み | ||
| 変更のバックアップがある |
最後に(ワンポイント)
- プラグインで素早く確認 → チェックリストで深掘りの流れが最も効率的です。
- 本番でのプラグイン常時有効化は避け、検証後は無効化するかアクセス制限を行ってください。🔐
まとめ:学ぶ順番と実践ロードマップ
以下は 初心者が迷わず学べる順序 と、各段階で「やること」がすぐにわかる実務的ロードマップです。
実際に手を動かしながら進めるのが最短の上達法です。
| 段階 | 目的 | 具体的な作業(すぐできること) |
|---|---|---|
| 1. 概念を理解する | テンプレート階層の全体像をつかむ | テンプレートとは何か/階層の優先順(index.phpがフォールバック)を図で確認。簡単なASCIIツリーを作る。🧭 |
| 2. 代表ファイルを作る | サイトが最低限動く状態を作る | index.php、single.php、page.php、archive.php、404.php、search.php をテーマに置いて動作確認。テンプレート内に識別コメントを入れて読み込みをチェック。✔️ |
| 3. ページ別で試す | 各ページの優先順を体験する | page-{slug}.php、single-{post_type}.php、category-{slug}.php を順に作り、どれが優先されるか実験する(前段のファイルと比較)。 |
| 4. 条件分岐と再利用 | 重複を減らし保守性を上げる | is_*() 系で条件分岐、get_template_part() でテンプレートパーツ化。共通部分はパーツ化して一箇所で管理。♻️ |
| 5. 安全運用と検証 | 本番事故を防ぐ運用を整える | 子テーマ作成、ローカル/ステージング検証、バックアップ取得、差分(Git)で管理。デバッグは global $template や Query Monitor 等で確認。🔒 |
| 6. 応用/最適化 | 実務レベルの最適化 | パフォーマンス改善(画像/キャッシュ)、アクセシビリティ対応、SEO用のテンプレート調整、カスタム投稿/タクソノミー対応。🚀 |
各ステップの簡易チェックリスト
ステップ1(概念)
- [ ] テンプレート階層の図を1枚作った(ASCIIや表で可)
- [ ]
index.phpの意味(最終フォールバック)を説明できる
ステップ2(代表ファイル)
- [ ]
index.phpが表示されることを確認 - [ ]
single.php/page.php/404.phpを置いて動作確認(ソースに<!-- loaded: ... -->を入れる)
ステップ3(ページ別)
- [ ]
page-{slug}.phpを作って、該当ページで優先されるか確認 - [ ]
single-{post_type}.phpを作り、CPTで確認
ステップ4(再利用)
- [ ]
template-parts/を作り、記事カードやヘッダーを分割 - [ ]
get_template_part()で読み込んで表示を確認
ステップ5(安全運用)
- [ ] 子テーマで動作確認済み
- [ ] 本番前にバックアップ(DB+wp-content)取得
- [ ] ステージングで最終確認
よくある質問と短い解決フロー
Q1 ─ 「期待するテンプレートが読み込まれない」
- 原因候補:ファイル名ミス/子テーマ優先/キャッシュ/スラッグ不一致
- 対処フロー:
- プラグインで現在読み込まれているテンプレート名を確認。
- 子テーマが有効なら子テーマ内に同名ファイルがないか確認。
- ファイル名・拡張子(.php)・テーマ直下配置を再確認。
- キャッシュをクリアして再確認。
Q2 ─ 「子テーマを作ったけど反映されない」
- 原因候補:
style.cssのヘッダTemplate:が親テーマ名と一致していない/子テーマが有効化されていない - 対処:
style.cssのTemplate:を親テーマディレクトリ名に合わせ、子テーマを有効化して再確認。
Q3 ─ 「変更しても見た目が変わらない(本番)」
- 原因候補:ページキャッシュ/CDNキャッシュ/ブラウザキャッシュ
- 対処:キャッシュ系を順にクリア(ブラウザ → プラグイン → CDN)。ステージングで再現するか確認。
Q4 ─ 「404 が表示されるべきでないページで 404」
- 原因候補:パーマリンク設定問題/ファイル欠落/リライトルールの不整合
- 対処:管理画面でパーマリンク設定を「保存」してリライトルールを再生成。必要なら
.htaccessを確認。
Q5 ─ 「特化テンプレート作りすぎて管理が大変」
- 対処方針:まずは 汎用テンプレート + 条件分岐 で対応し、表示が大幅に違う部分だけ特化テンプレートにする。テンプレートパーツで共通ロジックは必ず切り出す。
最後に:実務的なワンポイント
- まずは作って、壊して、直す を何度も繰り返すことが理解の最短ルートです。失敗を恐れずローカルやステージングで試してください。🔁
- テンプレートの分割(パーツ化)と子テーマ運用 を早めに習慣化すると、後の保守が劇的に楽になります。
まとめ
この記事のポイントを短くまとめます。
要点
- テンプレート階層は「より具体的なファイル」→「より汎用的なファイル」→ 最終的に
index.phpの順で選ばれます。仕組みを理解すれば、どのファイルを作るべきかが明確になります。 - まずは基礎ファイルを用意する(
index.php、single.php、page.php、archive.php、404.php、search.php)。必要なときだけ特化ファイルを追加しましょう。♻️ - 子テーマ+バックアップ+ステージング がカスタマイズ時の三種の神器です。本番で直編集は避けること。🔐
- テンプレートパーツ化(get_template_part)と条件分岐(is_*) を組み合わせると、重複を避けてメンテしやすいテーマが作れます。🧩
- 検証は必ず行う:テンプレート名確認プラグインや
global $template出力、Query Monitor などを使って実際にどれが読み込まれているかを確認してください。🔍
今すぐできる短期アクション(3分でできること)
- テーマに
index.phpとsingle.phpを置いて、該当ページに<!-- loaded: single.php -->のコメントを入れて確認する。 - 子テーマがなければ作る(
style.cssとfunctions.phpの雛形でOK)。 - 検証用プラグイン(例:テンプレート表示系)を検証環境で有効化して、優先ファイルをチェックする。
