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

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(「Creating a Static Front Page」節を翻訳+補足・調整、見出しの翻訳)
(en:Creating a Static Front Page 10:49, 23 September 2014 NateWr 版を反映。リンク先ページを調整。)
3行目: 3行目:
  
 
__TOC__
 
__TOC__
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.  
+
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.
  
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.
+
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.  
  
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.  
+
There are four models for WordPress layout and structure, three that include static front pages.
  
== 静的フロントページの作成 <span id="Creating_a_Static_Front_Page"></span>==
+
# '''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.
 +
# '''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.
 +
 
 +
No matter which layout structure you choose, the process of setting up the static front page in WordPress is basically the same.
 +
 
 +
<div id="WordPress_Static_Front_Page_Process">
 +
== WordPress の静的フロントページの扱い ==
 +
</div>
 +
 
 +
There are two steps critical to creating a static front page on your site with WordPress.
 +
 
 +
# Assign the Front [[Pages|Page]]
 +
# Assign the Posts [[Pages|Page]] (blog page)
 +
 
 +
[[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|
 +
| background = #FCECAD
 +
| border = #CCCCCC
 +
| 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.}}
 +
 
 +
<div id="Creating_a_Static_Front_Page">
 +
== 静的フロントページの作成 ==
 +
</div>
  
 
{{管理パネルガイド|ページ}}
 
{{管理パネルガイド|ページ}}
 
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.  
 
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.  
  
<!--
+
以下の例で固定ページに付ける名前は web の標準的な名前ですが、別のタイトルを付けても構いません。
To create the static front page, go to the WordPress [[管理パネル|Administration Panels]].  
+
 
-->
+
静的フロントページを作るには、最初に WordPress の[[管理画面]]を開きます。
静的フロントページを作るには、WordPressの[[管理パネル]]を開きます。
+
 
 +
# '''フロントページの作成:''' [[管理画面#Pages|固定ページ]] &raquo; [[Pages Add New SubPanel|新規追加]]/[[:en:Pages Add New Screen|en]] を選択します。
 +
#* タイトルを「ホーム」にします。
 +
#*# WordPress テーマがフロントページの外観を変えるオプションを提供する場合、'''ページ属性'''メタボックスの'''テンプレート'''から選択します。
 +
#*# 静的フロントページの本文領域に表示したい内容を記入します。動的フロントページの場合は空のままにします。
 +
#*# このページを公開します。
 +
# '''ブログページの作成:''' ブログを追加する場合、もう一度、固定ページの [[Pages Add New SubPanel|新規追加]]/[[:en:Pages Add New Screen|en]] を選択します。
 +
#* タイトルを「ブログ」(または「ニュース」や「記事」)などの適切な名前にします。
 +
#*# '''このページにはカスタムページテンプレートを使わないでください。''' テーマがこのページを表示(生成)するとき、テンプレートファイルの <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>
 +
 
 +
Developing Theme template files that incorporate the static front page feature requires understanding of the WordPress [[Template Hierarchy]].
 +
 
 +
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:
 +
 
 +
