【WordPress×PHP】固定ページのテンプレートを作る方法

はじめに

【WordPress×PHP】カスタムフィールドの使い方を解説（以下、第14回）では、記事ごとに自由な値を保存して表示する方法を解説しました。

シリーズ最終回の今回は、子テーマに固定ページ用のテンプレートを作ります。ループ、テンプレートタグ、WP_Query、エスケープ、カスタムフィールドと、ここまでの回で学んだことをまとめて使う総まとめの回です。

このシリーズの全15回の構成は、第1回の記事の冒頭にまとめています。この記事の最後にも、全15回の振り返りを載せています。

固定ページ用テンプレートとは？

固定ページは、通常はテーマのpage.phpで表示されます。これとは別のファイルを用意して、特定の固定ページだけ表示の仕方を変えるのが、固定ページ用テンプレートです。

用意の仕方は、次の2つがあります。

• ファイル名で決める：page-スラッグ.phpやpage-ID.phpという名前のファイルを置くと、そのページだけに自動で使われる
• 編集画面で選ぶ：ファイルの先頭にTemplate Name:（テンプレート名）を書いておくと、どの固定ページからでも選べるようになる

ローカル環境で、子テーマにこれらのファイルを同時に置いて、どれが使われるかを確かめました。

編集画面で選んだテンプレートが、いちばん優先されました。何度も使い回せるので、この記事では「編集画面で選ぶ」方法で作ります。

テンプレートを作る手順

Step1：子テーマにファイルを作る

子テーマのフォルダにtmpフォルダを作り、その中にseries.phpのような名前でファイルを作ります。テンプレートは子テーマの直下に置いても認識されますが、SWELLにならってフォルダにまとめておくと整理しやすくなります。

ローカル環境では、子テーマの直下と、1つ下のフォルダ（tmp/など）に置いたテンプレートは認識されました。2つ下のフォルダ（deep/a/など）に置いたものは、選択肢に出ませんでした。

Step2：先頭にテンプレート名を書く

ファイルの先頭のコメントに、Template Name:とテンプレート名を書きます。

<?php
/**
 * Template Name: シリーズ目次
 */

この名前が、編集画面の選択肢に表示されます。

Step3：中身はpage.phpを手本にする

中身は、SWELLのpage.phpを手本にします。get_header()でヘッダーを読み込み、ループの中でthe_content()を表示し、最後にget_footer()でフッターを読み込む、という基本の形は、【WordPress×PHP】ループの仕組みをSWELLで解説（以下、第6回）で読んだsingle.phpと同じです。

Step4：固定ページの編集画面で選ぶ

固定ページの編集画面で、右側の「固定ページ」タブにある「テンプレート」をクリックします。ローカル環境では、選択肢に「デフォルトテンプレート」と、子テーマのテンプレート、SWELLのテンプレート（人気記事一覧）が並びました。作ったテンプレートを選んで、ページを更新します。

選んだテンプレートは、_wp_page_templateというキーのカスタムフィールド（第14回）として、tmp/series.phpのようなファイルのパスで保存されていました。

SWELLのtmp/popular.phpを読んでみる

SWELLにも、固定ページ用のテンプレートが1つ入っています。tmp/popular.phpの「人気記事一覧」です。開いてみると、このシリーズで学んだことがほぼすべて使われていました。

特に注目したいのは、記事一覧を作る部分です。

$args = [
	'paged'               => $the_paged,
	'post_type'           => 'post',
	'ignore_sticky_posts' => 1,
	'meta_key'            => SWELL_CT_KEY,
	'orderby'             => 'meta_value_num',
	'order'               => 'DESC',
];
$the_query = new WP_Query( $args );

【WordPress×PHP】WP_Queryで記事一覧を作る（以下、第11回）のWP_Queryに、meta_keyとorderbyを指定して、カスタムフィールドの値（閲覧数）が多い順に並べています。SWELLは、記事ごとの閲覧数をct_post_views_byloosというキーのカスタムフィールドに保存していて、SWELL_CT_KEYはそのキー名です。第14回のカスタムフィールドは、表示だけでなく、記事の並べ替えにも使えるわけです。

実務サンプル：シリーズ目次ページを作る

最後に、ここまでの内容を組み合わせて、シリーズの記事を順番に並べた目次ページを作ります。固定ページに「どのカテゴリーの記事を並べるか」をカスタムフィールドで指定しておくと、そのカテゴリーの記事が古い順に一覧表示されるテンプレートです。

子テーマにtmp/series.phpを作り、次のコードを書きます。

<?php
/**
 * Template Name: シリーズ目次
 *
 * カスタムフィールド「kurumico_series_cat」に指定したカテゴリーの記事を、
 * 本文の下に古い順で一覧表示する固定ページ用テンプレート
 */
if ( ! defined( 'ABSPATH' ) ) exit;

get_header();
while ( have_posts() ) :
	the_post();
	$the_id   = get_the_ID();
	$cat_slug = get_post_meta( $the_id, 'kurumico_series_cat', true );
