カスタムページテンプレートを利用して固定ページのデザインを分ける方法

WordPressを使用していると、通常の固定ページとは別のデザインを適用した固定ページを作成したいと思うことがよくあります。

ページのデザインを分ける方法として、条件分岐を使用する方法専用のページテンプレートを使用する方法もありますが、ここではカスタムページテンプレートを利用する方法について見ていきましょう。

カスタムページテンプレートで作成する固定ページ

現在の固定ページは下図のように、右側にサイドバーが表示されています。

ここでは例としてResponsiveというテーマを使用していますが、ご自身の環境に置き換えて考えていただいても問題ありません。

カスタムページテンプレートを作成して、このページのレイアウトとは別にサイドバーのない固定ページを作成してみましょう。

カスタムページテンプレートの作成

テーマフォルダの直下にcustom-page.phpファイルを作成します。

このPHPファイルがカスタムページテンプレートとなります。

テンプレートの名前はどんな名前でもかまいません。

custom-page.phpの一番上に以下のコードを追加しましょう。

<?php
/*
Template Name: カスタムページ
*/

このコードを記述することで、Wordpressはcustom-page.phpがカスタムページテンプレートであることを認識します。

Template Name:に続くテンプレート名は自由に決めていただいてかまいません。ここではカスタムページとしました。

上記のTemplate Name:の下に、以下のコードを貼り付けます。

<?php
/*
Template Name: カスタムページ
*/

/**
 * ここから下のコードを貼り付け
 */


// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Pages Template
 *
 *
 * @file           page.php
 * @package        Responsive
 * @author         Emil Uzelac
 * @copyright      2003 - 2014 CyberChimps
 * @license        license.txt
 * @version        Release: 1.0
 * @filesource     wp-content/themes/responsive/page.php
 * @link           http://codex.wordpress.org/Theme_Development#Pages_.28page.php.29
 * @since          available since Release 1.0
 */

get_header(); ?>

<div id="content" class="<?php echo esc_attr( implode( ' ', responsive_get_content_classes() ) ); ?>">

	<?php if ( have_posts() ) : ?>

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

			<?php get_template_part( 'loop-header', get_post_type() ); ?>

			<?php responsive_entry_before(); ?>
			<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				<?php responsive_entry_top(); ?>

				<?php get_template_part( 'post-meta', get_post_type() ); ?>

				<div class="post-entry">
					<?php the_content( __( 'Read more &#8250;', 'responsive' ) ); ?>
					<?php wp_link_pages( array( 'before' => '<div class="pagination">' . __( 'Pages:', 'responsive' ), 'after' => '</div>' ) ); ?>
				</div><!-- end of .post-entry -->

				<?php get_template_part( 'post-data', get_post_type() ); ?>

				<?php responsive_entry_bottom(); ?>
			</div><!-- end of #post-<?php the_ID(); ?> -->
			<?php responsive_entry_after(); ?>

			<?php responsive_comments_before(); ?>
			<?php comments_template( '', true ); ?>
			<?php responsive_comments_after(); ?>

		<?php
		endwhile;

		get_template_part( 'loop-nav', get_post_type() );

	else :

		get_template_part( 'loop-no-posts', get_post_type() );

	endif;
	?>

</div><!-- end of #content -->

<?php get_footer(); ?>

※このコードは、Responsiveテーマの固定ページテンプレートからサイドバーの記述を除いたものになります。別のテーマを使用されている場合は、このコードを貼り付けても正しく表示されない場合があります。

カスタムページテンプレートの適用

カスタムページテンプレートが作成できましたので、実際に適用してみましょう。

カスタムページテストという固定ページを作成してみます。

右側のページ属性というメニューのテンプレートを、先ほど作成したカスタムページへ変更しましょう。

ページを公開して、ページのURLへアクセスしてみましょう。

サイドバーのない固定ページが表示されましたね。

以上、カスタムページテンプレートを利用して固定ページのデザインを分ける方法でした。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする