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

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(リンク等調整、未翻訳)
(最新版の WordPress.org の日本語ドキュメントが公開された、もしくは公開が予定されたため、お知らせを追加)
 
(4人の利用者による、間の10版が非表示)
1行目: 1行目:
{{NeedTrans}}
+
{{Message|
{{Rename|C}}
+
| background = #d7f1fa
 +
| border = #a8a8a8
 +
| color = #000000
 +
| text = '''注意: ''' 最新版が WordPress.org の日本語ドキュメントに追加されています。詳しくは、https://ja.wordpress.org/support/article/creating-a-static-front-page/ をご覧ください。
 +
}}
  
__TOC__
+
{{CheckTrans}}
By default, WordPress shows your most recent Posts on the front page of your site. But many WordPress users want to have a '''static front page''' or '''splash page''' as the front page instead. This "static front page" look is common for those who wish to not have a "blog" look to their site, giving it a more CMS (content management system) feel.
+
  
When you create a static front page for your site, you must also create a way for WordPress to show your most recent posts in a "virtual directory" called <code>blog</code>, <code>news</code>, or whatever else you choose to call it. This is true whether or not you are actually using Posts in WordPress.
+
WordPress はデフォルトのとき、サイトのフロントページに最近の投稿を日付の逆順で表示します。一方で WordPress ユーザーの多くがフロントページの代わりに「静的フロントページ」または「スプラッシュページ」を使いたいと思っています。この「静的フロントページ」は、サイトのフロントページに固定した情報や歓迎メッセージを載せておきたいユーザーに馴染みのある見せ方です。
  
Unlike a traditional WordPress "blog" front page, featuring the [[The Loop|The WordPress Loop]], which generates a list of your most recent posts, the '''static front page''' is a customized [[Pages|Page]] that displays static content. It can be customized to direct people to featured content, or highlight posts, articles, categories, or contributors.
+
サイトのフロントページのルック&フィールは、ユーザーの選択と WordPress テーマの機能とオプションの組み合わせで決まります。
  
== Creating a Static Front Page <span id="Creating_a_Static_Front_Page"></span>==
+
WordPress のレイアウトと構造には 4 つのモデルがあり、そのうち 3 つが静的フロントページを利用できます。
  
Creating a virtual static front page does not require editing or coding of files or templates. Using the default configuration for a "static front page" in WordPress does not remove the sidebar or change the look of the entire site, just the content area.
+
# '''ブログ:''' 伝統的なフロントページ形式で、投稿を日付の逆順に並べたものです。
 +
# '''静的フロントページ:''' 伝統的な「静的 HTML サイト」モデルです。固定されたフロントページがあり、コンテンツは固定ページで見せます。投稿、カテゴリー、タグを使うことはほとんどありません。
 +
# '''静的フロントページとブログ:''' このモデルはサイトの紹介や「ようこそ」としてフロントページがあり、さらに投稿を管理するブログがあります。固定ページは時間にかかわらない連絡先や自己紹介などのコンテンツを表示します。
 +
# '''動的フロントページ:''' ''統合''モデルともよばれるダイナミックなサイトデザインです。静的フロントページとブログを持ちますが、フロントページの内容が動的に変わります。静的コンテンツとブログ(固定ページと投稿)のコンビネーションで作られることもあります。この例として、WordPress の Twenty-Eleven テーマに Showcase ページテンプレートがあります。これは、先頭に最新の投稿(ひとつ)の全文または抜粋があり、次に新しい投稿(複数)のタイトルが続きます。さらに先頭固定表示にセットされた投稿のスライダーを最新投稿の上に表示するオプションがあり、コンテンツを動的にミックスしたフロントページを表示します。
  
To create the static front page, go to the WordPress [[管理パネル|Administration Panels]].
+
どのレイアウト構造を選んでも、WordPress に静的フロントページをセットアップする手順は基本的に同じです。
  
