【WordPress】single.phpのレイアウトを 投稿フォーマットを利用して切り替える方法

WordPressの投稿で、内容によってページのレイアウトを変えたいというときがあります。

カテゴリーごとにレイアウトを変えるのならsingle.phpでカテゴリーによって条件分岐すればいいのですが、それだとちょっと使い勝手が悪い。

ということで、いろいろ試した結果、投稿フォーマットを利用した方法にたどり着いたのでご紹介したいと思います。

この方法であれば、ページのレイアウトを各投稿ごとに個別に選択できるので、たとえば

• 回遊率を上げたい記事
• CV(コンバージョン)させたい記事
• 広告を表示したい記事
• 広告を表示したくない記事

など、記事の目的によってレイアウトを切り替えることができます。

WordPressの投稿フォーマットとは？

WordPressには投稿フォーマットという機能が標準で備わっています。

投稿フォーマットとは、WordPress Codexに書かれている内容からも分かる通り、記事の属性によって表示スタイルを変更するための機能です。

つまり、今回ご紹介するような使い方を想定していると考えていいと思います。ただ、投稿フォーマットとして用意されているものは以下の9種類で、独自に追加することはできません。

投稿フォーマットのカスタマイズ手順

今回僕がやりたかったことは、記事ごとに2カラム(サイドバーのあるレイアウト)と1カラム(コンテンツ幅広め)を切り替えたいというものでした。

そのため、asideに1カラムレイアウトを割り当て、投稿編集画面でaside(＝1カラム)を選択したものは1カラムに、特に選択しなかったものには標準で2カラムが選択されるようにしました。

実際の作業の流れは以下のようになります。

1. 投稿フォーマットの有効化
2. 投稿編集画面での投稿フォーマット表示名の変更
3. 各テンプレートファイル(2カラム用・1カラム用)の準備
4. single.phpに投稿フォーマットによる分岐を設定

それでは、順を追って説明していきたいと思います。

1.投稿フォーマットの有効化

まず、WPテーマのfunctions.phpにて、投稿フォーマットを有効化します。

functions.php

/* 投稿フォーマット
---------------------------------------------------------- */
add_theme_support( 'post-formats', array( 'aside' ) );

今回はasideのみを有効化しましたが、複数有効化したい場合には下記のようになります。

functions.php

/* 投稿フォーマット
---------------------------------------------------------- */
add_theme_support( 'post-formats', array( 'aside', 'gallery', 'image' ) );

2.投稿編集画面での投稿フォーマット表示名の変更

これで投稿フォーマットが有効化されました。

しかしこのままでは、投稿編集画面に「標準」「アサイド」と表示され分かりにくいです。

ということで、

• 標準 → 2カラム
• アサイド → 1カラム

というふうに表示を変更します。

投稿フォーマットを有効化したソースの直下に下記のような形で追記します。

functions.php

/* 投稿フォーマット
---------------------------------------------------------- */
add_theme_support( 'post-formats', array( 'aside' ) );

// 投稿フォーマットの表示名を変更
function rename_post_formats($translation, $text, $context, $domain) {
  $names = array(
    'Standard'  => '2カラム',
    'Aside'  => '1カラム',
  );
  if ($context == 'Post format') {
    $translation = str_replace(array_keys($names), array_values($names), $text);
  }
  return $translation;
}
add_filter('gettext_with_context', 'rename_post_formats', 10, 4);

これで、投稿編集画面の表示が変わりました。

3.各テンプレートファイル(2カラム用・1カラム用)の準備

次に2カラム用・1カラム用のテンプレートファイルを作成します。

それぞれのテンプレートファイル名は、

• 2カラム用 → single.php
• 1カラム用 → single-aside.php

としておきます。

なお、テーマ編集画面で分かりやすいようにsingle-aside.phpの最初に、下記のようにテンプレートファイル名を記述しておくといいでしょう。

single-aside.php

<?php
/*----------------------------------------------------------------------------------------------------
 *
 *
 * Template Name: 個別投稿(1カラム)
 *
 *
 *--------------------------------------------------------------------------------------------------*/
?>

4.single.phpに投稿フォーマットによる分岐を設定

これで各レイアウト用のテンプレートファイルの準備ができましたが、このままではレイアウトの切り替えができません。

ですので、single.phpに投稿フォーマットによってテンプレートを切り替えるための条件分岐を追加していきます。

single.phpの冒頭に、下記のように追記します。

single.php

<?php if ( 'aside' == get_post_format( $post->ID ) ): ?>
  <?php get_template_part( 'single', get_post_format() ); ?>
<?php else: ?>

次に、single.phpの最後に下記のように追記します。

single.php

<?php endif; ?>

これで、投稿フォーマットに「aside」が選択されているものには、single-aside.phpというテンプレートファイルが適用されるようになりました。

まとめ

以上、WordPressで投稿フォーマットによってレイアウトを切り替える方法でした。

CVを目的とした記事の場合、リンクをたっぷり設置したサイドバーを表示してしまうと、ページ離脱の大きな原因になります。

また、ページの内容によってはアドセンス広告を表示させない方がいい(規約違反になるおそれがある)場合もあるので、そういうときに適宜レイアウトを切り替えることができると便利です。

投稿フォーマットを使ったレイアウト切り替えが難しいと感じる人は、カテゴリーによってレイアウトを切り替えることもできますので、是非試してみてください。

WordPressでカスタム投稿タイプの個別記事に関連記事一...

WordPressのカスタムヘッダーを利用してスライダー(画...