WordPressのhome.phpとfront-page.phpの違いをやさしく解説｜初心者が混乱しやすいポイントを図解で整理

WordPressのテーマをカスタマイズしていると、「home.php」と「front-page.php」という2つのテンプレートファイルが登場します。
どちらも「トップページを表示するテンプレート」と思われがちですが、実は役割がまったく違うのです。

この記事では、初心者の方でも混乱しないように、図解付きでその違いをわかりやすく解説します。

1. home.phpとfront-page.phpの基本的な役割

◆ front-page.phpとは

• サイトのトップページ（フロントページ）を表示するテンプレートです。
• WordPressの「設定 → 表示設定」で「固定ページをフロントページに設定した場合」に使用されます。

例：

「固定ページ“HOME”」をトップページに設定している場合
→ front-page.php が使われます。

◆ home.phpとは

• ブログ投稿一覧ページ（いわゆる「記事一覧」ページ）を表示するテンプレートです。
• 「設定 → 表示設定」で最新の投稿をトップページに設定した場合、トップページとして使用されます。
• また、「固定ページをフロントページに設定している場合」は、投稿ページ側（ブログ一覧ページ）として使われます。

2. どちらが優先されるのか？【テンプレート階層の図解】

WordPressのテンプレート階層によると、
トップページを表示する際の優先順位は次のとおりです。

つまり、

• front-page.php は 固定ページのトップ用
• home.php は 投稿一覧ページ用（またはブログトップ）

3. よくある混乱ポイントと解決例

❌ 間違い例

「home.phpを作ったのに、トップページが変わらない…！」

👉 原因：
「固定ページをトップページに設定しているため、front-page.phpが優先されている。」

✅ 解決策

• 固定ページをトップにしている場合は front-page.php を編集
• 投稿一覧をトップにしている場合は home.php を編集

4. 実際の使い分け例

5. コーディングの例（構造の違い）

front-page.php（固定ページ用）

<?php get_header(); ?>
<main class="front-page">
  <section class="hero">メインビジュアル</section>
  <section class="service">サービス紹介</section>
</main>
<?php get_footer(); ?>

home.php（投稿一覧用）

<?php get_header(); ?>
<main class="blog-list">
  <h1>ブログ一覧</h1>
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article <?php post_class(); ?>>
      <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </article>
  <?php endwhile; endif; ?>
</main>
<?php get_footer(); ?>

6. 使い分けを見分けるためのチェックリスト

7. 関連して理解しておきたいWordPressの基礎記事

• 🔗 is_front_page()とis_home()の違いを初心者向けにやさしく解説
  　→ この記事とセットで理解すると、条件分岐もスッキリ！
• 🔗 WordPressテンプレート階層の仕組みを図解で理解する
  　→ front-page.phpがどのように呼び出されるかの全体像が見える。
• 🔗 functions.phpの使い方と注意点【初心者向け】
  　→ 各テンプレートで共通機能を追加したいときに便利。

8. まとめ

👉 「トップページ」＝front-page.php ではない
👉 「ブログ一覧ページ」＝home.php

この2つを正しく使い分けることで、
WordPressのテーマ設計がぐっとわかりやすくなります！

💡ワンポイントアドバイス

テーマ制作時には、

• front-page.php：固定ページトップ
• home.php：ブログ一覧
• single.php：記事詳細
• page.php：固定ページ

の4構成を最初に揃えると、後々の拡張がしやすくなります。