# '''Create two WordPress [[Pages]] from the "Add New Page" panel.'''
+
<div id="WordPress_Static_Front_Page_Process">
## Title one as "Home" (or another name) as your "static" front page.
+
== WordPress の静的フロントページの扱い ==
### Set the "Home" template to the default template or any custom template.
+
</div>
### Add content you would like to see within the content area of the "Home" page.
+
### Publish the Page.
+
## Title the second one as "Blog" (or you could call it "News", "Articles", etc.). This page will be a place-holder for showing the Posts on your site.
+
### Do not use a custom Page template for this page!
+
### '''DO NOT add content''' to the Blog Page. Leave it blank. Any content here will be ignored -- only the Title is used.
+
### Publish the Page.
+
# [[Image:options-reading.png|right|thumb|Settings Reading SubPanel]]'''Go to [[管理パネル]] > [[管理パネル#Settings|設定]] > [[Settings Reading SubPanel|表示設定]].'''
+
## Set which page will be designated the "front" page. Choose from display your latest blog posts on the "Blog" Page and "static page" for the "Home" Page.
+
## Save changes.
+
# '''Enable "[[Using Permalinks|Permalinks]]"''' to show the "page title" in the address, since <code>/index.php?p=423</code> defeats the purpose of making a static front page.
+
  
While we are calling this a "static front page," you can change the content on that web page at any time by editing the [[Pages|Page]].
+
WordPress サイトに静的フロントページを作るために重要なステップが 2 つあります。
  
==== The Front Page Conditional Tag <span id="The_Front_Page_Conditional_Tag"></span>====
+
# フロント[[固定ページ|ページ]]を指定する
 +
# 投稿[[固定ページ|ページ]]を指定する(ブログページ)
  
; <tt>is_front_page()</tt> : When it is the front of the site displayed, whether it is posts or a [[Pages|Page]]. Returns true when the main blog page is being displayed and the '[[管理パネル#Settings|設定]] > [[Settings Reading SubPanel|表示設定]] ->Front page displays' is set to "Your latest posts", '''or''' when '[[管理パネル#Settings|設定]] > [[Settings Reading SubPanel|表示設定]] ->Front page displays' is set to "A static page" and the "Front Page" value is the current [[Pages|Page]] being displayed.
+
[[File:static_front_page_setting.png]]
  
==Troubleshooting Themes <span id="Troubleshooting_Themes"></span>==
+
サイトのフロントページに指定した固定ページは、読者に知らせたい静的な情報を表示します。例えば「ようこそ」ページや、使い方の説明、おすすめコンテンツ、特定の投稿・記事・カテゴリー・寄稿者などのページへ読者を誘導するようにカスタマイズできます。
  
Not all WordPress Themes will easily convert to a static front page. Here are some troubleshooting tips to ensure the WordPress Theme you choose will work.
+
サイトのブログページ(投稿ページ)に指定した固定ページは投稿を日付の逆順に表示します。先頭固定表示にセットされた投稿はいつも並び順の先頭にあり、投稿コンテンツはカテゴリーやタグにもとづいてナビゲーションや構造化します。
  
===Navigation Bars <span id="Navigation_Bars"></span>===
+
{{Message|
 +
| background = #FCECAD
 +
| border = #CCCCCC
 +
| color = #000000
 +
| text = 一部の WordPress テーマは、カスタマイズ済み固定ページテンプレートを含む「フロントページ」タイプの特別なセットアップやオプションを提供します。この記事は静的フロントページを作成する標準的な方法を説明します。WordPress テーマに固有の詳細についてはテーマの説明書を見てください。}}
  
Some themes have top navigation bar containing links to Pages. By default most themes set "Home" as a link to the home page - in this case the static front page. Since you have created a separate page with the title "Home", there is a likelihood of another link text appearing as "Home".
+
<div id="Creating_a_Static_Front_Page">
 +
== 静的フロントページの作成 ==
 +
</div>
  
To change it, edit the appropriate [[Templates|template file]] featuring the code of the navigation bar with the template tag <code>[[テンプレートタグ/wp_list_pages|wp_list_pages]]</code>. Set the parameters to change the link title.
+
<!-- {{管理パネルガイド|ページ}} 並び替えキーが重複するため削除 gblsm 4-July-2015 -->
 +
