閉じる

WordPress front-page.phpの作り方：テンプレート優先順位の理解とカスタムサイト制作の手順

広告

WordPressでWebサイトを制作する際、サイトの「顔」となるトップページのデザインや機能をカスタマイズすることは非常に重要です。

その中心的な役割を果たすのがfront-page.phpというテンプレートファイルです。

デフォルトの状態では投稿一覧が表示されることが多いWordPressですが、企業サイトやポートフォリオサイトを作成する場合、固定ページのように独自のレイアウトを持たせたいケースが多々あります。

本記事では、WordPressのテンプレート階層における優先順位を整理し、実戦で使えるfront-page.phpの具体的な作り方を詳しく解説します。

目次 [ close ]
  1. WordPressのトップページ制御とテンプレート階層の仕組み
    1. トップページにおけるテンプレートの優先順位
    2. front-page.phpとhome.phpの違い
  2. front-page.phpを作成する前の準備
    1. 表示設定の確認
    2. テーマディレクトリへのファイル作成
  3. front-page.phpの基本的なコード構成
    1. 基本的なテンプレート構造
  4. 投稿一覧をトップページに表示する（カスタムクエリ）
    1. WP_Queryを使った新着記事の取得
  5. カスタム投稿タイプをトップページに活用する
    1. カスタム投稿「works」を5件表示する例
  6. アドバンスドカスタムフィールド（ACF）との連携
    1. フィールド値の出力例
  7. 2026年におけるフロントページ制作の注意点：ブロックテーマとクラシックテーマ
    1. ブロックテーマの場合
    2. パフォーマンスとCore Web Vitals
  8. よくあるトラブルと解決策
    1. 1. テンプレートが反映されない
    2. 2. ページ分割（ページネーション）が動かない
    3. 3. 表示設定で「ホームページ」が選択できない
  9. 実践的なレイアウトの組み立て方
    1. template-partsの活用
  10. まとめ

WordPressのトップページ制御とテンプレート階層の仕組み

WordPressには、表示するページの種類に応じてどのテンプレートファイルを使用するかを自動的に判別する「テンプレート階層」という仕組みがあります。

トップページを表示する際、WordPressは特定の優先順位に従ってファイルを探します。

トップページにおけるテンプレートの優先順位

WordPressがトップページをレンダリングしようとする際、サーバー内のテーマディレクトリから以下の順番でファイルを探し、最初に見つかったものを採用します。

  1. front-page.php
  2. home.php
  3. index.php

ここで最も重要な点は、管理画面の「設定 ＞ 表示設定」で「ホームページの表示」を「最新の投稿」にしていようと「固定ページ」にしていようと、front-page.phpが存在すればそれが最優先で適用されるという事実です。

front-page.phpとhome.phpの違い

混同されやすいのがfront-page.phpとhome.phpの役割の違いです。

ファイル名主な役割
front-page.php設定に関わらず、サイトのトップページ（ルートURL）に常に適用される。
home.php「最新の投稿」を表示するページ、または「投稿ページ」に指定された固定ページに適用される。

例えば、サイトのトップにはデザイン済みのランディングページを表示し、別の「/blog」というURLで記事一覧を表示したい場合、トップページにはfront-page.phpが使われ、ブログ一覧ページにはhome.php（あるいはarchive.php）が適用されることになります。

カスタムサイト制作において、トップページを完全に自由なレイアウトにしたい場合は、front-page.phpを作成するのが最も確実な手法です。

front-page.phpを作成する前の準備

実際にコードを書き始める前に、WordPressの管理画面側で必要な設定を確認しておく必要があります。

これを怠ると、意図したテンプレートが反映されない原因になります。

表示設定の確認

まず、WordPress管理画面の「設定」メニューから「表示設定」を開きます。

ここで「ホームページの表示」を確認してください。

  • 最新の投稿：通常、ブログ形式のサイトで使用します。
  • 固定ページ：特定のページをトップにしたい場合に使用します。

front-page.phpを作成する場合、どちらの設定になっていても動作しますが、一般的には「固定ページ」を選択し、空の固定ページ（例：タイトルが「ホーム」など）をホームページに割り当てることが多いです。

これにより、SEOプラグインの設定などがその固定ページに紐付くため、管理が容易になります。

テーマディレクトリへのファイル作成

FTPソフトやコードエディタを使用し、現在有効化しているテーマのフォルダ（wp-content/themes/your-theme/）の中に、新しくfront-page.phpという名前のファイルを作成してください。

この時点では中身は空で構いません。

front-page.phpの基本的なコード構成

それでは、実際にfront-page.phpの中身を記述していきましょう。

