フロントページの作成

次にフロントページを作成しましょう。

フロントページとは、ブログのトップページとは別に、固有のトップページを持たせるものです。典型的な利用例としては企業サイトのトップページが挙げられます。

例えば、 https://example.com/ をフロントページとして会社紹介を行い https://example.com/blog を会社ブログのトップページとして利用するようなケースが典型的です。

ダッシュボードでの設定

まずは、wordpressのダッシュボードでフロントページを利用する 設定を行いましょう。

  1. 固定ページを新規追加して、「フロントページ」というタイトルを設定してください。本文は空で構いません。
  2. 次に固定ページをもう一つ追加して、「ブログ」というタイトルを設定してください。
  3. 次に 設定 > 表示設定 で「フロントページの表示」項目についてラジオボタンで「固定ページ」を選択し、「フロントページ:」に先ほど作成した固定ページの「フロントページ」、投稿ページに「ブログ」を設定しておきましょう。これで準備完了です。

フロントページ用テンプレートの作成

上記の設定を行うと、wordpressを配置したurl直下ではフロントページとして設定した固定ページ1件のみが、index.phpのテンプレートで表示されるようになります。(どのようなSELECT文が実行されているか、$wp_query->requestを出力して確認しておくと良いでしょう。)

ここで、front-page.phpを作成することで、フロントページ専用のレイアウトやコンテンツを表示させることができます。index.phpと同じ階層にfront-page.phpを作成し、

<?php get_header(); ?>

<div class="container">
    <h2>ここはフロントページです。</h2>    
</div>


<?php get_footer(); ?>

というシンプルな内容を設定しておきましょう。

すると、

  • wordpressを配置したurl直下: front-page.php
  • その他のページ: index.php

という形で表示に利用されるテンプレートが振り分けられることになります。

よくあるケースでは、front-page.phpでは固定ページのタイトルや本文の情報を利用せず、front-page.phpに自由にhtmlで構築を行うことになります。ヘッダーやフッターなども、今回のサンプルでは共通のものを読み込んでいますがフロントページ専用のヘッダー部分、フッター部分を作成しても構いません。その場合front-page.phpに直接記載することができます。

results matching ""

    No results matching ""