• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

ページテンプレート

提供: WordPress Codex 日本語版
Page Templatesから転送)
移動先: 案内検索

ページ は WordPress ビルトイン 投稿タイプ の 1つです。通常 Web サイトのほとんどのページは共通のデザインで統一しますが、異なる表示や動作のため、特定のページや専用のデザインが必要な場合もあります。ページテンプレートを使ってこれを簡単に実現できます。

ページテンプレートの選択

Screenshot of Page Attributes module with Template select options pulled down

テーマファイルにはデフォルトのページテンプレート page.php が含まれています。テーマによっては 1個以上のカスタムページテンプレート(例:コンテンツを全幅表示する)が存在する場合もあります。あるいはすでに自身でカスタムテンプレートを作っているかもしれません。

「固定ページを編集」画面: 任意の個別ページに対してカスタムテンプレートを割り当てられます。「固定ページを編集」画面 (「ページの属性」モジュールの一部)の「テンプレート」ドロップダウンリストを使用します:

  1. リストからテンプレート(例: 私のカスタムページ)を選択する。
  2. 更新 ボタン (未公開の場合は 下書きとして保存ボタン) をクリックする。

「固定ページ一覧」画面: 「固定ページ一覧」画面の「クイック編集」、および「一括操作」>「編集」にも「テンプレート」ドロップダウンリストがあります。

「テンプレート」リストが表示されるのは:

  • 有効化されたテーマフォルダーの中に少なくとも 1つのカスタムページテンプレートファイルが必要です。テーマを変更すると、以前有効化されていたテーマのページテンプレートは表示されません。
  • 固定ページの編集画面が表示されている必要があります。ページテンプレートは、投稿やカスタム投稿タイプのデフォルトオプションではありません

ページテンプレートの作成

WordPressにはページを表示する方法がいくつかありますが、いずれも 有効化されたテーマのファイルの編集や追加を伴います。現在の有効化されたテーマが自身で作成したものでない場合、変更するには子テーマを使用してください。直接テーマのファイルを変更すると、テーマがバージョンアップされた際に上書きされてしまいます。

条件分岐タグ

デフォルトテンプレートの編集: ちょっとしたページごとの変更であればテーマの 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();
}

ページテンプレートの特殊化

1 つのページ用のテンプレートの作成: さらに拡張して、ある 1つのページ専用にファイル名にページのスラッグや ID のついた特殊化されたテンプレートファイルを作成できます。

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

例えば、About ページがスラッグ 'about'、ID 6 をもつとします。有効化されたテーマフォルダーの中に、ファイル page-about.php または page-6.php があれば、WordPress は自動的にファイルを見つけ、About ページの表示に使用します。

特殊化されたページテンプレートを使用するには、次の有効化されたテーマフォルダーに存在する必要があります。

/wp-content/themes/my-theme/

特殊化されたページテンプレートはサブフォルダーに置けません。また子テーマ を使用している場合、親テーマフォルダーに置けません

カスタムページテンプレート

すべてのページで使用されるテンプレートの作成: カスタムページテンプレートは複数のページで使用できます(ページテンプレートの選択参照)。カスタムページテンプレートを作成するには新しいファイルを作成し、PHP コメントの「Template Name」で開始してください。以下は構文例です。

<?php
/*
Template Name: 私のカスタムページ
*/

テーマフォルダーにファイルをアップロードすると、「固定ページを編集」画面の「テンプレート」ドロップダウンリストにテンプレート名「私のカスタムページ」が表示されます(このドロップダウンリストの最大幅は 250ピクセルです。長い名前は切り捨てられます)。

素早く、安全に新しいページテンプレートを作成するには、page.phpのコピーを使用します。他のページと共通のHTML構造から始め、必要におうじて編集できます。

カスタムページテンプレートファイルはサブフォルダー内に置けます。また子テーマ を使用している場合、親テーマフォルダーに置けます

ファイル名

