投稿や固定ページのテンプレートを増やす方法|Personal WP Customization Notes (PWCN)

公開日：2022(令和4)年5月12日／最終更新日： 2022(令和4)年5月12日

WordPressはサーバーのデータベースに保存している情報を引っ張り出して、さまざまなテンプレートを通してページとして表示させるCMS(コンテンツマネージメントシステム)です。

その中で、投稿や固定ページを表示するためのテンプレートにもそれぞれ専用のものがあり、投稿の場合はテーマのファイル類の中のsingle.phpを、固定ページはpage.phpを通して表示させるようになっています。

基本的に、サイト内のすべての固定ページや投稿に対して、独自のコンテンツを挿入したテンプレートを使いたい場合には以下のような手順でカスタマイズします。

子テーマを作る（親テーマの更新でテンプレートが上書きや削除されないようにするため）
子テーマを有効にする
親テーマ内のテンプレートを子テーマへコピーする
子テーマへコピーしたテンプレートを加工する

それ以上に、サイドバーのありなしやページ幅などを変えたいといったテンプレートごとにレイアウトを変えたい場合や、カスタム投稿タイプごとに違うテンプレートを使いたい場合には、さらにカスタマイズする必要があります。

本ページの手順通りに行うことで、以下のような動作をさせることができるようになります。

投稿や固定ページ用のカスタムテンプレートを作る
WordPressにカスタムテンプレートを認識させる
投稿や固定ページ編集画面で、テンプレートを選択できるようにする

このページでは、作成したカスタムテンプレートに対して独自のデザインや機能を追加するといったところまでは解説していませんので、テンプレート自体のカスタマイズについてはご自身で検索、実装を行っていただく必要があります。

本ページは、WordPressの公式解説ページのページテンプレートを元に、テンプレート作りについてより分かりやすく解説することを目的としたものです。より詳しい情報は公式ページをご覧ください。

独自の固定ページ（投稿）テンプレートを増やす方法

テンプレート自体は、後述するファイルの作成とFTPクライアントツールなどでテーマ（子テーマ）へファイルを転送するだけで本当に簡単に増やせます。

ただ1点、投稿（固定ページ）テンプレートのファイル名に関しては注意が必要なため、そちらから説明していきます。

使用できない（使用を避けたほうがいい）テンプレートファイル名

お使いのテーマ内にあるかどうかは別として、WordPressにはあらかじめ基本として読み込むテンプレートがあります。

例えば、固定ページなら「page.php」、投稿なら「single.php」、アーカイブなら「archive.php」、ブログ一覧なら「home.php」といった具合にたくさんあります。

詳しくは公式の「予約済みのテーマファイル名」を参照ください

今回作る固定ページ、投稿テンプレートに限っては、以下のようなファイル名は避けたほうが無難です。

page-〇〇
single-〇〇

これらは、固定ページ（page-）、投稿（single-）でスラグ（投稿編集画面でいうパーマリンク）であったり、カスタム投稿タイプスラグが一致する場合に、それのテンプレートとして認識されるようになっているためです。

認識される要件に合致する投稿や固定ページがなければ特に不具合はないという意味で、あえて避けたほうがいいと表現しました。

ちなみに「ハイフン（-）」の代わりに「アンダーバー(_)」を使えば問題ありません。

例：page_〇〇、single_〇〇

ネット検索すると、テンプレートファイル名に関して、解釈を誤った形で「ハイフン(-)」を用いる例がたくさんの解説記事で散見されますので、よく読んでから参考にするようにしてください。

独自の投稿（固定ページ）テンプレートファイルを適用する手順

子テーマを作り、有効化する

公式ページなどで配布されているテーマや、各所で配布・販売されているテーマそのものをWordPress用語で「親テーマ」といいます。

テーマは頻度に差はあるものの、WordPressのバージョンアップなどに伴って、親テーマは随時更新されていきます。

更新により、親テーマ自体に行ったカスタマイズは原則変更されて元に戻り、追加したファイルは削除されます。つまり、親テーマにいくらカスタマイズをしても、更新によって台無しになってしまうということです。

これを防ぐため、WordPressには親テーマの機能を踏襲しつつ、機能のカスタマイズ部分だけを追加できる「子テーマ」という仕組みがあります。

「子テーマ」の作成方法は本ページの内容から外れるため割愛しますが、本ページのカスタマイズを含め、サイトに独自の何かを追加する際には「子テーマ」での運営をおすすめします。

本ページは、子テーマを使っていることを前提に進めていきます

テンプレートファイルを作る

FTPクライアントツールや、サーバーのファイルマネージャーなどを使って、お使いの親テーマから投稿テンプレート（single.php）、固定ページテンプレート（page.php）をパソコンへダウンロードします。

ダウンロードしたファイルを任意の名前に変更します。

名前を変更したテンプレートファイルをテキストエディタで開きます。

テキストエディタは標準のメモ帳を使わず、EmEditorなどの無料エディタを使いましょう

固定ページ用テンプレートの場合は、作成したテンプレートファイルの最初の行へ以下を追加します。

<?php
/* 
* Template Name: テンプレートの名前
* Template Post Type: page
*/
?>

投稿用テンプレートの場合は、作成したテンプレートファイルの最初の行へ以下を追加します。

<?php
/*
 * Template Name: テンプレートの名前
 * Template Post Type: post
 */
?>

「Template Post Type」の行を省略すると固定ページ用として認識されるようになっていますが、混乱しないよう、投稿用の時は「post」を、固定ページの時は「page」と記述すると覚えておいたほうがよいかと思います。
逆に投稿と固定ページ双方に反映したい場合には、「post,page」とすればOKです。

テンプレートファイルを所定の場所へ転送する

FTPクライアントツールや、「File Manager」プラグインを使って、テーマのフォルダ直下（style.cssやsingle.phpのある場所）へ転送します。

親テーマへ適用してもテーマ更新により消失する可能性があるため、子テーマを使用し、子テーマフォルダ直下への転送をしてください
サーバーのファイルマネージャーやFTPが使えない環境でプラグインを使ったファイル転送はトラブルの原因となりますので避けてください

ここまで完了したら、一度投稿（固定ページ）の編集画面を開いてみてください。

編集画面右側のテンプレートの中に、「デフォルト」と、先ほど作成したテンプレートが選択できるようになっていれば、テンプレートはWordPressに認識され、利用可能な状態になっています。

あとは必要に応じて、前述の手順でテンプレートファイルを任意に追加し、内容をカスタマイズしていけばよいでしょう。

bodyタグにテンプレートのCSS Classを追加する

作成したテンプレート内のCSSクラスやIDをまったく別のものにしてしまえば、それに対してデザインを施せば良いのですが、共通したクラスやIDをそのまま使う場合の仕分け方法として、追加したテンプレートに対してbodyクラスを付与する方法があります。

bodyクラスを付与すると、例えばサイト全体に「.content」というCSSクラスがある場合には

.content{
デザインコード
}

とテーマのCSSへ書くことでデザインを変更することができます。

これに対して「wide」というbodyクラスを付与することで、

body.wide .content{
デザインコード
}

と書いたものは、.contentというクラス、かつwideというbodyクラスのついたものにだけデザイン指定することができます。

これについては、サイトを作る方の好みの問題かと思いますので、必要であれば、以下のコードをテーマのfunctions.phpへ追加してください。

/***** カスタムテンプレート追加時の設定 *****/
/* ページテンプレートにbodyclassを付与する */
function ha_add_admin_body_class( $classes ) {
global $post;
//template class
	if ( isset( $post->ID ) ) {
		$page_template = get_page_template_slug( $post->ID );
	if ( $page_template == 'テンプレートの場所' ) {
		return "$classes  付与するbodyクラス";
	}
	}
	return $classes;
}
add_filter( 'admin_body_class', 'ha_add_admin_body_class' );

「テンプレートの場所」はテーマフォルダからテンプレートまでを記述し、「付与するbodyクラス」についてはわかりやすいものを指定してください

編集画面で選択肢が表示されないときは

独自テンプレートのファイルを作って転送したのに、投稿（固定ページ）編集画面の「テンプレート」欄に選択肢が表示されない場合には、以下の部分をチェック、修正してください。

テンプレート宣言（コメント）に不要な文字が入っていないか

前述した、テンプレートの一番上に入れるコード

<?php
/* 
* Template Name: テンプレートの名前
* Template Post Type: page
*/
?>

で、半角スペース部分を省略したり、余分な半角スペースが入っていたり、全角スペースがあったりするとテンプレートとして認識されません。

特にテンプレートの名前の単語の間に全角スペースが入っていないか、「Template Name:」「Template Post Type:」の後ろに半角スペースが入っていないことで認識されないというケースが多いですから注意しましょう。

テンプレートのファイル名に誤りがある

テンプレートファイル名に以下の不備がある場合には、正常に反映されません

テンプレートファイル名に全角文字が使われている
テンプレートファイル名に全角スペースが使われている
テンプレートファイル名の単語のつなぎに「-」「_」以外が使われている
ファイルの文字コードがUTF-8Nになっていない

特に最後の文字コードについては不明な方も多いと思いますので補足しておくと、パソコン上で作成するファイルには文字コードというのがあり、パソコン付属のメモ帳で編集した場合には通常「Shift JIS」というWordPressでは使えない（不具合の起きる可能性のある）文字コードで保存されます。

これが原因で認識されないという場合には、メモ帳で編集したファイルを保存する際に形式を「UTF-8」に指定するか、EmEditorなど、標準の文字コードが「UTF-8N」となっていて無料で使えるテキストエディタを使うとよいでしょう。

カスタム投稿タイプにテンプレートを適用させる方法

テンプレートファイルを作るところで少し触れていますから、ピンときた方が多いと思いますが、一応補足として掲載しておきます。

テンプレートの冒頭に入れる以下のコード

<?php
/* 
* Template Name: テンプレートの名前
* Template Post Type: page
*/
?>

にある「Template Post Type」の行で、WordPressはどの投稿タイプに適用するのかの判断をしています。

つまり、「post」なら投稿へ、「page」なら固定ページに対してのテンプレートと認識しているので、そこへカスタム投稿タイプスラグを入れれば特定の投稿タイプで選択できるようになるテンプレートを作ることができます。

もちろん「,(コンマ)」で区切ることで複数指定もできます。

おまけ　ブロックテンプレートを使う手はあるものの．．．

WordPress5.8から追加された機能に、ブロックテンプレートというのがあります。

お使いのテーマによっては、投稿や固定ページ編集画面右側の「テンプレート」欄に、テンプレートの選択とは別に「新規」というリンクがあると思います。

この機能は、WordPressが目指しているフルサイトエディット（FSE）において、ブロックで構成したテンプレートを自由に登録・編集できるというもので、お使いのテーマがFSEに対応したブロックテーマでない場合には、正常に表示されないことがあります。

ブロックテンプレートを使う場合には、実際に追加してみて、表示に問題がないかをよく確認するようにしてください。

また、以下のコードをテーマのfunctions.phpへ追加することで、ブロックテンプレート機能を使用しない（追加できないようにする）ようにすることもできます。

/***** ブロックテンプレートを無効にする *****/
function ha_disable_block_template_support(){
remove_theme_support( 'block-templates' );
}
add_action( 'after_setup_theme', 'ha_disable_block_template_support' );