WordPressのトップページを固定ページに設定する方法

はじめに

WordPressのトップページを「最新の投稿一覧」から「固定ページ」に変更するには、管理画面の「設定 → 表示設定」から簡単に切り替えられます。WP-CLIでも設定可能で、front-page.php テンプレートを使えばトップページ専用レイアウトが作れます。

症状・原因

• トップページに最新の投稿一覧ではなく特定のページを表示したい
• トップページ専用のデザインを作りたい
• 投稿一覧を別のURLに移したい
• WP-CLIでトップページを変更したい

解決手順

ステップ1：管理画面で固定ページをトップページに設定する

管理画面での設定手順:

1. 固定ページを2つ作成:
   → 「トップページ」（コンテンツは後で設定）
   → 「お知らせ」（ブログ投稿一覧用）

2. 設定 → 表示設定 → ホームページの表示:
   → 「固定ページ」を選択
   → ホームページ: 「トップページ」を選択
   → 投稿ページ: 「お知らせ」を選択

3. 「変更を保存」をクリック

4. パーマリンクを更新:
   設定 → パーマリンク設定 → 変更を保存

ステップ2：WP-CLIでトップページを設定する

# 現在のフロントページ設定を確認
wp option get show_on_front      # 'posts'(投稿一覧) or 'page'(固定ページ)
wp option get page_on_front      # フロントページのID
wp option get page_for_posts     # 投稿一覧ページのID

# 固定ページの一覧を確認
wp post list --post_type=page --format=table

# フロントページ用の固定ページを作成
wp post create \
    --post_type=page \
    --post_title="トップページ" \
    --post_status=publish \
    --porcelain  # IDのみ出力

# 作成したページIDを使ってフロントページを設定（例: ID=5）
wp option update show_on_front page
wp option update page_on_front 5

# 投稿一覧ページを作成して設定
wp post create \
    --post_type=page \
    --post_title="お知らせ" \
    --post_status=publish \
    --porcelain

# 投稿一覧ページを設定（例: ID=6）
wp option update page_for_posts 6

# パーマリンクをフラッシュ
wp rewrite flush --hard

# 設定を確認
wp eval "
echo 'show_on_front: ' . get_option('show_on_front') . PHP_EOL;
echo 'page_on_front: ' . get_the_title(get_option('page_on_front')) . PHP_EOL;
echo 'page_for_posts: ' . get_the_title(get_option('page_for_posts')) . PHP_EOL;
echo 'home_url: ' . home_url('/') . PHP_EOL;
"

ステップ3：front-page.phpテンプレートを作成する

<?php
// wp-content/themes/my-child-theme/front-page.php
// トップページ専用テンプレート（page_on_frontが設定されているときのみ使用）
get_header();
?>
<main class="front-page">

    <!-- ヒーローセクション -->
    <section class="hero">
        <div class="hero-inner">
            <?php if (have_posts()): the_post(); ?>
                <h1><?php the_title(); ?></h1>
                <div class="hero-content">
                    <?php the_content(); ?>
                </div>
            <?php endif; ?>
            <a href="#contact" class="btn-primary">お問い合わせ</a>
        </div>
    </section>

    <!-- 最新記事（投稿一覧から取得） -->
    <section class="recent-posts">
        <h2>最新のお知らせ</h2>
        <?php
        $posts = new WP_Query([
            'posts_per_page' => 3,
            'post_status'    => 'publish',
        ]);
        ?>
        <div class="posts-grid">
            <?php while ($posts->have_posts()): $posts->the_post(); ?>
                <article>
                    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                    <time><?php echo get_the_date(); ?></time>
                </article>
            <?php endwhile; wp_reset_postdata(); ?>
        </div>
        <a href="<?php echo esc_url(get_permalink(get_option('page_for_posts'))); ?>">
            お知らせ一覧
        </a>
    </section>

</main>
<?php get_footer(); ?>

ステップ4：条件分岐タグでトップページを判定する

// テーマ各所でのフロントページ判定
is_front_page()  // トップページ（固定ページ設定時も投稿一覧設定時も真）
is_home()        // 投稿一覧ページ（トップ or page_for_postsのページ）

// 使い分けの例:
if (is_front_page() && !is_home()) {
    // 固定ページがトップページに設定されている場合のみ
    echo 'フロントページ（固定ページ）';
} elseif (is_home() && is_front_page()) {
    // 最新の投稿がトップページに設定されている場合
    echo 'フロントページ（投稿一覧）';
}

ステップ5：ナビゲーションのアクティブクラスを修正する

// トップページのナビゲーションリンクが正しくアクティブになるよう修正
add_filter('nav_menu_css_class', function(array $classes, WP_Post $item): array {
    if ($item->object_id == get_option('page_on_front') && is_front_page()) {
        $classes[] = 'current-menu-item';
    }
    return $classes;
}, 10, 2);

ステップ6：OGP・SEOのフロントページ設定

# Yoast SEO のフロントページタイトルを設定
wp option get wpseo_titles | python3 -m json.tool 2>/dev/null | grep -i home

# フロントページのメタタイトルを直接確認
wp eval "echo get_post_meta(get_option('page_on_front'), '_yoast_wpseo_title', true) . PHP_EOL;"

# サイトマップのフロントページ確認
wp eval "echo home_url('/sitemap_index.xml') . PHP_EOL;"

注意事項

• front-page.php はWordPressのテンプレート階層で最も優先度が高く、page_on_front が設定されていなくても使用されます
• page_for_posts に設定したページのURLがブログ一覧ページになります。このページのコンテンツは表示されません
• パーマリンク設定を変更した後は wp rewrite flush --hard を実行してください

まとめ

トップページの固定ページ化は wp option update show_on_front page と wp option update page_on_front {ID} で完了します。front-page.php テンプレートを作成することでトップページ専用のデザインが実現できます。