静的フロントページの作成に、ファイルやテンプレートの編集やコーディングは不要です。<!-- Creating a virtual static front page does not require editing or coding of files or templates. -->WordPress の「静的フロントページ」用のデフォルト設定は、サイドバーを削除したりサイト全体の外観を変えたりせず、本文領域のみを変えます。
  
{{原文|Creating a Static Front Page|85261}}<!-- 15:20, 3 April 2010 Bono 版 -->
+
以下の例で固定ページに付ける名前は web の標準的な名前ですが、別のタイトルを付けても構いません。
  
 +
静的フロントページを作るには、最初に WordPress の[[管理画面]]を開きます。
 +
 +
# '''フロントページの作成:''' [[管理画面#Pages|固定ページ]] &raquo; [[固定ページ|新規追加]] を選択します。
 +
#* タイトルを「ホーム」にします。
 +
#*# WordPress テーマがフロントページの外観を変えるオプションを提供する場合、'''ページ属性'''メタボックスの'''テンプレート'''から選択します。
 +
#*# 静的フロントページの本文領域に表示したい内容を記入します。動的フロントページの場合は空のままにします。
 +
#*# このページを公開します。
 +
# '''ブログページの作成:''' ブログを追加する場合、もう一度、固定ページの [[固定ページ|新規追加]] を選択します。
 +
#* タイトルを「ブログ」(または「ニュース」や「記事」)などの適切な名前にします。
 +
#*# '''このページにはカスタムページテンプレートを使わないでください。''' テーマがこのページを表示(生成)するとき、テンプレートファイルの <tt>home.php</tt> または <tt>index.php</tt> が使われます。
 +
#*# ブログページには'''本文を記入しません'''。空欄のままにします。もし本文を記入しても無視され、タイトルだけが使われます。
 +
#*# このページを公開します。[[Image:options-reading.png||thumbnail|right|Reading panel]]
 +
# [[管理画面]] &raquo; [[管理画面#Settings|設定]] &raquo; [[Settings Reading SubPanel|表示設定]] を開きます。
 +
#* '''フロントページの表示''' の '''固定ページ''' にチェックを入れます。
 +
#*# '''フロントページ''' のドロップダウンメニューから、先ほど作成した「ホーム」を選びます。
 +
#*# '''投稿ページ''' のドロップダウンメニューから、先ほど作成した「ブログ」(またはあなたが付けた名前)を選びます。もしサイトで投稿を使用しないなら何も選択せずにおきます。
 +
#*# 変更を保存します。
 +
# '''参考:'''URL が <code>/index.php?p=423</code> のような形式では静的フロントページを作る目的に合わない場合、URL にページスラッグを使うことができます。それには、'''「[[Using Permalinks|パーマリンク]]」を有効にします'''。
 +
 +
これを「静的フロントページ」と呼んでいますが、そのページの本文はいつでも[[Pages|固定ページ]]の編集によって変更できます。
 +
 +
<div id="Theme_Development_for_Custom_Front_Page_Templates">
 +
 +
== カスタムフロントページ用テンプレートを持つテーマの作成 ==
 +
</div>
 +
 +
<div id="Theme_Template_Files">
 +
=== テーマのテンプレートファイル ===
 +
</div>
 +
 +
静的フロントページ機能を持つテーマテンプレートファイルを作成するには、WordPress の[[テンプレート階層]]の理解が必要です。
 +
 +
