「静的フロントページの作成」の版間の差分

2018年6月1日 (金) 08:48時点における最新版

WordPress はデフォルトのとき、サイトのフロントページに最近の投稿を日付の逆順で表示します。一方で WordPress ユーザーの多くがフロントページの代わりに「静的フロントページ」または「スプラッシュページ」を使いたいと思っています。この「静的フロントページ」は、サイトのフロントページに固定した情報や歓迎メッセージを載せておきたいユーザーに馴染みのある見せ方です。

サイトのフロントページのルック＆フィールは、ユーザーの選択と WordPress テーマの機能とオプションの組み合わせで決まります。

WordPress のレイアウトと構造には 4 つのモデルがあり、そのうち 3 つが静的フロントページを利用できます。

1. ブログ: 伝統的なフロントページ形式で、投稿を日付の逆順に並べたものです。
2. 静的フロントページ: 伝統的な「静的 HTML サイト」モデルです。固定されたフロントページがあり、コンテンツは固定ページで見せます。投稿、カテゴリー、タグを使うことはほとんどありません。
3. 静的フロントページとブログ: このモデルはサイトの紹介や「ようこそ」としてフロントページがあり、さらに投稿を管理するブログがあります。固定ページは時間にかかわらない連絡先や自己紹介などのコンテンツを表示します。
4. 動的フロントページ: 統合モデルともよばれるダイナミックなサイトデザインです。静的フロントページとブログを持ちますが、フロントページの内容が動的に変わります。静的コンテンツとブログ（固定ページと投稿）のコンビネーションで作られることもあります。この例として、WordPress の Twenty-Eleven テーマに Showcase ページテンプレートがあります。これは、先頭に最新の投稿（ひとつ）の全文または抜粋があり、次に新しい投稿（複数）のタイトルが続きます。さらに先頭固定表示にセットされた投稿のスライダーを最新投稿の上に表示するオプションがあり、コンテンツを動的にミックスしたフロントページを表示します。

どのレイアウト構造を選んでも、WordPress に静的フロントページをセットアップする手順は基本的に同じです。

WordPress サイトに静的フロントページを作るために重要なステップが 2 つあります。

1. フロントページを指定する
2. 投稿ページを指定する（ブログページ）

サイトのフロントページに指定した固定ページは、読者に知らせたい静的な情報を表示します。例えば「ようこそ」ページや、使い方の説明、おすすめコンテンツ、特定の投稿・記事・カテゴリー・寄稿者などのページへ読者を誘導するようにカスタマイズできます。

サイトのブログページ（投稿ページ）に指定した固定ページは投稿を日付の逆順に表示します。先頭固定表示にセットされた投稿はいつも並び順の先頭にあり、投稿コンテンツはカテゴリーやタグにもとづいてナビゲーションや構造化します。

静的フロントページの作成に、ファイルやテンプレートの編集やコーディングは不要です。WordPress の「静的フロントページ」用のデフォルト設定は、サイドバーを削除したりサイト全体の外観を変えたりせず、本文領域のみを変えます。

以下の例で固定ページに付ける名前は web の標準的な名前ですが、別のタイトルを付けても構いません。

静的フロントページを作るには、最初に WordPress の管理画面を開きます。

1. フロントページの作成: 固定ページ » 新規追加 を選択します。
   • タイトルを「ホーム」にします。
     1. WordPress テーマがフロントページの外観を変えるオプションを提供する場合、ページ属性メタボックスのテンプレートから選択します。
     2. 静的フロントページの本文領域に表示したい内容を記入します。動的フロントページの場合は空のままにします。
     3. このページを公開します。
2. ブログページの作成: ブログを追加する場合、もう一度、固定ページの 新規追加 を選択します。
   • タイトルを「ブログ」（または「ニュース」や「記事」）などの適切な名前にします。
     1. このページにはカスタムページテンプレートを使わないでください。 テーマがこのページを表示（生成）するとき、テンプレートファイルの home.php または index.php が使われます。
     2. ブログページには本文を記入しません。空欄のままにします。もし本文を記入しても無視され、タイトルだけが使われます。
     3. このページを公開します。
        

        Reading panel
3. 管理画面 » 設定 » 表示設定 を開きます。
   • フロントページの表示 の 固定ページ にチェックを入れます。
     1. フロントページ のドロップダウンメニューから、先ほど作成した「ホーム」を選びます。
     2. 投稿ページ のドロップダウンメニューから、先ほど作成した「ブログ」（またはあなたが付けた名前）を選びます。もしサイトで投稿を使用しないなら何も選択せずにおきます。
     3. 変更を保存します。
4. 参考：URL が /index.php?p=423 のような形式では静的フロントページを作る目的に合わない場合、URL にページスラッグを使うことができます。それには、「パーマリンク」を有効にします。

これを「静的フロントページ」と呼んでいますが、そのページの本文はいつでも固定ページの編集によって変更できます。

静的フロントページ機能を持つテーマテンプレートファイルを作成するには、WordPress のテンプレート階層の理解が必要です。

front-page.php テンプレートファイルがあれば、WordPrss はサイトのフロントページにいつもそれを使います。front-page.php がなければ、「設定 > 表示設定 -> フロントページの表示」のユーザー設定にもとづいて、WordPress が使うテンプレートファイルを決めます。

