【WordPress】front-page.phpとhome.phpとindex.phpの違いは?よくある使い方を解説

今回はWordPressで開発する際に使用するテンプレートファイル、「front-page.php」と「home.php」と「index.php」の違いについて説明します。

少しややこしく感じていた人もいると思うので、この記事を通して理解を深めましょう。

各テンプレートファイルはどんな時に使用するのか

front-page.php

WordPress公式サイトにはこのように書かれています。

front-page.php (classic theme) or front-page.html (block theme)

The front page template is always used as the site front page if it exists, regardless of what settings on Admin > Settings > Reading.

WordPress Developer Resources

この意味は、「front-page.phpが存在する場合は、設定に関係なくサイトのフロントページとして常に使用されますよ」ということです。

ファイルの名前にもフロントページと入っているように、「front-page.php」を作成すると一番優先されてトップページに表示されるファイルなので、トップページのためのファイルという認識で良いと思います。

会社のサイトやブランドサイトなどは「front-page.php」をトップページにします。

home.php

WordPress公式サイトにはこのように書かれています。

home.php (classic theme) or home.html (block theme)

The home page template is the front page by default. If you do not set WordPress to use a static front page, this template is used to show latest posts.

WordPress Developer Resources

「デフォルトではhome.phpがフロントページに表示されますよ。静的なフロントページを設定していない場合、このファイルは投稿の一覧ページを表示しますよ」という意味です。

投稿の一覧ページというのは、WordPressを設置した時に最初からある「投稿」のアーカイブページということです。

つまり、「home.php」は最初からある「投稿」のアーカイブページで、初めはトップページに設定されてあるということです。

このhome.phpがトップページに使われているサイトは、主にブログサイトです。

会社サイトやブランドサイトと違って、記事の一覧ページがトップにきていますね。

index.php

WordPress公式サイトにはこのように書かれています。

index.php (classic theme) or index.html (block theme)

The main template file. It is required in all themes.

WordPress Developer Resources

この意味は、「メインのテンプレートファイルで、すべてのテーマで必要ですよ」ということです。

今まで説明した「front-page.php」や「home.php」のファイルがない場合、フロントページに表示される場合があります。

その他の場面でも、適切なファイルがない場合に表示される最後の砦のようなファイルです。

目的に合わせたファイルではないので、できるだけ必要な箇所には専用のファイルを作成して表示させるようにしたいところですね。

WordPressのトップページはどのテンプレートが表示されるか

デフォルト

設定を何も触っていない状態では、「投稿の一覧ページ」が表示されます。そのテンプレートファイルは「home.php」です。

表示設定を変更する場合

トップページの表示を変更する場合は、管理画面の 設定 > 表示設定 > ホームページの表示 の部分を変更します。

最初は「最新の投稿」になっているので、「固定ページ」に変更して「ホームページ」の項目や「投稿ページ」の項目を選択することができます。

そして、選んだ項目によって表示されるテンプレートファイルはそれぞれ変わります。

  • page.php
  • home.php
  • index.php

ホームページで固定ページの投稿を選んだ場合、page.phpもしくはpage-{slug}.phpがトップページに表示されます。

また、ホームページの設定はなしで投稿ページの設定をした場合は、home.phpがトップページに表示されます。

上記の設定をしていても、適応するテンプレートファイルが作成されていない場合はindex.phpがトップページに表示されます。

このように、設定を変更することで表示されるテンプレートファイルを簡単に変更することができます。

トップページを指定する方法

次に、希望のページをトップページに指定する方法を見ていきましょう。

固定ページをトップページにしたい場合

まずは、トップページにしたい固定ページを作成します。

今回、例で作成した固定ページは「トップページにしたい固定ページ」というタイトルにしました。

作成したら、表示設定のホームページの項目を「トップページにしたい固定ページ」に変更します。

「変更を保存」を押して変更完了です。

以上で「トップページにしたい固定ページ」をトップページにすることができました。

投稿の一覧ページをトップページにしたい場合

投稿の一覧ページをトップページにする方法は2つあります。

  • front-page.phpを作成しない&最新の投稿にする
  • 固定ページにしてホームページを指定しない&投稿ページを指定する

1つ目はデフォルトの状態です。front-page.phpを作成してしまうと優先されるので、作成しないでおくとhome.phpが優先されます。

2つ目は投稿ページだけをページ問わず指定するとhome.phpが表示されるようになります。

トップページ専用のファイル(front-page.php)をトップページにしたい場合

front-page.phpを作成するだけでトップページに指定することができます。

トップページ以外で投稿の一覧ページを表示する方法

投稿の一覧ページをトップページ以外でも表示する方法は、固定ページと設定を使って簡単にできます。

今回はよくありそうな「お知らせ一覧ページ」を作ってみましょう。

固定ページ「お知らせ」を作成する

固定ページ > 新規作成 から「お知らせ」ページを作成します。

タイトルの入力だけで大丈夫です。

設定で投稿ページを「お知らせ」にする

新規作成した「お知らせ」ページが選択枠に出てくるので、選んで「変更を保存」しましょう。

完成

設定が完了すると、固定ページ一覧には「ー 投稿ページ」の文字が追加されます。

これで設定完了です。

メニューの設定でグローバルメニューに入れることができ、ちゃんと投稿の一覧ページにリンクできます。

まとめ

今回は「front-page.php」と「home.php」と「index.php」の違いについて説明しました。

どれもトップページになり得るファイルですが、特徴や用途が違うので、その違いを理解して使用しましょう。

理解すると設定次第でとても便利に使えるので、今回紹介した方法と合わせて確認しながら試してみてください。