* '''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>
 +
* '''Your latest posts:''' WordPress uses the [[Template_Hierarchy#Home_Page_display|Blog Posts Index]] template hierarchy: <tt>home.php</tt>, <tt>index.php</tt>
 +
 
 +
<div id="Custom_Site_Front_Page_Template">
 +
==== サイトのカスタムフロントページ用テンプレート ====
 +
</div>
 +
 
 +
To create a custom site front page template, include either of the following in the Theme:
 +
 
 +
* <tt>front-page.php</tt>
 +
* A [[Page_Templates#Custom_Page_Template|Custom Page Template]] (e.g. <tt>template-featured.php</tt> for featured content)
 +
 
 +
<div id="Custom_Blog_Posts_Index_Page_Template">
 +
==== カスタムブログ投稿インデックスページ用テンプレート ====
 +
</div>
 +
 
 +
To create a custom blog posts index template, include the following in the Theme:
 +
 
 +
* <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:
 +
 
 +
# 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>.
 +
# 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>
 +
 
 +
; <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_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.
 +
 
 +
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.
 +
 
 +
<div id="Configuration_of_front-page.php">
 +
=== <tt>front-page.php</tt> の設定 ===
 +
</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. 
 +
 
 +
<div id="Conditional_display_within_front-page.php">
 +
==== <tt>front-page.php</tt> 内での表示切り替え ====
 +
</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]].
 +
 
 +
Method 1: including custom content directly within <tt>front-page.php</tt>:
 +
<pre>
 +
if ( 'posts' == get_option( 'show_on_front' ) ) {
 +
    include( get_home_template() );
 +
} else {
 +
    // Custom content markup goes here
 +
}
 +
</pre>
 +
 
 +
Method 2: including any page template:
 +
<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>
 +
 
 +
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>:
 +
 
 +
<pre>
 +
function themeslug_filter_front_page_template( $template ) {
 +
    return is_home() ? '' : $template;
 +
}
 +
add_filter( 'front_page_template', 'themeslug_filter_front_page_template' );
 +
</pre>
 +
 
 +
This method causes WordPress to bypass the <tt>front-page.php</tt> template file altogether when the blog posts index is being displayed.
  
# '''[[管理パネル#Pages|ページ]] > [[Pages Add New SubPanel|新規追加]]画面で2つの[[Pages|WordPressページ]]を作成します'''。<!-- '''Create two WordPress [[Pages]] from the "Add New Page" panel.''' -->
+
<div id="Adding_custom_query_loops_to_front-page.php">
## 「静的」フロントページ用: 「ホーム」(または他の名前)というタイトルのページ<!-- Title one as "Home" (or another name) as your "static" front page. -->
+
=== <tt>front-page.php</tt> にカスタムクエリループを追加 ===
### 「ホーム」のページテンプレートにデフォルトテンプレートまたは他のカスタムテンプレートを設定します。<!-- 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. -->
+
## ブログ表示用: 「ブログ」(または「ニュース」「記事」など)というタイトルのページ<br />このページはサイトの投稿をブログ形式で表示するための場所(プレースホルダ)になります。<!-- 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. -->
+
### ページ名はメニュー表示に、ページスラッグはブログページのURLに使われます。URLを簡潔にしたいときはスラッグを指定しましょう。(例)「blog」「news」「articles」など
+
### このページにはカスタムページテンプレートは使わないこと!<!-- 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]]'''[[管理パネル]] > [[管理パネル#Settings|設定]] > [[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. -->
+
##* フロントページ: 上記1-1で作成した「ホーム」ページ
+
##* 投稿ページ: 上記1-2で作成した「ブログ」ページ
+
## 変更を保存します。<!-- Save changes. -->
+
# URLが <code>/index.php?p=423</code> では静的フロントページ作成の目的に合わないので、URLにページスラッグを使うよう、'''「[[Using Permalinks|パーマリンク]]」を有効にします'''。<!-- '''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. -->
+
  
これを「静的フロントページ」と呼んでいますが、フロントページの本文はいつでも[[Pages|ページ]]の編集によって変更できます。<!-- 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]]. -->
+
If the <tt>front-page.php</tt> template file includes a default [[The Loop|WordPress Loop]], like so:
 +
<pre>
 +
<?php
 +
if ( have_posts() ) : while ( have_posts() ) : the_post();
 +
    // do something
 +
endwhile; else:
 +
    // no posts found
 +
endif;
 +
</pre>
  
==== フロントページ条件分岐タグ <span id="The_Front_Page_Conditional_Tag"></span>====
+
That loop applies to the post content of the static page assigned to '[[Administration_Panels#Reading|Settings]] > [[Settings_Reading_SubPanel|Reading]] ->Posts page'.
  
; <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.
+
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:
  
== テーマの問題解決 <span id="Troubleshooting_Themes"></span>==
+
<pre>
 +
$latest_blog_posts = new WP_Query( array( 'posts_per_page' => 3 ) );
  
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.
+
if ( $latest_blog_posts->have_posts() ) : while ( $latest_blog_posts->have_posts() ) : $latest_blog_posts->the_post();
 +
    // Loop output goes here
 +
endwhile; endif;
 +
</pre>
  
=== ナビゲーションバー <span id="Navigation_Bars"></span>===
+
<div id="Pagination">
 +
=== ページ送り ===
 +
</div>
  
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".  
+
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.
  
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.
+
<div id="Resources">
 +
== リソース ==
 +
</div>
  
{{原文|Creating a Static Front Page|85261}}<!-- 15:20, 3 April 2010 Bono 版 -->
+
{{原文|Creating a Static Front Page|146824}}<!-- 10:49, 23 September 2014 NateWr 版 -->
  
 +
{{DEFAULTSORT:Creating_a_Static_Front_Page}}
 
