固定ページテンプレート

2020.04.02 2020.04.02

TOPICS

翻訳元記事はこちらです。

固定ページテンプレートは、特定のページやページのグループに適用できる特定のタイプのテンプレートファイルです。

WordPress 4.7では、ページテンプレートはすべての記事タイプに対応しています。特定の記事タイプにページテンプレートを設定する方法については、以下の例を参照してください。

固定ページテンプレートは特定の種類のテンプレートファイルなので、ページテンプレートの特徴をいくつか紹介します。

ページテンプレートの用途

ページテンプレートは、あなたのサイトの動的なコンテンツをページ上に表示します。
あなたのサイトの他の部分とは全く異なる、あなたのホームページを特定の方法で表示したいと思うかもしれません。または、ページの一箇所に投稿へのリンクをつけたアイキャッチ画像を表示し、ページの他の場所で最新の投稿のリストを表示して、カスタムナビゲーションを使用したい場合があります。
これらのことを実現するためにページテンプレートを使用することができます。

ここでは、ユーザーが管理画面から選択できるページテンプレートを構築する方法を紹介します。

例えば、以下のようにページテンプレートを作成できます。

テンプレート階層内のページテンプレート

ウェブサイトを閲覧すると、WordPress はそのページのレンダリングに使用するテンプレートを選択します。先ほど「テンプレートの階層」で学んだように、WordPress は以下の順番でテンプレートファイルを探します。

  1. ページテンプレート – ページにカスタムテンプレートが割り当てられている場合、WordPress はそのファイルを探し、見つかった場合はそのファイルを使用します。
  2. page-{slug}.php – カスタムテンプレートが割り当てられていない場合、WordPressはページのスラッグを含む専用のテンプレートを探して使用します。
  3. page-{id}.php – ページのスラッグを含む専用テンプレートが見つからない場合、WordPressはページのIDで名前が付けられた専用テンプレートを探して使用します。
  4. page.php – ページのIDを含む専用テンプレートが見つからない場合、WordPressはテーマのデフォルトページテンプレートを探して使用します。
  5. singular.php – page.php が見つからない場合、WordPress は記事の種類に関係なく、個別の記事に使用されているテーマのテンプレートを探して使用します。
  6. index.php – 特定のページテンプレートが割り当てられていない、または見つからない場合、WordPress はデフォルトでテーマのインデックスファイルを使用してページをレンダリングします。

paged.phpというWordPressで定義されたテンプレートもあります。これはページ投稿タイプではなく、アーカイブの複数ページを表示させるためのものです。

ページテンプレートの目的とユーザーコントロール

テーマのカスタムページテンプレートを作ることを計画している場合は、いくつかのことを決めておく必要があります。

テンプレート名を持つすべてのページテンプレートは、ユーザーがページを作成または編集する際に選択することができます。利用可能なテンプレートのリストは、「固定ページ」＞「新規追加」＞「ページ属性」＞「テンプレート」で確認できます。そのため、WordPressのユーザーは、テンプレート名のついたページテンプレートを任意に選択することができますが、これは意図していないかもしれません。

例えば、「About」ページに特定のテンプレートを使用したい場合、そのページテンプレートを「About Template」と名付けるのは適切ではないかもしれません。
代わりに、単一の使用テンプレートを作成し、WordPress はユーザーが「About」ページを訪れたときにはいつでも適切なテンプレートを使ってページをレンダリングします。

逆に言えば、多くのテーマには、ページに何列のカラムを持つかを選択する機能が含まれています。これらのオプションのそれぞれは、グローバルに利用できるページテンプレートです。あなたのWordPressユーザーにこのグローバルオプションを与えるためには、各オプションのページテンプレートを作成し、それぞれにテンプレート名を付ける必要があります。

テンプレートがグローバル利用なのか単発利用なのかは、ファイルの名前の付け方やコメントの有無で判断します。

一見、単一のユースケースに見えても、テンプレートをグローバルに利用できるようにしておくことが適切な場合もあります。
リリース用のテーマを作成しているとき、ユーザーが自分のページにどんな名前をつけるかを予測するのは難しいことがあります。
ポートフォリオページは良い例です。すべてのWordPressユーザーがポートフォリオに同じ名前をつけたり、同じページIDを持っているわけではないのに、そのテンプレートを使いたいと思うかもしれません。

ページテンプレートのファイル構成

「テーマファイルの整理」で説明したように、WordPress はサブフォルダ「page-templates」を認識しています。そのため、グローバルページのテンプレートをこのフォルダに保存しておくと整理整頓に役立ちます。

専用のページテンプレートファイル（一度だけ使用するために作成されたもの）は、サブフォルダに置くことはできませんし、子テーマを使用している場合は、親テーマのフォルダに置くこともできません。

グローバルに使用するカスタムページテンプレートの作成

どのページでもグローバルに使用できるテンプレートや、複数のページで使用できるテンプレートが必要になることもあるでしょう。 開発者の中には、テンプレートをファイル名のプレフィックスでグループ化する人もいます。

重要! WordPressはこのファイルを、あなたのサイトの1つのページだけに適用するための特殊なテンプレートとして解釈するため、接頭語としてpage- を使用しないでください。

テーマのファイル名の規則と使用できないファイル名については、テーマのファイル名の予約語を参照してください。

新しいページテンプレートを作成するための迅速で安全な方法は、page.phpのコピーを作成し、新しいファイル名を明確なファイル名にすることです。
この方法では、他のページのHTML構造から始めて、必要に応じて新しいファイルを編集することができます。

