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

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

提供: WordPress Codex 日本語版
2015年5月25日 (月) 11:29時点におけるMiccweb (トーク | 投稿記録)による版 (改名終わり)

移動先: 案内検索

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

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.

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

静的フロントページの作成に、ファイルやテンプレートの編集やコーディングは不要です。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 にページスラッグを使うことができます。それには、パーマリンク」を有効にします

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

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

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

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」が、その前に書かれている既定のソートキー「かんりかめん」を上書きしています。