[[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]]

2015年5月6日 (水) 18:34時点における版

このページ「静的フロントページの作成」は未翻訳です。和訳や日本語情報を加筆してくださる協力者を求めています

ページ名検討中: このページ名「静的フロントページの作成」について改名が提案されています。ご意見をお寄せください。

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.

There are four models for WordPress layout and structure, three that include static front pages.

  1. Blog: This is the traditional front page format with posts featured in reverse chronological order.
  2. 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.
  3. 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.
  4. 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.

No matter which layout structure you choose, the process of setting up the static front page in WordPress is basically the same.

WordPress の静的フロントページの扱い

There are two steps critical to creating a static front page on your site with WordPress.

  1. Assign the Front Page
  2. Assign the Posts Page (blog page)

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.

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.

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

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.

以下の例で固定ページに付ける名前は 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 にページスラッグを使うことができます。それには、パーマリンク」を有効にします

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

カスタムフロントページ用テンプレートを持つテーマの作成

テーマのテンプレートファイル

Developing Theme template files that incorporate the static front page feature requires understanding of the WordPress Template Hierarchy.

On the site front page, WordPress will always use the front-page.php template file, if it exists. If front-page.php does not exist, WordPress will determine which template file to use, depending on the user configuration of 'Settings > Reading ->Front page displays', as follows:

  • A static page: WordPress uses the Static Page template hierarchy: Custom Page Template, page-{id}.php, page-{slug}.php, page.php, index.php
  • Your latest posts: WordPress uses the Blog Posts Index template hierarchy: home.php, index.php

サイトのカスタムフロントページ用テンプレート

To create a custom site front page template, include either of the following in the Theme:

カスタムブログ投稿インデックスページ用テンプレート

To create a custom blog posts index template, include the following in the Theme:

  • home.php

Use only the home.php template file for the blog posts index. Do not use a Custom Page Template (such as template-blog.php) for two reasons:

  1. 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 home.php or index.php.
  2. 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.

条件分岐タグ

is_front_page() 
This Conditional Tag checks if the site front page is being displayed. Returns true when the site front page is being displayed, regardless of whether 'Settings > Reading ->Front page displays' is set to "Your latest posts" or "A static page".
is_home() 
This 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 'Settings > Reading ->Front page displays' is set to "Your latest posts", or when 'Settings > Reading ->Front page displays' is set to "A static page" and the "Posts Page" value is the current Page being displayed.

When the site front page is being displayed and 'Settings > Reading ->Front page displays' is set to "Your latest posts", both is_front_page() and is_home() will return true.

front-page.php の設定

If it exists, the front-page.php template file is used on the site's front page regardless of whether 'Settings > 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.

front-page.php 内での表示切り替え

One way to allow front-page.php to account for both options for 'Settings > Reading ->Front page displays' is to add a conditional inside of front-page.php itself, using get_option( 'show_on_front' ), get_home_template()/en, and get_page_template()/en.

Method 1: including custom content directly within front-page.php:

if ( 'posts' == get_option( 'show_on_front' ) ) {
    include( get_home_template() );
} else {
    // Custom content markup goes here
}

Method 2: including any page template:

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

フィルター frontpage_template を使う

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 front-page.php, is to filter front_page_template/en, by adding a filter callback to functions.php:

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

This method causes WordPress to bypass the front-page.php template file altogether when the blog posts index is being displayed.

front-page.php にカスタムクエリループを追加

If the front-page.php template file includes a default WordPress Loop, like so:

<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
    // do something
endwhile; else:
    // no posts found
endif;

That loop applies to the post content of the static page assigned to 'Settings > Reading ->Posts page'.

To display custom loops (latest blog posts, custom/featured content, etc.), add secondary loop queries using calls to WP_Query. For example, to show the 3 latest blog posts:

$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();
    // Loop output goes here
endwhile; endif;

Static front pages are not intended to be paged. None of the WordPress Previous / Next page link functions work with a static front page. Pagination on a static front page uses the page query variable, not the paged variable. See the WP_Query for details.

リソース

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

警告: 既定のソートキー「Creating_a_Static_Front_Page」が、その前に書かれている既定のソートキー「かんりかめん」を上書きしています。