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

2016.06.30 WordPress
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で投稿の種類ごとに条件分岐する

<?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から投稿の種類で条件分岐し、それぞれのテンプレートファイルを読み込みます。これで投稿の種類ごとにシングルページのレイアウトを切り替えることができました。

すべてのシングルページに共通するコンテンツのソースはsingle.phpに記述しておくと、あとあと修正するときにsingle.phpのみ編集すればいいので楽かと思います。

photo credit: KnutPettersfoto-0107.jpg via photopin (license)

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

ブログ集客メール講座登録フォーム

「売上が不安定で、月末になるといつも不安……」
「営業が苦手で新規開拓がうまくいかない……」
「Webが苦手でブログをうまく活用できない……」

個人起業家・フリーランスのあなた、こんなお悩みはありませんか?

実は僕も、独立して最初に直面したのが「集客」の壁でした。

しかし今は、1年の大半をベトナムで過ごしながら、フリーランスのWebディベロッパーとして生計を立てています。

僕がなぜ、時間・場所・人間関係に縛られずに暮らせるようになったのか?

その答えは「ブログ」にあります。

今なら、「初心者の人が成果を上げるため」のブログ集客ノウハウを、メール講座限定でお伝えします。

興味のある人は、今すぐ以下から登録【無料】を!

ブログ初心者が生き残るためのブログ集客メール講座

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら