WordPress トップページのテンプレは index.php ではなく front-page.php が最適

こんにちは。Maromaro のコーダー hoshidaです。

WordPress でWebサイトを構築する際、トップページのテンプレートは index.php ではなく front-page.php を使った方が良い、というお話です。

※ただし、トップページが記事一覧になっているブログタイプのサイトであれば index.php を使用したほうが良い場合もあります。

なぜ index.php ではいけないのか

WordPress のテンプレート階層の中で、index.php は最も下に位置しています。

テンプレート階層 – WordPress Codex 日本語版

上記ページの中盤の概念図を見るとわかりやすいですが、例えばサイトに検索フォームがあるのにもかからわず、テーマフォルダに shearch.php が無い場合、検索結果ページは index.php によって表示されます。

その時にもし index.php がトップページ用に作られていると、ポストデータは検索結果一覧なのに表示がトップページであるために予期せぬ表示になってしまう可能性が高いです。そもそも検索結果を見たいのにトップページが表示されては混乱は必至です。index.php をトップページとして使用すると、検索結果に限らずこのような危険が付きまといます。

また、トップページに編集可能な領域を用意するために、固定ページを作成してそれを「設定」からトップページとして指定するような場合には、デフォルトのトップページ表示テンプレートが front-page.php になりますので、いわゆるWebサイトタイプのサイトなのであれば front-page.php を使用するのが自然なのです。

投稿一覧ページの作成も簡単になる

また、Webサイトタイプのサイトにおいてトップページをリッチなデザインにするとき、投稿一覧ページを別途用意すると思います。

この投稿一覧ページはどのようにして作成していますか？設定をきちんとすれば、index.php や home.php などによって実に無理なく投稿一覧ページを作成できます。

（私は長らく、専用のページテンプレート（news-page.php など）を作成して、そこに query_posts を用いて強引に一覧を表示し、それを固定ページで表示するようにしていたのですが、この方法はナンセンスです。）

設定方法

ということで、front-page.php をトップページのテンプレートに設定するための方法を解説します。一緒に投稿一覧ページも作成します。

想定しているディレクトリは以下の通りです。

まず、トップページと投稿一覧ページ用の固定ページを作成します。

そして「設定 > 表示設定」から、トップページの設定をします。デフォルトでは「最新の投稿」になっていますが「固定ページ」にし、二つの設定に先ほど作成した二つの固定ページを指定します。

このときテンプレートフォルダに front-page.php があれば、トップページは front-page.php によって表示されます。

固定ページはこのように表示が変わっています。

トップの固定ページの中に入ってみると、URLがトップページになっています。

このページのコンテンツエディタなどに登録した内容は、トップページ表示時にポストデータとしてセットされているので、 front-page.php に the_content() などを記述をすることで表示することができます。

これでトップページは完了です。

ただこのままだと、投稿一覧ページのURLがデフォルトのままです。

このURLを「/news」にしたいので、その設定をします。

まず「設定 > パーマリンク」でパーマリンクのルールをデフォルト以外の何かにします。

そして投稿一覧に設定した固定ページに戻り、「スラッグ」を表示してそこにURLにしたい文字列を入力します。

これで「サイトURL/news」が投稿一覧ページになります。ページのポストデータに投稿一覧がセットされているので、index.php のなかで普通にループの処理をすれば一覧を表示することができます。

このときテンプレートフォルダに home.php があれば、投稿一覧は home.php によって表示されます。投稿一覧ページに特殊なデザインをしたい場合などには home.php を用意するといいでしょう。

条件分岐について

条件分岐はもちろん、トップページが is_front_page() で true に、投稿一覧ページが is_home() で true になります。index.php で投稿一覧を表示している場合も is_home() で true です。

以下の記事はそのあたりを検証しており参考になります。

WordPressのフロントページの表示設定とテンプレートの関係 | hokori.net

まとめ

静的ページを作成しているときの習慣で、つい index.php をトップページに使用してしまいがちですが、Wordpressのルールを理解して正しい方法で設定するのが大切です。

index.php は基本的に、投稿一覧、カテゴリ一覧、タグ一覧、検索結果一覧など一覧と名の付くものすべてを表示するためのテンプレートとして扱い、もし大幅に構造の異なる一覧ページが出てきた場合にのみ、home.php や tag.php、archive.php 等によってテンプレートを分けるようにすると良いでしょう。テンプレートの数が少ないほど構築においてもメンテナンスにおいてもコストが下がります。

ではでは