当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムWordSlack #docs チャンネルでお知らせください。</p>

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(改名終わり)
(和訳完了しました)
1行目: 1行目:
{{NeedTrans}}
+
{{CheckTrans}}
  
__TOC__
+
WordPress はデフォルトのとき、サイトのフロントページに最近の投稿を日付の逆順で表示します。一方で WordPress ユーザーの多くがフロントページの代わりに「静的フロントページ」または「スプラッシュページ」を使いたいと思っています。この「静的フロントページ」は、サイトのフロントページに固定した情報や歓迎メッセージを載せておきたいユーザーに馴染みのある見せ方です。
By default, WordPress shows your most recent posts in reverse chronological order on the front page of your site. Many WordPress users want a '''static front page''' or '''splash page''' as the front page instead. This "static front page" look is common for users desiring static or welcoming information on the front page of the site.
+
  
The look and feel of the front page of the site is based upon the choices of the user combined with the features and options of the WordPress Theme.
+
サイトのフロントページのルック&フィールは、ユーザーの選択と WordPress テーマの機能とオプションの組み合わせで決まります。
  
There are four models for WordPress layout and structure, three that include static front pages.
+
WordPress のレイアウトと構造には 4 つのモデルがあり、そのうち 3 つが静的フロントページを利用できます。
  
# '''Blog:''' This is the traditional front page format with posts featured in reverse chronological order.
+
# '''ブログ:''' 伝統的なフロントページ形式で、投稿を日付の逆順に並べたものです。
# '''Static Front Page:''' This is a traditional static HTML site model with a fixed front page and content placed in Pages, rarely if ever using posts, categories, or tags.
+
# '''静的フロントページ:''' 伝統的な「静的 HTML サイト」モデルです。固定されたフロントページがあり、コンテンツは固定ページで見せます。投稿、カテゴリー、タグを使うことはほとんどありません。
# '''Static Front Page Plus Blog:''' This model features a static front page as an introduction or welcome plus a blog to manage posts. Pages may be used to provide timeless content such as Contact, About, etc.
+
# '''静的フロントページとブログ:''' このモデルはサイトの紹介や「ようこそ」としてフロントページがあり、さらに投稿を管理するブログがあります。固定ページは時間にかかわらない連絡先や自己紹介などのコンテンツを表示します。
# '''Dynamic Front Page:''' Sometimes called the ''integrated'' model, the dynamic site design features a static front page plus blog, however the front page is dynamic. It may feature a combination of static and blog content (Page and posts). The Twenty-Eleven WordPress Theme offers that feature as an example with their Showcase Page Template. It features the most recent post in full or excerpt followed by the next most recent posts as post titles. There is an option to add a slider for featured posts set as Sticky Posts above the first post, creating a dynamic mix of content on the front page.
+
# '''動的フロントページ:''' ''統合''モデルともよばれるダイナミックなサイトデザインです。静的フロントページとブログを持ちますが、フロントページの内容が動的に変わります。静的コンテンツとブログ(固定ページと投稿)のコンビネーションで作られることもあります。この例として、WordPress の Twenty-Eleven テーマに Showcase ページテンプレートがあります。これは、先頭に最新の投稿(ひとつ)の全文または抜粋があり、次に新しい投稿(複数)のタイトルが続きます。さらに先頭固定表示にセットされた投稿のスライダーを最新投稿の上に表示するオプションがあり、コンテンツを動的にミックスしたフロントページを表示します。
  
No matter which layout structure you choose, the process of setting up the static front page in WordPress is basically the same.
+
どのレイアウト構造を選んでも、WordPress に静的フロントページをセットアップする手順は基本的に同じです。
  
 
<div id="WordPress_Static_Front_Page_Process">
 
<div id="WordPress_Static_Front_Page_Process">
19行目: 18行目:
 
</div>
 
</div>
  
There are two steps critical to creating a static front page on your site with WordPress.
+
WordPress サイトに静的フロントページを作るために重要なステップが 2 つあります。
  
# Assign the Front [[Pages|Page]]
+
# フロント[[固定ページ|ページ]]を指定する
# Assign the Posts [[Pages|Page]] (blog page)
+
# 投稿[[固定ページ|ページ]]を指定する(ブログページ)
  
 
[[File:static_front_page_setting.png]]
 
