WordPressの高度なカスタマイズ⑨　カスタムページテンプレートを使ってみる

Wordpress

2021.12.30

こんにちは。fsです。
WordPressでウェブサイトを運営していると、

「固定ページだけ違ったレイアウトにしたい！」

というニーズはよくあります。

方法としては、テーマを作成するときに、

page-id.php
page-slug.php

などの専用テンプレートファイルを作成する手段がありますが、その都度ファイル名を変えないといけないので、管理がちょっとめんどくさいです。

そんなとき使えるのが、カスタムページテンプレートです。
一つファイルをつくれば、あとは管理画面上で選択して使えるのでとても便利です。
ということで、今回はカステムページテンプレートをつくってみることにします。

カスタムページテンプレートをつくる
1. 専用のテンプレートファイルの作成
2. カスタムページテンプレートの表示
まとめ　カスタムページテンプレートで楽々レイアウト管理

カスタムページテンプレートをつくる

それでは早速やっていきましょう。

専用のテンプレートファイルの作成

まずはテンプレートファイルをつくっていきます。
ファイル名は任意でOK。
今回はサイドバーがないデザインにしたいので、page-template-no-sidebar.phpというファイルにします。
※自分が管理しやすいファイル名にすると良いです

page.phpのファイルの内容をコピーし、一番上にテンプレート名をコメントで入れてサイドバーを表示する命令(get_sidebar)をカットします。
※コメントにTemplate Nameと入れることで、管理画面上で専用のテンプレートを選択できるようになります。

<?php
/*
Template Name: サイドバーなし
*/

/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package fs
 */

get_header();
?>

	<main id="primary" class="site-main row">

		<?php
		while ( have_posts() ) :
			the_post();

			get_template_part( 'template-parts/content', get_post_type() );

			the_post_navigation(
				array(
					'prev_text' => '<span class="nav-subtitle">' . esc_html__( 'Previous:', 'fs' ) . '</span> <span class="nav-title">%title</span>',
					'next_text' => '<span class="nav-subtitle">' . esc_html__( 'Next:', 'fs' ) . '</span> <span class="nav-title">%title</span>',
				)
			);

			// If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open() || get_comments_number() ) :
				comments_template();
			endif;

		endwhile; // End of the loop.
		?>

	</main><!-- #main -->

<?php
get_footer();

これでテンプレートファイルは完成です。