• 最新の投稿: ブログ投稿インデックス のテンプレート階層: home.php, index.php
• 固定ページ: 固定ページ表示 のテンプレート階層: カスタムページテンプレート, page-{slug}.php, page-{id}.php, page.php, singular.php, index.php

サイトのフロントページ用カスタムテンプレートを作るには、次のいずれかをテーマに含めます：

• front-page.php
• A カスタムページテンプレート（例えばをおすすめコンテンツ用に template-featured.php）

ブログ投稿インデックス用のカスタムテンプレートを作るには、次のファイルをテーマに含めます：

• home.php

ブログ投稿インデックスに使えるのは home.php テンプレートファイルだけです。2 つ理由があるので、カスタムページテンプレート（例えば template-blog.php）を使わないでください：

1. 静的フロントページ機能を適切に設定すると、「投稿ページ」で選んだ固定ページにカスタムページテンプレートが指定されていても、WordPress はブログ投稿インデックスを表示するのにそのカスタムページテンプレートを使いません。WordPress は home.php または index.php のどちらかだけを使います。
2. 同じカスタムページテンプレートが「投稿ページ」で選んでいない固定ページにも指定されていると、ブログ投稿インデックスのループのページネーションは正しく動作しません。

is_front_page() 

この条件分岐タグはサイトのフロントページが表示されているかチェックします。サイトのフロントページが表示中なら true を返します。「設定 > 表示設定 -> フロントページの表示」が「最新の投稿」と「固定ページ」のどちらであるかは無関係です。

is_home() 

この条件分岐タグはブログ投稿インデックスが表示されているかチェックします。ブログ投稿インデックスページが表示中なら true を返します。つまり次のいずれかの場合です。

• サイトのフロントページが表示中で、「設定 > 表示設定 -> フロントページの表示」が「最新の投稿」。
• 「設定 > 表示設定 -> フロントページの表示」が「固定ページ」で、「投稿ページ」プルダウンで選ばれた固定ページが表示中。

サイトのフロントページが表示中で、「設定 > 表示設定 -> フロントページの表示」が「最新の投稿」である場合、is_front_page() と is_home() は両方とも true を返します。

front-page.php テンプレートファイルが存在すると、「設定 > 表示設定 -> フロントページの表示」が「最新の投稿」と「固定ページ」のどちらであっても、それがサイトのフロントページに使われます。そのためテーマは両方のオプションを考慮して、サイトのフロントページに固定ページとブログ投稿インデックスのどちらかを表示させなければなりません。そうするには、いくつか方法があります。

front-page.php に「設定 > 表示設定 -> フロントページの表示」の両方のオプションを考慮させるひとつの方法は、front-page.php の中に条件判定を入れます。これには get_option( 'show_on_front' ), get_home_template()/en, それから get_page_template()/en を使います。

方法 1: カスタムコンテンツをそのまま front-page.php 内に書きます：

if ( 'posts' == get_option( 'show_on_front' ) ) {
    include( get_home_template() );
} else {
    // カスタムコンテンツのマークアップをここに書く
}

方法 2: ページテンプレートのどれかを読み込みます：

if ( 'posts' == get_option( 'show_on_front' ) ) {
    include( get_home_template() );
} else {
    include( get_page_template() );
}

サイトのフロントページに固定ページ（カスタムコンテンツ）またはブログ投稿インデックスを表示させるもうひとつの方法は、front-page.php へ条件判定コードを入れずに、frontpage_template フィルター /en を使います。次のようにコールバックを functions.php へ追加します：

function themeslug_filter_front_page_template( $template ) {
    return is_home() ? '' : $template;
}
add_filter( 'frontpage_template', 'themeslug_filter_front_page_template' );

こうすると、ブログ投稿インデックスを表示するとき WordPress は front-page.php テンプレートファイルを完全にバイパスします。

front-page.php テンプレートファイルが次のようなデフォルトのループを含む場合：

<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
    // 投稿について何かする
endwhile; else:
    // 投稿が見つからない
endif;

このループは「設定 > 表示設定 -> フロントページの表示」の「投稿ページ」で選ばれた固定ページの本文を処理します。

カスタムループ（最新ブログ投稿、カスタム/おすすめコンテンツなど）を表示するには、WP_Query を呼び出して第 2 のループ用クエリを追加します。例えば最新ブログ投稿を 3 つ表示するには：

$latest_blog_posts = new WP_Query( array( 'posts_per_page' => 3 ) );

if ( $latest_blog_posts->have_posts() ) : while ( $latest_blog_posts->have_posts() ) : $latest_blog_posts->the_post();
    // ループの出力をここに書く
endwhile; endif;

静的フロントページはページネーションを想定していません。WordPress のページネーション関数は、どれも静的フロントページで正しく動作しません。静的フロントページのページネーションが使うのは page クエリ変数であり、paged 変数ではないからです。詳細は WP_Query を見てください。

参考: 静的フロントページでページネーションを効かせる方法がページネーションの説明ページにあります。

最新英語版： WordPress Codex » Creating a Static Front Page （最新版との差分）