[[File:static_front_page_setting.png]]
  
The Page assigned as the front page of the site will display the static information you wish readers to know. It may be customized to direct people to welcome or offer instructions, featured content, highlight specific posts, articles, categories, or contributors.
+
サイトのフロントページに指定した固定ページは、読者に知らせたい静的な情報を表示します。例えば「ようこそ」ページや、使い方の説明、おすすめコンテンツ、特定の投稿・記事・カテゴリー・寄稿者などのページへ読者を誘導するようにカスタマイズできます。
  
The Page assigned as the blog page (posts page) of the site displays posts in reverse chronological order. Posts set as Sticky Posts will stick to the top of the queue, and navigation and organization of post content is through categories and tags.
+
サイトのブログページ(投稿ページ)に指定した固定ページは投稿を日付の逆順に表示します。先頭固定表示にセットされた投稿はいつも並び順の先頭にあり、投稿コンテンツはカテゴリーやタグにもとづいてナビゲーションや構造化します。
  
 
{{Message|
 
{{Message|
34行目: 33行目:
 
| border = #CCCCCC
 
| border = #CCCCCC
 
| color = #000000
 
| color = #000000
| text = Some WordPress Themes offer special setup or options for "front page" type features including customized Page Templates. This article describes the standardized way of creating Static Front Pages. See the documentation for your WordPress Theme for specific details.}}
+
| text = 一部の WordPress テーマは、カスタマイズ済み固定ページテンプレートを含む「フロントページ」タイプの特別なセットアップやオプションを提供します。この記事は静的フロントページを作成する標準的な方法を説明します。WordPress テーマに固有の詳細についてはテーマの説明書を見てください。}}
  
 
<div id="Creating_a_Static_Front_Page">
 
<div id="Creating_a_Static_Front_Page">
40行目: 39行目:
 
</div>
 
</div>
  
{{管理パネルガイド|ページ}}
+
<!-- {{管理パネルガイド|ページ}} 並び替えキーが重複するため削除 gblsm 4-July-2015 -->
 
静的フロントページの作成に、ファイルやテンプレートの編集やコーディングは不要です。<!-- Creating a virtual static front page does not require editing or coding of files or templates. -->WordPress の「静的フロントページ」用のデフォルト設定は、サイドバーを削除したりサイト全体の外観を変えたりせず、本文領域のみを変えます。
 
静的フロントページの作成に、ファイルやテンプレートの編集やコーディングは不要です。<!-- Creating a virtual static front page does not require editing or coding of files or templates. -->WordPress の「静的フロントページ」用のデフォルト設定は、サイドバーを削除したりサイト全体の外観を変えたりせず、本文領域のみを変えます。
  
64行目: 63行目:
 
# '''参考:'''URL が <code>/index.php?p=423</code> のような形式では静的フロントページを作る目的に合わない場合、URL にページスラッグを使うことができます。それには、'''「[[Using Permalinks|パーマリンク]]」を有効にします'''。
 
# '''参考:'''URL が <code>/index.php?p=423</code> のような形式では静的フロントページを作る目的に合わない場合、URL にページスラッグを使うことができます。それには、'''「[[Using Permalinks|パーマリンク]]」を有効にします'''。
  
これを「静的フロントページ」と呼んではいますが、そのページの本文はいつでも[[Pages|固定ページ]]の編集によって変更できます。
+
これを「静的フロントページ」と呼んでいますが、そのページの本文はいつでも[[Pages|固定ページ]]の編集によって変更できます。
  
 
<div id="Theme_Development_for_Custom_Front_Page_Templates">
 
<div id="Theme_Development_for_Custom_Front_Page_Templates">
74行目: 73行目:
 
</div>
 
</div>
  
Developing Theme template files that incorporate the static front page feature requires understanding of the WordPress [[Template Hierarchy]].
+
静的フロントページ機能を持つテーマテンプレートファイルを作成するには、WordPress の[[テンプレート階層]]の理解が必要です。
  
