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で投稿の種類（投稿タイプ）ごとに分岐するようにします。