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

Wordpress

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

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

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

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

  • page-id.php
  • page-slug.php

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

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

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

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

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

まずはテンプレートファイルをつくっていきます。
ファイル名は任意で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();

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

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

続いて、実際の固定ページ作成画面で表示させていきましょう。
作成画面に移ると、テンプレートを選べるようになっているのがわかります。

固定ページで表示させるテンプレートが選べるようになっています

あとは好きなテンプレートを選び、公開をクリック。

テンプレートを選び表示させましょう

表示させると、サイドバーがなくなっていることが確認できました。

サイドバーをなくし、シンプルなレイアウトにしました

このように管理画面上で選ぶだけで好きなテンプレートを使うことができるようになるのでとても便利ですね😌

まとめ カスタムページテンプレートで楽々レイアウト管理

いかがだったでしょうか。

カスタムページテンプレート使うことで、より簡単に固定ページのレイアウト管理ができるようになります。

とても便利な機能なので、固定ページで複数のレイアウトを持ちたい方はぜひ試してみてください。

今回は以上です。
最後までお読みいただきありがとうございました。

簡単操作!MacBookでWordpressテーマをつくってみる!

この投稿は役に立ちましたか? 役に立った 役に立たなかった 6 人中 6 人がこの 投稿 は役に立ったと言っています。

コメント

海外ブログバナー

にほんブログ村 海外生活ブログへ

海外ブログバナー

にほんブログ村 海外生活ブログへ

シンガポールの古本屋さん

タイトルとURLをコピーしました