テンプレートファイルには、テンプレート名を容易に識別できる名前を付けてください。例えばテンプレート「私のカスタムページ」にはファイル名 my-custom-page.php を付けます。テンプレートにファイル名接頭辞を付けてグループ化する開発者もいます。例: page_my-custom-page.php (注意。page- 接頭辞を使わないでください。WordPress はファイルを特殊化されたページテンプレートとして解釈します。)

テーマファイルの名前付け規約、および使用できないファイル名の情報については、予約されたテーマファイル名を参照してください。

ファイルフォルダー

カスタムページテンプレートを使用するには、有効化されたテーマフォルダー、または親テーマフォルダー、またはそれぞれのサブフォルダーに置く必要があります(FTP参照)。WordPress は以下のすべての場所からカスタムページテンプレートを見つけます。

/wp-content/themes/my-theme/
/wp-content/themes/my-theme/my-templates
/wp-content/themes/my-child-theme
/wp-content/themes/my-child-theme/my-templates
/wp-content/themes/my-parent-theme
/wp-content/themes/my-parent-theme/my-templates

ファイルをカスタムページテンプレートとして認識するには、コメント内の文字列「"Template Name:"」で始める必要があります。以降に他の情報を含められます。

<?php
/*
 * Template Name: 私のカスタムページ
 * Description: 暗めのデザインのページテンプレート
 */

// ここにページを表示するコードを追加

テンプレートタグ のページでは、ページ表示に利用可能な多くのビルトイン WordPress テンプレート関数が紹介されています。

どのページにどのテンプレートが適用されるか?

テンプレート用語

WordPress においては、"テンプレート" に関連する言葉がいくつかあります。

  • テンプレート階層 は WordPress が、要求(例: ユーザーがクリックしたリンクの URL)に応じてテーマのどのテンプレートファイル使用するかを決定するロジックです。

テンプレート階層

WordPress テンプレート階層外観図のうちページテンプレート部分のみ

ユーザーがあるページを要求すると、コアの WordPress コードにはどのテーマテンプレートでページを表示するかのロジックがあります。上の画像は テンプレート階層の詳細で、ロジックを図解しています。

  1. カスタムテンプレート — ページにカスタムテンプレートが割り当てられていれば、WordPress はファイルを探し、見つかればこれを使用します。
  2. page-{slug}.php 見つからなければ、WordPress はページのスラッグで特殊化されたテンプレートファイルを探し、見つかればこれを使用します。
  3. page-{id}.php 見つからなければ、WordPress はページの ID で特殊化されたテンプレートファイルを探し、見つかればこれを使用します。
  4. page.php 見つからなければ、WordPress はテーマのデフォルトのページテンプレートを探し、見つかればこれを使用します。
  5. index.php 見つからなければ、WordPress はテーマの index ファイルを使用します。

(注意: WordPress で定義するテンプレートには paged.php もあります。これは投稿タイプ「Page」では使用されません。アーカイブの複数ページを表示する際に使用されます。)

以下はカスタムページテンプレートファイルの作成例です。注: 使用中の WordPress テーマのテンプレートファイル構造や HTML 構造とは恐らく異なります。

コンテンツを含むアーカイブ

次のページテンプレートは、まずページの内容を表示し、続けて検索フォーム、月別アーカイブ、サイトカテゴリーを表示します。

arc-cont.phpとして保存してください。

<?php
/*
Template Name: Archives with Content
*/

get_header(); ?>
<div id="content" class="widecolumn">
    <?php if (have_posts()) : while (have_posts()) : the_post();?>
    <div class="post">
        <h2 id="post-<?php the_ID(); ?>"><?php the_title();?></h2>
        <div class="entrytext">
            <?php
                global $more;	// 固定ページで more を表示するハック
                $more = 0;
                the_content('<p class="serif">このページの続きを読む »</p>');
            ?>
        </div>
    </div>
    <?php endwhile; endif; ?>
