2026年5月20日

WordPressのテンプレート階層を理解して正しいテンプレートを使う方法

テーマ・デザイン

はじめに

WordPressは表示するページの種類に応じて、自動的に適切なテンプレートファイルを選択します。この仕組みを「テンプレート階層」といい、理解することでカスタマイズの精度が大幅に向上します。

症状・原因

特定のカテゴリーページだけデザインを変えたい
カスタム投稿タイプに専用テンプレートを使いたい
どのファイルが実際に使われているか分からない
single.phpを編集しても一部のページに反映されない

解決手順

ステップ1：テンプレート階層の基本を理解する

WordPressテンプレート階層（優先度：高→低）

【投稿ページ（single）】
single-{post_type}-{slug}.php
  → single-{post_type}.php
    → single.php
      → singular.php
        → index.php

【固定ページ（page）】
{page-slug}.php          例: about.php
  → page-{ID}.php        例: page-12.php
    → page.php
      → singular.php
        → index.php

【アーカイブページ】
category-{slug}.php      例: category-news.php
  → category-{ID}.php    例: category-5.php
    → category.php
      → archive.php
        → index.php

tag-{slug}.php → tag-{ID}.php → tag.php → archive.php → index.php
taxonomy-{tax}-{term}.php → taxonomy-{tax}.php → taxonomy.php → archive.php

【フロントページ】
front-page.php → home.php → index.php

【検索結果】
search.php → index.php

【404ページ】
404.php → index.php

ステップ2：現在使用中のテンプレートを確認する

// functions.php に追加（開発時のみ）
add_action('wp_head', function(): void {
    if (!current_user_can('administrator')) return;

    global $template;
    $relative = str_replace(get_theme_root() . '/', '', $template);
    echo '<!-- Template: ' . esc_html($relative) . ' -->';
});

# Query Monitor プラグインで確認（推奨）
wp plugin install query-monitor --activate

# 管理画面のツールバーに「テンプレート」が表示される

ステップ3：カスタム投稿タイプ専用テンプレートを作成する

// functions.php — カスタム投稿タイプ「news」を登録
add_action('init', function(): void {
    register_post_type('news', [
        'label'         => 'ニュース',
        'public'        => true,
        'has_archive'   => true,
        'rewrite'       => ['slug' => 'news'],
        'supports'      => ['title', 'editor', 'thumbnail'],
    ]);
});

# パーマリンクを更新
wp rewrite flush --hard

テンプレートファイルを子テーマに作成:

wp-content/themes/my-child-theme/
├── single-news.php      ← ニュース投稿詳細
├── archive-news.php     ← ニュース一覧
└── taxonomy-news_cat.php ← ニュースカテゴリーアーカイブ

<?php
// single-news.php — ニュース専用詳細テンプレート
get_header();
?>
<main class="news-single">
    <?php while (have_posts()): the_post(); ?>
        <article>
            <header>
                <span class="news-label">NEWS</span>
                <time><?php echo get_the_date(); ?></time>
                <h1><?php the_title(); ?></h1>
            </header>
            <div class="news-body">
                <?php the_content(); ?>
            </div>
        </article>
    <?php endwhile; ?>
</main>
<?php get_footer(); ?>

ステップ4：カテゴリーごとにテンプレートを変える

<?php
// category-sale.php —「sale」カテゴリー専用テンプレート
// （通常のカテゴリーは category.php が使われる）
get_header();
?>
<div class="sale-archive">
    <div class="sale-banner">
        <h1>セール情報</h1>
    </div>
    <?php if (have_posts()): ?>
        <div class="sale-grid">
            <?php while (have_posts()): the_post(); ?>
                <div class="sale-card">
                    <?php if (has_post_thumbnail()): ?>
                        <?php the_post_thumbnail('medium'); ?>
                    <?php endif; ?>
                    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                </div>
            <?php endwhile; ?>
        </div>
        <?php the_posts_pagination(); ?>
    <?php endif; ?>
</div>
<?php get_footer(); ?>

ステップ5：`get_template_part()` でテンプレートパーツを再利用する

// template-parts/content-news.php を作成
// 投稿タイプに応じたパーツを自動選択

// single.php や archive.php から呼び出す
get_template_part('template-parts/content', get_post_type());
// → template-parts/content-news.php を読み込む（なければ content.php）

ディレクトリ構成例:
themes/my-child-theme/
├── template-parts/
│   ├── content.php          ← 汎用
│   ├── content-post.php     ← 通常投稿
│   ├── content-news.php     ← ニュース
│   └── content-none.php     ← 投稿なし時

注意事項

テンプレートファイルは必ず子テーマに作成してください。親テーマの更新で上書きされます
ファイル名のスラッグは英小文字・ハイフン区切りで、WordPressのスラッグ設定と一致させてください
カスタム投稿タイプのアーカイブを有効にするには has_archive => true と wp rewrite flush が必要です

まとめ

テンプレート階層は「より具体的なファイルが優先」という原則で動作します。single-{post_type}.php や category-{slug}.php など具体的なファイルを子テーマに追加するだけで、特定ページのデザインを個別にカスタマイズできます。

Post Views: 16