トップページは他のページとレイアウトが異なることが多いですが、WordPressの基本的な関数を呼び出すルールは共通です。

基本的なテンプレート構造

まずは、ヘッダーとフッターを読み込み、メインのコンテンツエリアを確保する最小限の構成を作成します。

PHP
<?php
/**
 * Template Name: Front Page
 * The template for displaying the front page.
 */

// ヘッダー（header.php）を読み込む
get_header(); ?>

<main id="primary" class="site-main">

    <?php
    // メインビジュアルや独自のセクションをここに記述
    ?>
    <section class="hero-section">
        <h1><?php bloginfo('name'); ?>へようこそ</h1>
        <p><?php bloginfo('description'); ?></p>
    </section>

    <section class="content-section">
        <?php
        // 固定ページの内容を表示したい場合のメインループ
        if (have_posts()) :
            while (have_posts()) : the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </section>

</main><!-- #main -->

<?php
// サイドバーが必要な場合は読み込む
// get_sidebar();

// フッター（footer.php）を読み込む
get_footer();

このコードでは、get_header()とget_footer()を呼び出すことで、サイト共通のナビゲーションやフッター情報を維持しつつ、中央のメインエリアを自由にマークアップできる状態にしています。

投稿一覧をトップページに表示する（カスタムクエリ）

front-page.phpを使用する最大のメリットは、固定ページの内容を表示しながら、同時に「最新のお知らせ3件」や「特定カテゴリーの記事一覧」を組み込める点にあります。

これにはWP_Queryクラスを使用します。

WP_Queryを使った新着記事の取得

以下のコード例は、トップページの中段に最新の投稿を3件だけ表示する実装例です。

PHP
<section class="latest-news">
    <h2>最新のお知らせ</h2>
    <ul class="news-list">
        <?php
        // 取得条件の指定
        $args = array(
            'post_type'      => 'post',      // 投稿タイプ：投稿
            'posts_per_page' => 3,           // 表示件数：3件
            'orderby'        => 'date',      // 並び替え：日付
            'order'          => 'DESC',      // 降順（新しい順）
        );

        // クエリの実行
        $news_query = new WP_Query($args);

        // ループ開始
        if ($news_query->have_posts()) :
            while ($news_query->have_posts()) : $news_query->the_post(); ?>
                <li class="news-item">
                    <span class="date"><?php echo get_the_date(); ?></span>
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </li>
            <?php endwhile;
            // 投稿データのリセット（重要）
            wp_reset_postdata();
        else : ?>
            <p>現在、お知らせはありません。</p>
        <?php endif; ?>
    </ul>
</section>

ここでwp_reset_postdata()を忘れないようにしてください。

これはカスタムクエリによって書き換えられたグローバルな$post変数を元に戻すための関数で、これがないと後のメインループやフッターの動作に悪影響を及ぼす可能性があります。

カスタム投稿タイプをトップページに活用する

企業サイトなどでは、通常の「投稿」とは別に「施工事例」や「製品情報」といったカスタム投稿タイプをトップページに並べたい場合があります。

その場合も、前述のクエリ条件を少し変更するだけで対応可能です。

カスタム投稿「works」を5件表示する例

PHP
<section class="works-section">
    <h2>制作実績</h2>
    <div class="works-grid">
        <?php
        $args = array(
            'post_type'      => 'works', // カスタム投稿タイプのスラッグ
            'posts_per_page' => 6,
        );
        $works_query = new WP_Query($args);

        if ($works_query->have_posts()) :
            while ($works_query->have_posts()) : $works_query->the_post(); ?>
                <article class="work-card">
                    <?php if (has_post_thumbnail()) : ?>
                        <div class="thumbnail">
                            <?php the_post_thumbnail('medium'); ?>
                        </div>
                    <?php endif; ?>
                    <h3><?php the_title(); ?></h3>
                    <a href="<?php the_permalink(); ?>">詳細を見る</a>
                </article>
            <?php endwhile;
            wp_reset_postdata();
        endif;
        ?>
    </div>
</section>

このように、front-page.phpはサイト内の様々な情報を集約して見せるための「ハブ」として機能させることができます。

アドバンスドカスタムフィールド（ACF）との連携

トップページの文言や画像をクライアント側で簡単に編集できるようにしたい場合、Advanced Custom Fields (ACF)プラグインとの併用が推奨されます。

front-page.phpの中に直接テキストを書き込む（ハードコーディング）のではなく、カスタムフィールドから値を呼び出すように設計します。

フィールド値の出力例

例えば、トップページのメインコピーをフィールド名 main_copy で作成した場合、テンプレート内では以下のように記述します。