?>
<main id="main_content" class="l-mainContent l-article">
	<div class="l-mainContent__inner">
		<?php SWELL_Theme::get_parts( 'parts/page_head' ); ?>
		<div class="post_content">
			<?php the_content(); ?>
		</div>

		<?php
		if ( $cat_slug !== '' ) :
			$query = new WP_Query( [
				'category_name'  => $cat_slug,
				'posts_per_page' => -1,
				'order'          => 'ASC',
				'no_found_rows'  => true,
			] );

			if ( $query->have_posts() ) :
		?>
			<div class="post_content kurumico-series-list">
				<h2>記事一覧（全<?php echo esc_html( $query->post_count ); ?>回）</h2>
				<ol>
				<?php
				while ( $query->have_posts() ) :
					$query->the_post();
					$level = get_post_meta( get_the_ID(), 'kurumico_level', true );
				?>
					<li>
						<a href="<?php echo esc_url( get_permalink() ); ?>"><?php echo esc_html( get_the_title() ); ?></a>
						<span class="kurumico-series-list__meta">
							<?php echo esc_html( get_the_date() ); ?>
							<?php if ( $level !== '' ) : ?>
								／難易度：<?php echo esc_html( $level ); ?>
							<?php endif; ?>
						</span>
					</li>
				<?php endwhile; ?>
				</ol>
			</div>
		<?php
			endif;
			wp_reset_postdata();
		endif;
		?>
	</div>
</main>
<?php
endwhile;
get_footer();

子テーマのstyle.cssには、次のCSSを追加します。

.kurumico-series-list li {
	margin-bottom: .75em;
}
.kurumico-series-list__meta {
	display: block;
	font-size: .85em;
	color: #777;
}

使い方は次のとおりです。

1. 固定ページを新しく作り、本文にシリーズの紹介文を書く
2. 「テンプレート」で「シリーズ目次」を選ぶ
3. カスタムフィールドに、名前kurumico_series_cat、値に並べたいカテゴリーのスラッグ（例：wp-php）を入力する

ローカル環境で、カテゴリー「WordPress×PHP」（スラッグwp-php）に記事を4つ作り、それぞれに第14回のkurumico_level（難易度）を入力して表示すると、次のようになりました。

このテンプレートの構成を図にすると、次のようになります。

コードのポイントを、使っている回と一緒にまとめます。

• メインループ（第6回）で固定ページ自身を表示し、get_post_meta()（第14回）で並べるカテゴリーを受け取っている
• サブループはnew WP_Query()（第11回）。orderをASCにして古い順、posts_per_pageを-1にして全件を取得している
• サブループのあとはwp_reset_postdata()で、メインループの記事に戻している
• タイトル・URL・日付・難易度は、すべてesc_html()やesc_url()（第12回）でエスケープしている
• カスタムフィールドが未入力のときや、記事が0件のときは、一覧の部分を出さない

よくある質問・エラー対処

Q. 作ったテンプレートが、選択肢に出てきません

→ ローカル環境で、テンプレート名の書き方を変えて試しました。

コロンが全角になっていないか、ファイルを2つ以上深いフォルダに置いていないか、子テーマが有効になっているかを確認しましょう。

Q. ページのデザインが崩れて、ヘッダーもなくなりました

→ get_header()を書き忘れていないか確認しましょう。ローカル環境でget_header()を消すと、ページは<main>タグから始まり、<!DOCTYPE html>も<head>も、CSSの読み込みもなくなりました。

Q. テンプレートのファイルを削除したら、そのページはどうなりますか？

→ ローカル環境では、エラーにはならず、優先順位で次の候補のファイル（page-スラッグ.phpがなければSWELLのpage.php）で表示されました。ただし、_wp_page_templateには古いファイル名が残ったままでした。

シリーズ全15回の振り返り

最後に、全15回で学んだことを振り返ります。

おわりに（まとめ）

SWELLのテーマファイルは、このシリーズで学んだ書き方の実例の宝庫です。気になる表示があったら、ぜひ該当するファイルを開いて、どんなPHPで作られているかを読んでみてください。

この記事が、少しでも誰かのお役に立てれば幸いです。

関連記事

• 【WordPress×PHP】カスタムフィールドの使い方を解説
• 【WordPress×PHP】WP_Queryで記事一覧を作る
• 【WordPress×PHP】テーマとPHPの関係を基本から解説

WordPressテーマ「SWELL（スウェル）」

￥17,600（税込）

シンプルで美しいデザイン＋高速化機能まで最初から全部入り
※1回買えば複数サイトで使い回しOK

公式サイトを見る ▶SWELLの特徴を確認 ▶

当サイトの記事で使用したVBAなどのサンプルをDLできます

この記事のサンプルはありません！

ダウンロードページへは下のカードをクリックすればジャンプできます。
よろしければご利用ください！

サンプルのダウンロードはこちらから

【Excel VBA】記事内サンプルファイルダウンロードのページ 【Excel VBA】の記事内で使ったサンプルファイルを（Zipファイルで）ダウンロードできるようにしました。記事内では細かい部分の解説が不十分ですが、実際にファイルをダウ…