WordPressのトップページ、front-page.phpとindex.phpの違いと使い分け

WordPressでサイトを作っていると、ついつい「とりあえずindex.phpに書いちゃえばいいや」となってしまう瞬間、ありませんか？

実はこれ、私自身がWordPressを覚え始めた頃に何度もやってしまった”あるあるミス”なんです。

「動けばOK」と思っていた当時は、index.phpの中にトップページのHTMLを書きまくっていました。でも、いざ別のテンプレートファイルを追加しようとすると、干渉する、混乱する、管理がしづらい…。結局、自分の首を絞める結果になってしまいました。

WordPressには「テンプレート階層」という強力な仕組みがあります。これを正しく使えば、ページごとのテンプレートを明確に分けられ、サイトの構造も格段に分かりやすくなります。とくに「トップページ」はサイトの顔。ここを誤ると、見た目だけでなくSEOや運用効率にも影響が出てしまいます。

そこでこの記事では、私の実体験も交えながら、front-page.phpの役割と使い方、index.phpとの違いを、初心者にもわかりやすく、かつ現場目線で整理していきます。「トップページはどっちで作ればいいの？」という疑問に、はっきり答えを出しましょう。

front-page.phpとindex.phpの違いを正しく理解しよう

テンプレート階層とは何か？

WordPressには「テンプレート階層（Template Hierarchy）」と呼ばれる、ファイルの読み込みルールがあります。表示しようとしているページの種類に応じて、WordPressが「まずこのファイル、なければ次のファイル」という順番でテンプレートを探しにいく仕組みです。

トップページ（フロントページ）の場合、探される順番は次のようになります。

ここで押さえておきたいのが、index.phpは「何もなければ最後に使われる」テンプレートだということ。逆に言うと、front-page.phpさえ用意すれば、トップページの見た目は確実にそのファイルで制御できます。

front-page.phpはトップページ専用テンプレート

WordPressの管理画面から「設定 → 表示設定」に進むと、「ホームページの表示」という項目があります。ここは「最新の投稿」か「固定ページ」のどちらかを選べるようになっていますね。

ここで大事なポイントを一つ。front-page.phpは、この設定がどちらであっても最優先で読み込まれます。「固定ページのときだけ効く」と誤解している人が多いのですが、WordPress公式のテンプレート階層でも、front-page.phpは「最新の投稿を表示する場合でも、静的な固定ページを表示する場合でも、フロントページの表示に使われる」と明記されています。

つまり、トップページのデザインを作り込みたいなら、まずfront-page.phpを置く。これが一番シンプルで確実な方法です。

「固定ページ」を選んで任意のページをホームに指定した場合でも、その固定ページの本文は空っぽで構いません。表示される中身はfront-page.php内のコードで組み立てられるからです。

home.phpとの関係も押さえておこう

front-page.phpとセットで覚えておきたいのがhome.phpです。名前から「ホーム（トップ）用かな？」と勘違いしがちですが、home.phpの正体は投稿一覧（ブログのインデックス）を表示するためのテンプレートです。

整理すると、こうなります。

• front-page.php … サイトの「顔」となるフロントページ全般。最優先
• home.php … 記事一覧を出すページ。トップに「最新の投稿」を指定したとき、front-page.phpが無ければここが使われる。また「表示設定」で投稿ページを別の固定ページに割り当てたときも、その一覧表示に使われる

この二つの役割を分けて理解しておくと、「トップはLP風のデザイン、ブログ一覧は別ページ」という構成もスムーズに組めるようになります。

index.phpにトップページを書くべきでない理由

初心者の頃は「とりあえずindex.phpに書けば表示されるし問題ないじゃん」と思いがちですが、実は多くのデメリットが潜んでいます。

• index.phpはあらゆるページの最終フォールバックなので、想定外のページにまで影響が出る
• 1ファイルに詰め込むと条件分岐が増え、保守性が低下する
• SEOやOGPの最適化がしづらくなる
• テーマを他の人に引き継ぐ際に混乱を招く

これはまさに、私が過去の案件で地獄を見たポイントでもあります（笑）。index.phpにトップの装飾を書き足していったら、他のページ表示まで巻き込まれて、原因の切り分けに丸一日溶かしました。

SEO対策や拡張性にも影響が出る

トップページは検索エンジンにとっても最重要ページの一つです。そのため、titleタグ、meta description、構造化データなども、トップページ専用に調整したい場面が出てきます。

これをindex.phpでやろうとすると、「トップページのときは…」という条件分岐をあちこちに書くことになり、コードがどんどん煩雑になります。一方、front-page.phpを使えばトップ専用のコードとして丸ごと分離できるので、SEO調整も見通しよく進められます。

さらに、ACF（Advanced Custom Fields）などを組み合わせれば、管理画面からトップページの内容を動的に差し替えることも可能です。ブロックエディタに対応したテンプレートを組めば、クライアントが自分で更新しやすい設計にもできます。

よくある構成パターンとその理由

企業サイトやポートフォリオサイトでは、トップページをLPのように作り込み、ブログやニュース一覧は別ページに分ける構成が主流です。

• 固定ページ「ホーム」 → front-page.phpで静的コンテンツを表示
• 固定ページ「ブログ」（投稿ページに指定） → home.phpで記事一覧を表示

この構成にしておくと、トップと一覧でテンプレートの責任がきれいに分かれます。SEO設定を個別に施したり、SNS連携（OGP）を柔軟に調整したりするのもぐっと楽になります。

まとめ：トップページは「特別なページ」として設計しよう

WordPressにおける「トップページ」は、単なる1ページではありません。サイト全体の印象を決定づける存在であり、SEOにも直結する重要エリアです。

最後に、使い分けの結論をまとめておきます。

• トップページを作り込むなら front-page.php。表示設定が固定ページでも最新の投稿でも最優先で使われる
• 記事一覧（ブログ)は home.php。トップと一覧の役割を分けて考える
• index.php はあくまで最終フォールバック。ここにトップ専用の中身を書き込まない

index.phpは万能なファイルですが、そこに頼り切るのは構造的にリスクが大きすぎます。front-page.phpを使えば、コードの責任範囲が明確になり、SEOの最適化もしやすく、他の人にも引き継ぎやすいテーマになります。

最初は少し面倒に感じるかもしれませんが、一度その恩恵を体験すれば「なぜ最初からそうしなかったのか」と思うはずです。front-page.phpを味方につけて、迷わないトップページ設計をしていきましょう。