WordPressのシングルページでカテゴリーや投稿タイプごとに表示を切り替える方法

WordPressで投稿の種類(投稿・カスタム投稿タイプ・カテゴリー)ごとにシングルページのレイアウトを変更したいということがあります。

たとえば固定ページは1カラムで投稿(シングルページ)は2カラムとか、特定のカテゴリーのシングルページのみ通常と違うサイドバーを表示させたいとかです。

特にCTAを設置するページに余計な広告などが表示されるとコンバージョンが下がる原因にもなりかねませんので、ページの目的によってレイアウトを切り替えるのは効果的な方法かもしれません。

今回は投稿の種類ごとに専用のテンプレートファイルを作成し、single.phpで条件分岐してそれぞれを読み込ませる方法をご紹介します。

投稿の種類ごとにテンプレートファイルを作成する

投稿の種類ごとに専用のテンプレートファイルを作成します。

ここでは、カスタム投稿タイプ「news」、カテゴリー「trend」、そしてそれ以外のページ(通常の「投稿」を含む)に適用されるファイルを作成します。

こちらのテンプレート階層のページの「概観図」の箇所をご覧頂き、ここで作成するテンプレートのファイル名が概観図にあるファイル名のルールと被らないように名前を付けてください。

たとえば、カテゴリー「trend」に属するシングルページに適用するからと言って「category-denim.php」と名前を付けてしまうと、その「category-denim.php」は「denim」カテゴリーのアーカイブページを表示する際にも適用されてしまいます。

そうならないよう、概観図のルールから外れたファイル名を付けておきましょう。

ここでは、カスタム投稿タイプ「news」に属するシングルページ用に「news.php」、カテゴリー「trend」に属するシングルページ用に「trend.php」、それ以外のシングルページ用に「standard.php」というテンプレートファイルを作成し、WordPressテーマのディレクトリにアップロードしておきます。

news.php

<?php
/*----------------------------------------------------------------------------------------------------
 *
 *
 * Template Name: 「news」シングルページ
 *
 *
 *--------------------------------------------------------------------------------------------------*/
?>

<div class="post news">
	<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
		<h1><?php the_title(); ?></h1>
		<div>
			<?php echo get_the_date('Y.m.d'); ?>
			<?php the_category(' '); ?>
		</div>
		<?php the_content(); ?>
	<?php endwhile; else : ?>
		<p>記事が見つかりません。</p>
	<?php endif; ?>
</div>

カスタム投稿タイプ「news」に属するシングルページは1カラムで表示させます。

trend.php

<?php
/*----------------------------------------------------------------------------------------------------
 *
 *
 * Template Name: 「trend」シングルページ
 *
 *
 *--------------------------------------------------------------------------------------------------*/
?>

<div class="post trend">
	<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
		<h1><?php the_title(); ?></h1>
		<div>
			<?php echo get_the_date('Y.m.d'); ?>
			<?php the_category(' '); ?>
		</div>
		<?php the_content(); ?>
	<?php endwhile; else : ?>
		<p>記事が見つかりません。</p>
	<?php endif; ?>
</div>
<?php get_sidebar('1'); ?>

カテゴリー「trend」に属するシングルページにはサイドバー「sidebar-1.php」を表示させて2カラムにします。

standard.php

<?php
/*----------------------------------------------------------------------------------------------------
 *
 *
 * Template Name: 標準のシングルページ
 *
 *
 *--------------------------------------------------------------------------------------------------*/
?>

<div class="post standard">
	<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
		<h1><?php the_title(); ?></h1>
		<div>
			<?php echo get_the_date('Y.m.d'); ?>
			<?php the_category(' '); ?>
		</div>
		<?php the_content(); ?>
	<?php endwhile; else : ?>
		<p>記事が見つかりません。</p>
	<?php endif; ?>
</div>
<?php get_sidebar('2'); ?>

それ以外のシングルページにはサイドバー「sidebar-2.php」を表示させて2カラムにします。

投稿の種類ごとに条件分岐する

single.phpで投稿の種類（投稿タイプ）ごとに分岐するようにします。

single.php

<?php get_header(); ?>
<div id="single">
	<?php if (is_singular('news')) : ?> //カスタム投稿タイプ「news」の場合
		<?php get_template_part( 'news' ); ?>
	<?php elseif (in_category('trend')): ?> //カテゴリー「trend」の場合
		<?php get_template_part( 'trend' ); ?>
	<?php else : ?> //それ以外のページの場合
		<?php get_template_part( 'standard' ); ?>
	<?php endif; ?>
</div>
<?php get_footer(); ?>

single.phpから投稿の種類で条件分岐し、それぞれのテンプレートファイルを読み込みます。