固定ページのテンプレートにオリジナルを追加・作成する方法

WordPress の記事作成には、２つのタイプがあります。ひとつは投稿。もうひとつは固定ページです。その固定ページですが、テーマによってはテンプレートを選ぶことができます。例えば、WordPress にデフォルトで備わっているテーマの場合を見てみましょう。
Twenty Elevenの場合、テンプレートは３種類あります。

基本的にこれらのテンプレートのうち、どれかを使えば事足りるとは思いますが、中にはちょっと違うレイアウトのテンプレートが欲しいと思う場合もあるでしょう。
特に、〝トップページのみ〟他のページとは違ったレイアウトにしたいと思う事は少なくないのではないでしょうか？　かく言うぼくも、トップページのみレイアウトや表示を変えたいと思った事が多々あります。そんな時は条件分岐タグを使うのも１つの方法ですが、テンプレートファイルを新たに作成し、別のレイアウトを表示してくれる方法を使うのも手です。
この記事では、そんなテンプレートファイルの作り方を説明していきます。

事例）Twenty Eleven の場合

テンプレートファイルとは？

ここでは、WordPress のデフォルトテーマである Twenty Eleven を例に取って見て行きます。Twenty Eleven には３種類のテンプレートがありました。デフォルトテンプレート・サイドバーテンプレート・ショーケーステンプレートの３つです。これら３つのテンプレートを呼び出すファイルは次の３つです。

これらのファイルを開いてみてください。ショーケーステンプレートは結構複雑で、何が書かれているのかよく分かりませんが、デフォルトとサイドバーテンプレートは、結構スカスカで、簡単な作りになっているのが分かると思います。
ですが、その全ての元になっているのはデフォルトテンプレートです。よく見てみると、デフォルトテンプレートとサイドバーテンプレートの違いは、サイドバー呼び出すタグがあるかないかの違いだけです。

デフォルトテンプレート

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
get_header(); ?>
		<div id="primary">
			<div id="content" role="main">
				<?php while ( have_posts() ) : the_post(); ?>
					<?php get_template_part( 'content', 'page' ); ?>
					<?php comments_template( '', true ); ?>
				<?php endwhile; // end of the loop. ?>
			</div><!-- #content -->
		</div><!-- #primary -->
<!-- サイドバーのタグなし -->
<?php get_footer(); ?>

サイドバーテンプレート

<?php
/**
 * Template Name: Sidebar Template
 * Description: A Page Template that adds a sidebar to pages
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
get_header(); ?>
		<div id="primary">
			<div id="content" role="main">
				<?php while ( have_posts() ) : the_post(); ?>
					<?php get_template_part( 'content', 'page' ); ?>
					<?php comments_template( '', true ); ?>
				<?php endwhile; // end of the loop. ?>
			</div><!-- #content -->
		</div><!-- #primary -->
<?php get_sidebar(); ?><!-- サイドバーのタグあり -->
<?php get_footer(); ?>

Twenty Eleven に新たにテンプレートを追加したい場合は、サイドバーテンプレートを活用すると簡単です。

(1) テンプレートファイルを複製する

まずは、サイドバーテンプレートを複製します。ファイル名は適当に付けてください。ここでは、【 sub-page.php 】としておきます。複製したファイルは子テーマのテーマフォルダにアップロードしましょう。

(2) テンプレートであることを認識させる

複製したファイルを開くと以下のようになっています（サイドバーテンプレートと同じ内容）。このファイルを新しいテンプレートと認識させるのはとても簡単です。冒頭部分の【 Template Name: Sidebar Template 】という部分に新しい名前を付けるだけです。【 Sidebar Template 】の部分ですね。ここは日本語でもOKです。

<?php
/**
 * Template Name: サブページ ←ここの名前を任意に変更するだけ！
 * Description: A Page Template that adds a sidebar to pages
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
get_header(); ?>

これで一旦固定ページ作成画面を見てみましょう。新しいテンプレートが認識されているはずです。

新しいテンプレート用のスタイルシートを適用する

新しく追加したテンプレートには、一部適用されないスタイルシートがあります。例えば、今回はサイドバーテンプレートを複製しましたが、サイドバーテンプレートにしか適用されないスタイルは、新しいテンプレート（ここではサブページテンプレート）に適用されません。そのため、サイドバーの位置が横ではなく、コンテンツの下にきているはずです。
新しいテンプレートだけにスタイルを適用させたい場合は、以下のように書くと便利です。

/* ファイル名の sub-page.php のみに適用させるスタイル */
.page-template-sub-page-php p {/*サブページの p タグの文字色は全て赤色になります。*/
	color: #f00;
}

もしくは、カスタムフィールドを使って、該当する固定ページのみに適用される専用スタイルシートを、新たに追加する方法もあります。
また、テンプレートに割り振られている id 自体を、新しく書き換えてもいいです。しかし、そうすると全てのスタイルをいちから適用し直さなくてはならなくなるので面倒です。