On the site front page, WordPress will always use the <tt>front-page.php</tt> template file, if it exists. If <tt>front-page.php</tt> does not exist, WordPress will determine which template file to use, depending on the user configuration of '[[Administration_Panels#Reading|Settings]] > [[Settings_Reading_SubPanel|Reading]] ->Front page displays', as follows:
+
<tt>front-page.php</tt> テンプレートファイルがあれば、WordPrss はサイトのフロントページにいつもそれを使います。<tt>front-page.php</tt> がなければ、「[[管理画面#Reading|設定]] > [[管理画面/表示設定|表示設定]] -> フロントページの表示」のユーザー設定にもとづいて、WordPress が使うテンプレートファイルを決めます。
  
* '''A static page:''' WordPress uses the [[Template_Hierarchy#Page_display|Static Page]] template hierarchy: [[Page_Templates#Custom_Page_Template|Custom Page Template]], <tt>page-{id}.php</tt>, <tt>page-{slug}.php</tt>, <tt>page.php</tt>, <tt>index.php</tt>
+
* '''最新の投稿:''' [[テンプレート階層#Home_Page_display|ブログ投稿インデックス]] のテンプレート階層: <tt>home.php</tt>, <tt>index.php</tt>
* '''Your latest posts:''' WordPress uses the [[Template_Hierarchy#Home_Page_display|Blog Posts Index]] template hierarchy: <tt>home.php</tt>, <tt>index.php</tt>
+
* '''固定ページ:''' [[テンプレート階層#Page_display|固定ページ表示]] のテンプレート階層: [[ページテンプレート#Custom_Page_Template|カスタムページテンプレート]], <tt>page-{slug}.php</tt>, <tt>page-{id}.php</tt>, <tt>page.php</tt>, <tt>singular.php</tt>, <tt>index.php</tt>
  
 
<div id="Custom_Site_Front_Page_Template">
 
<div id="Custom_Site_Front_Page_Template">
85行目: 84行目:
 
</div>
 
</div>
  
To create a custom site front page template, include either of the following in the Theme:
+
サイトのフロントページ用カスタムテンプレートを作るには、次のいずれかをテーマに含めます:
  
 
* <tt>front-page.php</tt>
 
* <tt>front-page.php</tt>
* A [[Page_Templates#Custom_Page_Template|Custom Page Template]] (e.g. <tt>template-featured.php</tt> for featured content)
+
* A [[ページテンプレート#Custom_Page_Template|カスタムページテンプレート]](例えばをおすすめコンテンツ用に <tt>template-featured.php</tt>
  
 
<div id="Custom_Blog_Posts_Index_Page_Template">
 
<div id="Custom_Blog_Posts_Index_Page_Template">
94行目: 93行目:
 
</div>
 
</div>
  
To create a custom blog posts index template, include the following in the Theme:
+
ブログ投稿インデックス用のカスタムテンプレートを作るには、次のファイルをテーマに含めます:
  
 
* <tt>home.php</tt>
 
* <tt>home.php</tt>
  
Use only the <tt>home.php</tt> template file for the blog posts index. Do not use a Custom Page Template (such as <tt>template-blog.php</tt>) for two reasons:
+
ブログ投稿インデックスに使えるのは <tt>home.php</tt> テンプレートファイルだけです。2 つ理由があるので、カスタムページテンプレート(例えば <tt>template-blog.php</tt>)を使わないでください:
  
# When the static front page feature is configured properly, WordPress will not use a Custom Page Template to display the blog posts index, even if a Custom Page Template is assigned to the page designated as the "Posts page". WordPress will ''only'' use either <tt>home.php</tt> or <tt>index.php</tt>.
+
# 静的フロントページ機能を適切に設定すると、「投稿ページ」で選んだ固定ページにカスタムページテンプレートが指定されていても、WordPress はブログ投稿インデックスを表示するのにそのカスタムページテンプレートを使いません。WordPress は <tt>home.php</tt> または <tt>index.php</tt> のどちらか''だけ''を使います。
# When the Custom Page Template is assigned to a static page other than the one designated as the "Posts page," the blog posts index loop pagination will not work properly.
+
# 「投稿ページ」で選んでいない固定ページにカスタムページテンプレートが指定されていると、ブログ投稿インデックスのループのページネーションは正しく動作しません。
  
 
<div id="Contextual_Conditional_Tags">
 
<div id="Contextual_Conditional_Tags">
107行目: 106行目:
 
</div>
 
</div>
  
; <tt>[[関数リファレンス/is_front_page|is_front_page()]]</tt> :This [[Conditional Tags|Conditional Tag]] checks if the site front page is being displayed. Returns true when the site front page is being displayed, regardless of whether '[[Administration_Panels#Reading|Settings]] > [[Settings_Reading_SubPanel|Reading]] ->Front page displays' is set to "Your latest posts" or "A static page".
+
; <tt>[[関数リファレンス/is_front_page|is_front_page()]]</tt> : この[[条件分岐タグ]]はサイトのフロントページが表示されているかチェックします。サイトのフロントページが表示中なら true を返します。「[[管理画面#Reading|設定]] > [[管理画面/表示設定|表示設定]] -> フロントページの表示」が「最新の投稿」と「固定ページ」のどちらであるかは無関係です。
  
; <tt>[[関数リファレンス/is_home|is_home()]]</tt> :This [[Conditional Tags|Conditional Tag]] checks if the blog posts index is being displayed.  Returns true when the blog posts index is being displayed: when the site front page is being displayed and '[[Administration_Panels#Reading|Settings]] > [[Settings_Reading_SubPanel|Reading]] ->Front page displays' is set to "Your latest posts", or when '[[Administration_Panels#Reading|Settings]] > [[Settings_Reading_SubPanel|Reading]] ->Front page displays' is set to "A static page" and the "Posts Page" value is the current [[Pages|Page]] being displayed.
+
; <tt>[[関数リファレンス/is_home|is_home()]]</tt> : この[[条件分岐タグ]]はブログ投稿インデックスが表示されているかチェックします。ブログ投稿インデックスページが表示中なら true を返します。つまり次のいずれかの場合です。
 +
:* サイトのフロントページが表示中で、「[[管理画面#Reading|設定]] > [[管理画面/表示設定|表示設定]] -> フロントページの表示」が「最新の投稿」。
 +
:* 「[[管理画面#Reading|設定]] > [[管理画面/表示設定|表示設定]] -> フロントページの表示」が「固定ページ」で、「投稿ページ」プルダウンで選ばれた[[固定ページ]]が表示中。
  
When the site front page is being displayed and '[[Administration_Panels#Reading|Settings]] > [[Settings_Reading_SubPanel|Reading]] ->Front page displays' is set to "Your latest posts", both <tt>is_front_page()</tt> and <tt>is_home()</tt> will return true.
+
サイトのフロントページが表示中で、「[[管理画面#Reading|設定]] > [[管理画面/表示設定|表示設定]] -> フロントページの表示」が「最新の投稿」である場合、<tt>is_front_page()</tt> <tt>is_home()</tt> は両方とも true を返します。
  
 
<div id="Configuration_of_front-page.php">
 
<div id="Configuration_of_front-page.php">
117行目: 118行目:
 
</div>
 
</div>
  
If it exists, the <tt>front-page.php</tt> template file is used on the site's front page regardless of whether '[[Administration_Panels#Reading|Settings]] > [[Settings_Reading_SubPanel|Reading]] ->Front page displays' is set to "A static page" or "Your latest posts," the Theme will need to account for both options, so that the site front page will display either a static page or the blog posts index. There are a few methods to do so. 
+
<tt>front-page.php</tt> テンプレートファイルが存在すると、「[[管理画面#Reading|設定]] > [[管理画面/表示設定|表示設定]] -> フロントページの表示」が「最新の投稿」と「固定ページ」のどちらであっても、それがサイトのフロントページに使われます。そのためテーマは両方のオプションを考慮して、サイトのフロントページに固定ページとブログ投稿インデックスのどちらかを表示させなければなりません。そうするには、いくつか方法があります。
  
 
<div id="Conditional_display_within_front-page.php">
 
<div id="Conditional_display_within_front-page.php">
123行目: 124行目:
 
</div>
 
</div>
  
One way to allow <tt>front-page.php</tt> to account for both options for '[[Administration_Panels#Reading|Settings]] > [[Settings_Reading_SubPanel|Reading]] ->Front page displays' is to add a conditional inside of <tt>front-page.php</tt> itself, using [[Option_Reference#Reading|<tt>get_option( 'show_on_front' )</tt>]], [[関数リファレンス/get_home_template|<tt>get_home_template()</tt>]]/[[:en:Function_Reference/get_home_template|en]], and [[関数リファレンス/get_page_template|<tt>get_page_template()</tt>]]/[[:en:Function_Reference/get_page_template|en]].
+
<tt>front-page.php</tt> に「[[管理画面#Reading|設定]] > [[管理画面/表示設定|表示設定]] -> フロントページの表示」の両方のオプションを考慮させるひとつの方法は、<tt>front-page.php</tt> の中に条件判定を入れます。これには [[オプション設定リファレンス#Reading|<tt>get_option( 'show_on_front' )</tt>]], [[関数リファレンス/get_home_template|<tt>get_home_template()</tt>]]/[[:en:Function_Reference/get_home_template|en]], それから [[関数リファレンス/get_page_template|<tt>get_page_template()</tt>]]/[[:en:Function_Reference/get_page_template|en]] を使います。
  
Method 1: including custom content directly within <tt>front-page.php</tt>:
+
方法 1: カスタムコンテンツをそのまま <tt>front-page.php</tt> 内に書きます:
 
<pre>
 
<pre>
 
if ( 'posts' == get_option( 'show_on_front' ) ) {
 
if ( 'posts' == get_option( 'show_on_front' ) ) {
 
     include( get_home_template() );
 
     include( get_home_template() );
 
} else {
 
} else {
     // Custom content markup goes here
+
     // カスタムコンテンツのマークアップをここに書く
 
}
 
}
 
</pre>
 
</pre>
  
Method 2: including any page template:
+
方法 2: ページテンプレートのどれかを読み込みます:
 
<pre>
 
<pre>
 
if ( 'posts' == get_option( 'show_on_front' ) ) {
 
if ( 'posts' == get_option( 'show_on_front' ) ) {
147行目: 148行目:
 
</div>
 
</div>
  
Another way to allow the site front page to display either a static page/custom content or the blog posts index, without adding conditional code within <tt>front-page.php</tt>, is to [[関数リファレンス/get_query_template|filter <tt>front_page_template</tt>]]/[[:en:Function_Reference/get_query_template|en]], by adding a filter callback to <tt>functions.php</tt>:
+
サイトのフロントページに固定ページ(カスタムコンテンツ)またはブログ投稿インデックスを表示させるもうひとつの方法は、<tt>front-page.php</tt> へ条件判定コードを入れずに、[[関数リファレンス/get_query_template|<tt>front_page_template</tt> フィルター]]/[[:en:Function_Reference/get_query_template|en]] を使います。次のようにコールバックを <tt>functions.php</tt> へ追加します:
  
 
<pre>
 
<pre>
156行目: 157行目:
 
</pre>
 
</pre>
  
This method causes WordPress to bypass the <tt>front-page.php</tt> template file altogether when the blog posts index is being displayed.
+
こうすると、ブログ投稿インデックスを表示するとき WordPress <tt>front-page.php</tt> テンプレートファイルを完全にバイパスします。
  
 
<div id="Adding_custom_query_loops_to_front-page.php">
 
<div id="Adding_custom_query_loops_to_front-page.php">
162行目: 163行目:
 
</div>
 
</div>
  
If the <tt>front-page.php</tt> template file includes a default [[The Loop|WordPress Loop]], like so:
+
<tt>front-page.php</tt> テンプレートファイルが次のようなデフォルトの[[ループ]]を含む場合:
 
<pre>
 
<pre>
 
<?php
 
<?php
 
if ( have_posts() ) : while ( have_posts() ) : the_post();
 
if ( have_posts() ) : while ( have_posts() ) : the_post();
     // do something
+
     // 投稿について何かする
 
endwhile; else:
 
endwhile; else:
     // no posts found
+
     // 投稿が見つからない
 
endif;
 
endif;
 
</pre>
 
</pre>
  
That loop applies to the post content of the static page assigned to '[[Administration_Panels#Reading|Settings]] > [[Settings_Reading_SubPanel|Reading]] ->Posts page'.
+
このループは「[[管理画面#Reading|設定]] > [[管理画面/表示設定|表示設定]] -> フロントページの表示」の「投稿ページ」で選ばれた固定ページの本文を処理します。
  
To display custom loops (latest blog posts, custom/featured content, etc.), add secondary loop queries using calls to [[Class_Reference/WP_Query|WP_Query]]. For example, to show the 3 latest blog posts:
+
カスタムループ(最新ブログ投稿、カスタム/おすすめコンテンツなど)を表示するには、[[Class_Reference/WP_Query|WP_Query]] を呼び出して第 2 のループ用クエリを追加します。例えば最新ブログ投稿を 3 つ表示するには:
  
 
<pre>
 
<pre>
180行目: 181行目:
  
 
if ( $latest_blog_posts->have_posts() ) : while ( $latest_blog_posts->have_posts() ) : $latest_blog_posts->the_post();
 
if ( $latest_blog_posts->have_posts() ) : while ( $latest_blog_posts->have_posts() ) : $latest_blog_posts->the_post();
     // Loop output goes here
+
     // ループの出力をここに書く
 
endwhile; endif;
 
endwhile; endif;
 
</pre>
 
</pre>
  
 
<div id="Pagination">
 
<div id="Pagination">
=== ページ送り ===
+
=== ページネーション ===
 
</div>
 
</div>
  
Static front pages are not intended to be paged. None of the WordPress [[Next_and_Previous_Links|Previous / Next page link]] functions work with a static front page.  Pagination on a static front page uses the <tt>page</tt> query variable, not the <tt>paged</tt> variable. See the [[Class_Reference/WP_Query|WP_Query]] for details.
+
静的フロントページはページネーションを想定していません。WordPress の[[ページネーション]]<!-- [[Next_and_Previous_Links|Previous / Next page link]] -->関数は、どれも静的フロントページで正しく動作しません。静的フロントページのページネーションが使うのは <tt>page</tt> クエリ変数であり、<tt>paged</tt> 変数ではないからです。詳細は [[Class_Reference/WP_Query|WP_Query]] を見てください。
 +
 
 +
<p class="information">'''参考:''' 静的フロントページでページネーションを効かせる方法が[[ページネーション#static_front_page|ページネーションの説明ページ]]にあります。</p>
  
 
<div id="Resources">
 
<div id="Resources">
194行目: 197行目:
 
</div>
 
</div>
  
{{原文|Creating a Static Front Page|146824}}<!-- 10:49, 23 September 2014 NateWr 版 -->
+
{{原文|Creating a Static Front Page|146824}} <!-- 10:49, 23 September 2014 NateWr 版 -->
  
{{DEFAULTSORT:Creating_a_Static_Front_Page}}
+
{{DEFAULTSORT:せいてきふろんとぺーじのさくせい}}
 
[[Category:初心者向けトピック]]
 
[[Category:初心者向けトピック]]
 
[[Category:設置]]
 
[[Category:設置]]

2015年7月4日 (土) 18:04時点における版

この項目「静的フロントページの作成」は、翻訳チェック待ちの項目です。加筆、訂正などを通して、Codex ドキュメンテーションにご協力下さい。

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

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

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

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

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

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

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

static front page setting.png

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

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

一部の WordPress テーマは、カスタマイズ済み固定ページテンプレートを含む「フロントページ」タイプの特別なセットアップやオプションを提供します。この記事は静的フロントページを作成する標準的な方法を説明します。WordPress テーマに固有の詳細についてはテーマの説明書を見てください。

静的フロントページの作成

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

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

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

  1. フロントページの作成: 固定ページ » 新規追加/en を選択します。
    • タイトルを「ホーム」にします。
      1. WordPress テーマがフロントページの外観を変えるオプションを提供する場合、ページ属性メタボックスのテンプレートから選択します。
      2. 静的フロントページの本文領域に表示したい内容を記入します。動的フロントページの場合は空のままにします。
      3. このページを公開します。
  2. ブログページの作成: ブログを追加する場合、もう一度、固定ページの 新規追加/en を選択します。
    • タイトルを「ブログ」(または「ニュース」や「記事」)などの適切な名前にします。
      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

ブログ投稿インデックスに使えるのは 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 内での表示切り替え

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() );
}

フィルター frontpage_template を使う

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

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

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

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最新版との差分