<tt>front-page.php</tt> テンプレートファイルがあれば、WordPrss はサイトのフロントページにいつもそれを使います。<tt>front-page.php</tt> がなければ、「[[管理画面#Reading|設定]] > [[管理画面/表示設定|表示設定]] -> フロントページの表示」のユーザー設定にもとづいて、WordPress が使うテンプレートファイルを決めます。
 +
 +
* '''最新の投稿:''' [[テンプレート階層#Home_Page_display|ブログ投稿インデックス]] のテンプレート階層: <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>
 +
 +
サイトのフロントページ用カスタムテンプレートを作るには、次のいずれかをテーマに含めます:
 +
 +
* <tt>front-page.php</tt>
 +
* A [[ページテンプレート#Custom_Page_Template|カスタムページテンプレート]](例えばをおすすめコンテンツ用に <tt>template-featured.php</tt>)
 +
 +
<div id="Custom_Blog_Posts_Index_Page_Template">
 +
==== カスタムブログ投稿インデックスページ用テンプレート ====
 +
</div>
 +
 +
ブログ投稿インデックス用のカスタムテンプレートを作るには、次のファイルをテーマに含めます:
 +
 +
* <tt>home.php</tt>
 +
 +
ブログ投稿インデックスに使えるのは <tt>home.php</tt> テンプレートファイルだけです。2 つ理由があるので、カスタムページテンプレート(例えば <tt>template-blog.php</tt>)を使わないでください:
 +
 +
# 静的フロントページ機能を適切に設定すると、「投稿ページ」で選んだ固定ページにカスタムページテンプレートが指定されていても、WordPress はブログ投稿インデックスを表示するのにそのカスタムページテンプレートを使いません。WordPress は <tt>home.php</tt> または <tt>index.php</tt> のどちらか''だけ''を使います。
 +
# 同じカスタムページテンプレートが「投稿ページ」で選んでいない固定ページにも指定されていると、ブログ投稿インデックスのループのページネーションは正しく動作しません。
 +
 +
<div id="Contextual_Conditional_Tags">
 +
 +
=== 条件分岐タグ ===
 +
</div>
 +
 +
; <tt>[[関数リファレンス/is_front_page|is_front_page()]]</tt> : この[[条件分岐タグ]]はサイトのフロントページが表示されているかチェックします。サイトのフロントページが表示中なら true を返します。「[[管理画面#Reading|設定]] > [[管理画面/表示設定|表示設定]] -> フロントページの表示」が「最新の投稿」と「固定ページ」のどちらであるかは無関係です。
 +
 +
; <tt>[[関数リファレンス/is_home|is_home()]]</tt> : この[[条件分岐タグ]]はブログ投稿インデックスが表示されているかチェックします。ブログ投稿インデックスページが表示中なら true を返します。つまり次のいずれかの場合です。
 +
:* サイトのフロントページが表示中で、「[[管理画面#Reading|設定]] > [[管理画面/表示設定|表示設定]] -> フロントページの表示」が「最新の投稿」。
 +
:* 「[[管理画面#Reading|設定]] > [[管理画面/表示設定|表示設定]] -> フロントページの表示」が「固定ページ」で、「投稿ページ」プルダウンで選ばれた[[固定ページ]]が表示中。
 +
 +
サイトのフロントページが表示中で、「[[管理画面#Reading|設定]] > [[管理画面/表示設定|表示設定]] -> フロントページの表示」が「最新の投稿」である場合、<tt>is_front_page()</tt> と <tt>is_home()</tt> は両方とも true を返します。
 +
 +
<div id="Configuration_of_front-page.php">
 +
=== <tt>front-page.php</tt> の設定 ===
 +
</div>
 +
 +
<tt>front-page.php</tt> テンプレートファイルが存在すると、「[[管理画面#Reading|設定]] > [[管理画面/表示設定|表示設定]] -> フロントページの表示」が「最新の投稿」と「固定ページ」のどちらであっても、それがサイトのフロントページに使われます。そのためテーマは両方のオプションを考慮して、サイトのフロントページに固定ページとブログ投稿インデックスのどちらかを表示させなければなりません。そうするには、いくつか方法があります。
 +
 +
<div id="Conditional_display_within_front-page.php">
 +
==== <tt>front-page.php</tt> 内での表示切り替え ====
 +
</div>
 +
 +
<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]] を使います。
 +
 +
方法 1: カスタムコンテンツをそのまま <tt>front-page.php</tt> 内に書きます:
 +
<pre>
 +
if ( 'posts' == get_option( 'show_on_front' ) ) {
 +
    include( get_home_template() );
 +
} else {
 +
    // カスタムコンテンツのマークアップをここに書く
 +
}
 +
</pre>
 +
 +
方法 2: ページテンプレートのどれかを読み込みます:
 +
<pre>
 +
if ( 'posts' == get_option( 'show_on_front' ) ) {
 +
    include( get_home_template() );
 +
} else {
 +
    include( get_page_template() );
 +
}
 +
</pre>
 +
 +
<div id="Filtering_frontpage_template">
 +
==== フィルター <tt>frontpage_template</tt> を使う ====
 +
</div>
 +
 +
サイトのフロントページに固定ページ(カスタムコンテンツ)またはブログ投稿インデックスを表示させるもうひとつの方法は、<tt>front-page.php</tt> へ条件判定コードを入れずに、[[関数リファレンス/get_query_template#Notes|<tt>frontpage_template</tt> フィルター]] /[[:en:Function_Reference/get_query_template|en]] を使います。次のようにコールバックを <tt>functions.php</tt> へ追加します:
 +
 +
<pre>
 +
function themeslug_filter_front_page_template( $template ) {
 +
    return is_home() ? '' : $template;
 +
}
 +
add_filter( 'frontpage_template', 'themeslug_filter_front_page_template' );
 +
</pre>
 +
 +
こうすると、ブログ投稿インデックスを表示するとき WordPress は <tt>front-page.php</tt> テンプレートファイルを完全にバイパスします。
 +
 +
<div id="Adding_custom_query_loops_to_front-page.php">
 +
 +
=== <tt>front-page.php</tt> にカスタムクエリループを追加 ===
 +
</div>
 +
 +
<tt>front-page.php</tt> テンプレートファイルが次のようなデフォルトの[[ループ]]を含む場合:
 +
<pre>
 +
<?php
 +
if ( have_posts() ) : while ( have_posts() ) : the_post();
 +
    // 投稿について何かする
 +
endwhile; else:
 +
    // 投稿が見つからない
 +
endif;
 +
</pre>
 +
 +
このループは「[[管理画面#Reading|設定]] > [[管理画面/表示設定|表示設定]] -> フロントページの表示」の「投稿ページ」で選ばれた固定ページの本文を処理します。
 +
 +
カスタムループ(最新ブログ投稿、カスタム/おすすめコンテンツなど)を表示するには、[[Class_Reference/WP_Query|WP_Query]] を呼び出して第 2 のループ用クエリを追加します。例えば最新ブログ投稿を 3 つ表示するには:
 +
 +
<pre>
 +
$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;
 +
</pre>
 +
 +
<div id="Pagination">
 +
=== ページネーション ===
 +
</div>
 +
 +
静的フロントページはページネーションを想定していません。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>
 +
 +
{{原文|Creating a Static Front Page|146824}} <!-- 10:49, 23 September 2014 NateWr 版 -->
 +
 +
{{DEFAULTSORT:せいてきふろんとぺーじのさくせい}}
 
[[Category:初心者向けトピック]]
 
[[Category:初心者向けトピック]]
 
[[Category:設置]]
 
[[Category:設置]]
 
[[Category:デザインとレイアウト]]
 
[[Category:デザインとレイアウト]]
 
[[Category:上級トピック]]
 
[[Category:上級トピック]]
{{Copyedit}}
 
  
 
[[en:Creating a Static Front Page]]
 
[[en:Creating a Static Front Page]]
 +
[[pt-br:Criando uma Página Inicial Estática]]

2021年8月20日 (金) 15:16時点における最新版

注意: 最新版が WordPress.org の日本語ドキュメントに追加されています。詳しくは、https://ja.wordpress.org/support/article/creating-a-static-front-page/ をご覧ください。

この項目「静的フロントページの作成」は、翻訳チェック待ちの項目です。加筆、訂正などを通して、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. フロントページの作成: 固定ページ » 新規追加 を選択します。
    • タイトルを「ホーム」にします。
      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

ブログ投稿インデックスに使えるのは 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 へ条件判定コードを入れずに、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 にカスタムクエリループを追加

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