グローバルテンプレートを作成するには、ファイルの先頭にテンプレート名を記載したPHPコメントを書きます。

<?php /* Template Name: Example Template */ ?>

WordPressユーザーがページを編集しているときに名前が見えるように、テンプレートが何をするのかを説明する名前をつけるのは良いアイデアです。
例えば、テンプレートに「ホームページ」「ブログ」「ポートフォリオ」などの名前をつけることができます。

TwentyFourteenテーマの例は、Full Width Pageというページテンプレートを作成します。

<?php
/**
* Template Name: Full Width Page
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/

テーマのフォルダ（例：page-templates）にファイルをアップロードしたら、管理者ダッシュボードの「固定ページ」＞「編集」画面に移動します。

属性のところにテンプレートのセレクトボックスが表示されます。 これは、ユーザーがグローバルページテンプレートにアクセスできる場所です。

特定のページのカスタムページテンプレートを作成する

テンプレート階層のページで述べたように、特定のページ用のテンプレートを作成することができます。 特定のページ用のテンプレートを作成するには、既存のpage.phpファイルをコピーして、ページのスラッグやIDで名前を変更します。

  1. page-{slug}.php
  2. page-{ID}.php

例えば あなたのAboutページには「about」というスラッグと6というIDがあります。 有効化されているテーマのフォルダにpage-about.phpやpage-6.phpという名前のファイルがある場合、WordPressは自動的にそのファイルを見つけて、Aboutページをレンダリングするために使用します。

使用するには、専用のページテンプレートがテーマのフォルダ（例：/wp-content/themes/my-theme-name/ ）にある必要があります。

特定の投稿タイプのページテンプレートを作成する

デフォルトでは、カスタムページテンプレートは「固定ページ」の投稿タイプに利用できます。

特定の投稿タイプにページテンプレートを作成するには、テンプレート名の下に、テンプレートがサポートする投稿タイプを指定して行を追加します。

<?php
/*
Template Name: Full-width layout
Template Post Type: post, page, event
*/
// Page code here...

「固定ページ」以外の投稿タイプにページテンプレートを追加する機能は、WordPress 4.7からのみサポートされています。

少なくとも1つのテンプレートが投稿タイプに対して存在する場合、’page-attributes’などの投稿タイプのサポートを追加する必要はなく、’Post Attributes’メタボックスがバックエンドに表示されます。’Post Attributes’ ラベルは、投稿タイプを登録する際に ‘attributes’ ラベルを使って投稿タイプごとにカスタマイズすることができます。

下位互換性

投稿タイプのテンプレートをサポートしたテーマを公開したいとしましょう。4.7以前のWordPressのバージョンでは、通常の投稿にしか機能しないにもかかわらず、Template Post Typeヘッダーを無視して、ページテンプレートのリストにテンプレートが表示されてしまいます。これを防ぐには、theme_page_templatesフィルターにフックしてリストから除外することができます。以下に例を示します。

/**
* Hides the custom post template for pages on WordPress 4.6 and older
*
* @param array $post_templates Array of page templates. Keys are filenames, values are translated names.
* @return array Filtered array of page templates.
*/
function makewp_exclude_page_templates( $post_templates ) {
if ( version_compare( $GLOBALS['wp_version'], '4.7', '<' ) ) {
unset( $post_templates['templates/my-full-width-post-template.php'] );
}
return $post_templates;
}
add_filter( 'theme_page_templates', 'makewp_exclude_page_templates' );

そうすることで、完全な下位互換性を維持しながら、WordPress 4.7以降のカスタム投稿タイプテンプレートをサポートすることができます。

theme_page_templatesは、実際には動的な theme_{$post_type}_templates フィルタであることに注意してください。フック名の$post_typeという動的な部分は、テンプレートがサポートしている投稿タイプを指します。例えば、theme_product_templatesにフックして、productの投稿タイプのテンプレートのリストをフィルタリングすることができます。

条件付きタグをページテンプレートで使用する

テーマのpage.phpファイルの中にある条件付きタグを使って、ページごとに小さな変更を加えることができます。
例えば、以下のコードの例では、フロントページには header-home.php ファイルをロードしますが、About ページには別のファイル (header-about.php) をロードし、他のすべてのページにはデフォルトの header.php を適用しています。

if ( is_front_page() ) :
get_header( 'home' );
elseif ( is_page( 'About' ) ) :
get_header( 'about' );
else:
get_header();
endif;

ページテンプレートの識別

テンプレートで body_class() 関数を使用している場合、WordPress は、投稿タイプのクラス名（page）、ページの ID（page-id-{ID}）、使用しているページテンプレート名を body タグのクラス名に設定します。
デフォルトのpage.phpの場合、生成されるクラス名はpage-template-defaultです。

<body class="page page-id-6 page-template-default">

特殊なテンプレート (page-{slug}.php や page-{ID}.php) も、独自の body クラスではなく、page-template-default クラスを取得します。

カスタムページテンプレートを使用している場合、特定のテンプレートを命名するクラスとともに、クラスにpage-templateが設定されます。
例えば、カスタムページテンプレートファイルの名前が以下のようになっている場合。

<?php
/* Template Name: My Custom Page */

HTMLは以下のように生成されます。

<body class="page page-id-6 page-template page-template-my-custom-page-php">

bodyタグに適用されているpage-template-my-custom-page-phpクラスに注目してください。

ページテンプレートの関数

これらのWordPressに組み込まれている機能や方法は、ページテンプレートを使った作業に役立ちます。