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

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

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

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

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

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

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

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

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

WordPressを普通(?)にブログとして使っていれば馴染みがないかもしれませんが、WordPressには投稿フォーマットという機能が標準で備わっています。

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

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

投稿フォーマットの種類
  • standard(標準)
  • aside(アサイド)
  • gallery(ギャラリー)
  • image(画像)
  • link(リンク)
  • quote(引用)
  • status(ステータス)
  • video(動画)
  • audio(音声)
  • chat(チャット)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ということで、

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

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

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

/* 投稿フォーマット
---------------------------------------------------------- */
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の最初に、下記のようにテンプレートファイル名を記述しておくといいでしょう。

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

4.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の最後に下記のように追記します。

<?php endif; ?>

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

まとめ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

柴田竹思

柴田竹思

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

プロフィールはこちら