<?php edit_post_link('このページの編集', '<p>', '</p>'); ?>
</div>
<div id="main">
    <?php get_search_form(); ?>
    <h2>月別アーカイブ:</h2>
    <ul>
        <?php wp_get_archives('type=monthly'); ?>
    </ul>   
    <h2>サイトのカテゴリー:</h2>
    <ul>
        <?php wp_list_categories(); ?>
    </ul>
</div>
<?php get_footer(); ?>

投稿のページ

次のカスタムページテンプレートファイルは、ページの内容を表示し、続けて 2つのカテゴリースラッグで指定されたカテゴリーの投稿を表示します。このファイルは Twenty Thirteen テーマの子テーマとして動作するようデザインされています。異なるテーマを使用している場合、このテンプレートの HTML 構造を調整する必要があります。

pageofposts.php として保存し、新しいページに Page of Posts テンプレートを割り当ててください。

<?php
/*
Template Name: Page Of Posts
*/

/* この例は Twenty Thirteen の子テーマでの利用を想定しています。
*  それ以外のテーマの場合、HTML構造を調整してください。
*/

get_header(); ?>

	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">
        <?php 
        /* ループ: the_post は作成したページの内容を取得し、投稿をリストします。
         * 例: 後半部の投稿のリストを説明する文章と、投稿のリスト
         */
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();

              // ページの内容を表示
              get_template_part( 'content', get_post_format() ); 
              wp_reset_postdata();
  
            endwhile;
        endif;

        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

        $args = array(
            // カテゴリーのスラッグで変更してください。
            'category_name' => 'music, videos', 
            'paged' => $paged
        );

        $list_of_posts = new WP_Query( $args );
        ?>
        <?php if ( $list_of_posts->have_posts() ) : ?>
			<?php /* ループ */ ?>
			<?php while ( $list_of_posts->have_posts() ) : $list_of_posts->the_post(); ?>
				<?php // 投稿の内容を表示 ?>
				<?php get_template_part( 'content', get_post_format() ); ?>
			<?php endwhile; ?>

			<?php twentythirteen_paging_nav(); ?>

		<?php else : ?>
			<?php get_template_part( 'content', 'none' ); ?>
		<?php endif; ?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_footer(); ?>

カスタムフィールドの使用例

このページテンプレートはページに割り当てられたカスタムフィールドに指定されたカテゴリーの投稿を表示します。カスタムフィールド「category」の値を取得し、この値をカテゴリーとする投稿を取得します。カテゴリー「イベント」の投稿を表示する場合、ページにカスタムフィールド「category」、値に「イベント」を割り当ててください。注意: このテンプレートは 1ページ毎に 4つの投稿を決め打ちで表示し、それ以上の投稿は古い投稿のページ、新しい投稿のページへのリンクで表示されます。

popwithcustomfields.php として保存し、新しいページに Page Of Posts with Custom Fields テンプレートを割り当ててください。

<?php
/*
Template Name: Page Of Posts with Custom Fields
*/

get_header(); ?>
<div id="content" class="narrowcolumn">
<?php
if ( is_page() ) {
    $category = get_post_meta( $posts[0]->ID, 'category', true );
    $cat = get_cat_ID( $category );
}
if ( $cat ) :
    $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
    $post_per_page = 4; // -1 はすべての投稿を表示
    $do_not_show_stickies = 1; // 0 は先頭に固定したページを表示
    $args=array (
      'category__in' => array( $cat ),
      'orderby' => 'date',
      'order' => 'DESC',
      'paged' => $paged,
      'posts_per_page' => $post_per_page,
      'ignore_sticky_posts' => $do_not_show_stickies
    );
    $temp = $wp_query; // 後での使用のため、オリジナルのクエリを一時変数に保存  
    global $wp_query;
    $wp_query = null;
    $wp_query = new WP_Query( $args ); 
    if ( $wp_query->have_posts() ) : 
        while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
        <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
            <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>へのパーマネントリンク"><?php the_title(); ?></a></h2>
            <small><?php the_time( 'F jS, Y' ) ?> <!-- by <?php the_author() ?> --></small>
            <div class="entry">
            <?php
                global $more;	// 固定ページで more を表示するハック
                $more = 0;
                the_content( 'このページの続きを読む »' );
            ?>
            </div>
            <p class="postmetadata"><?php the_tags( 'タグ: ', ', ', '<br />' ); ?> カテゴリー:<?php the_category( ', ' ) ?> | <?php edit_post_link( '編集', '', ' | ' ); ?> <?php comments_popup_link( 'コメントはありません »', '1 コメント »', '% コメント »' ); ?></p>
        </div>
        <?php endwhile; ?>
    <div class="navigation">
        <div class="alignleft"><?php next_posts_link( '« 古い投稿' ) ?></div>
        <div class="alignright"><?php previous_posts_link( '新しい投稿 »' ) ?></div>
    </div>
 	<?php endif; // if ( $wp_query->have_posts() ) ?>
	<?php $wp_query = $temp; //オリジナルのクエリに戻す ?>

<?php else : ?>
    <h2 class="center">見つかりません</h2>
    <p class="center">サイトに存在しないカテゴリーを検索しています。</p>
    <?php get_search_form(); ?>    
<?php endif; // if ( $cat ) ?>

</div><!-- #content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

カスタム投稿タイプの使用例

カスタム投稿タイプを使用して WordPress サイトに様々な種類のコンテンツを表示できます。この例はページ内で、カスタム投稿タイプに属する投稿を表示します。ここでのカスタム投稿タイプは book です。次のカスタムページテンプレートは任意のテーマ、子テーマのテンプレートファイルで動作します。

<?php
/**
 * Template Name: Page of Books
 *
 * カスタム投稿タイプの投稿を表示
 */

get_header(); ?>
    <div id="container">
        <div id="content">
        <?php 
        $type = 'book';
        $args = array (
         'post_type' => $type,
         'post_status' => 'publish',
         'paged' => $paged,
         'posts_per_page' => 2,
         'ignore_sticky_posts'=> 1
        );
        $temp = $wp_query;
        $wp_query = null;
        $wp_query = new WP_Query($args); 
        if ( $wp_query->have_posts() ) :
            while ( $wp_query->have_posts() ) : $wp_query->the_post();
                echo '<h2>'; 
                the_title();
                echo '</h2>'; 
                echo '<div class="entry-content">';
                the_content();
                echo '</div>';
            endwhile;
        else :
            echo '<h2>見つかりません。</h2>';
            get_search_form();
        endif;
        $wp_query = $temp;
        ?>
        </div><!-- #content -->
    </div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

テンプレートで body_class を使用すると、WordPress は <body> タグに投稿タイプ(クラス名: page)、ページID (page-id-{ID})、使用されているページテンプレートを挿入します。デフォルトの page.php ではクラス名は page-template-default です。

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

注意: 特殊化されたテンプレート (page-{slug}.php または page-{ID}.php) でも page-template-default クラスです。独自のクラスではありません。

カスタムページテンプレートを使用している場合、クラス page-template、そして特定のテンプレートのクラス名が挿入されます。

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

ページテンプレート関数

ページテンプレートを変更する際に使用できるビルトイン WordPress 関数およびメソッドを挙げます。

  • ページの表示に使用されるページテンプレートへのパスを返します。
  • 現在有効化されたテーマで利用可能なすべてのカスタムページテンプレートを返します。get_page_templates() は クラスのメソッドです。
  • ページの表示にカスタムページテンプレートが使用されたかどうかを true または false で返します。
  • カスタムフィールド '_wp_page_template' の値を返します。値が空、または 'default' の場合、null が返ります。

ページに割り当てられたカスタムテンプレートのファイル名がカスタムフィールド '_wp_page_template' (wp_postmeta テーブル内)の値として保存されます。(下線(_)で始まるカスタムフィールドは、編集画面のカスタムフィールドモジュールに表示されません。)

最新英語版: WordPress Codex » Page_Templates最新版との差分