PHP
<section class="custom-hero">
    <?php 
    $main_copy = get_field('main_copy');
    if ($main_copy) : 
    ?>
        <h1 class="hero-title"><?php echo esc_html($main_copy); ?></h1>
    <?php endif; ?>
</section>

esc_html()などのエスケープ処理を適切に行うことで、セキュリティを確保しつつ柔軟な更新が可能なトップページを実現できます。

2026年におけるフロントページ制作の注意点：ブロックテーマとクラシックテーマ

2026年現在、WordPressのテーマ制作には大きく分けて「クラシックテーマ」と「ブロックテーマ（FSE: Full Site Editing）」の2つのアプローチがあります。

本記事で解説しているfront-page.phpは、主にクラシックテーマまたはハイブリッドテーマ向けの手法です。

ブロックテーマの場合

ブロックテーマでは、PHPファイルではなくtemplates/front-page.htmlというHTMLベースのファイルでトップページを管理します。

しかし、現在でも高度なロジックを必要とする案件や、従来の開発手法を好む現場ではPHPベースのテンプレート制作が根強く支持されています。

もし、あなたがPHPによる自由な制御を求めるのであれば、従来のfront-page.phpを使った手法が最適です。

パフォーマンスとCore Web Vitals

トップページはサイトの中で最もアクセスが多く、最も重くなりがちなページです。

2026年のWeb標準では、表示速度（LCP）やインタラクティブ性（INP）がこれまで以上に重視されます。

front-page.phpを作成する際は、以下の点に注意してください。

  • 画像の最適化：wp_get_attachment_image()を使用して、適切なサイズとsrcset属性を出力する。
  • クエリの最小化：無駄なWP_Queryを発行しない。一度のクエリで必要な情報を取得するように設計する。
  • キャッシュの活用：動的なコンテンツが少ない場合は、オブジェクトキャッシュなどを検討する。

よくあるトラブルと解決策

front-page.phpを作成しても、意図した通りに表示されないことがあります。

その際のチェックリストをまとめました。

1. テンプレートが反映されない

もしfront-page.phpを作成したのにindex.phpが表示されてしまう場合、ファイル名のスペルミスを確認してください。

frontpage.php（ハイフンなし）などは正しく認識されません。

また、子テーマを使用している場合は、親テーマ側に同名のファイルがないか、あるいは子テーマのディレクトリ構成が正しいかを確認しましょう。

2. ページ分割（ページネーション）が動かない

トップページに投稿一覧を表示し、2ページ目以降へ遷移しようとすると404エラーになることがあります。

これは、トップページが本来「単一のページ」として扱われるため、URL構造の不整合が起きるからです。

この場合、pagedパラメータを正しく取得してクエリに渡す必要があります。

PHP
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
    'post_type' => 'post',
    'paged'     => $paged,
);

3. 表示設定で「ホームページ」が選択できない

管理画面の「表示設定」で固定ページを選択しようとした際、リストに対象のページが出てこない場合は、その固定ページが「下書き」状態になっていないか確認してください。

公開状態でないとホームページに設定することはできません。

実践的なレイアウトの組み立て方

カスタムサイトのトップページは、複数のセクションを組み合わせて構成するのが一般的です。

保守性を高めるために、各セクションを部品化（パーツ化）する方法を紹介します。

template-partsの活用

front-page.phpが肥大化すると、コードの可読性が低下します。

そこで、get_template_part()関数を使用して、セクションごとにファイルを分割します。

PHP
<?php get_header(); ?>

<main>
    <?php
    // 各セクションを外部ファイルから読み込む
    get_template_part('template-parts/front/hero');     // メインビジュアル
    get_template_part('template-parts/front/services'); // サービス紹介
    get_template_part('template-parts/front/news');     // お知らせ一覧
    get_template_part('template-parts/front/contact');  // お問い合わせ
    ?>
</main>

<?php get_footer(); ?>

このように構造化することで、特定のセクションだけを修正したい場合に該当ファイルを探しやすくなり、チーム開発や長期的なメンテナンスにおいて大きなメリットとなります。

まとめ

WordPressのfront-page.phpは、柔軟で高品質なカスタムサイトを構築するための強力な武器です。

テンプレート階層における最優先順位を正しく理解し、WP_Queryやカスタムフィールドを活用することで、管理画面からの更新性とデザインの自由度を両立させたトップページを実現できます。

制作の際は、単にデザインを再現するだけでなく、適切なクエリのリセットやテンプレートパーツによるコードの整理、そして2026年のWeb標準に合わせたパフォーマンスへの配慮を忘れないようにしましょう。

この記事で紹介した基本構成とテクニックを土台に、プロジェクトごとの要件に合わせた最適なトップページを構築してください。

クラウドSSLサイトシールは安心の証です。

URLをコピーしました！