WordPressで条件分岐：カテゴリー別にデザインを変える3つの方法

WordPressのクラシックテーマでは、一部のカテゴリーの記事だけ別デザインに変えることができます。方法はいくつかありますが、この記事ではそれぞれの方法の「使いどころ」と「手順」を詳しく解説していきます。違いを理解したうえで、目的に合った方法を選ぶのが良いでしょう。対象は通常投稿の個別ページとPHPテンプレートを使うクラシックテーマです。ブロックテーマのHTMLテンプレートへ同じコードを貼る手順ではありません。

カテゴリー別に条件分岐を行うための事前準備

事前準備としてデザインを変えたいカテゴリーの情報を確認しておきます。

その1：カテゴリーの「スラッグ」をメモ

スラッグとはURLなどに使われるカテゴリーの識別名のことです。カテゴリーごとに、1つスラッグが決まっています。

スラッグは［投稿］［カテゴリー］から調べることができます。デザインを変えたいカテゴリーのスラッグをメモしておきましょう。

その2：カテゴリー「ID」をメモ

スラッグと同じように、カテゴリーごとにIDが決まっています。こちらも調べておきましょう。

デザインを変えたいカテゴリーをクリックします。

ページが遷移したら、URLバーを見ます。URLの中にtag_ID=●という形でIDが載っているはずです。この●の数字がID名です。この例だと「23」ですね。

また、念のため編集するファイルはバックアップを取っておきましょう。検証環境で試し、親テーマの直接編集は更新で消えるため子テーマを使うことをおすすめします。子テーマのfunctions.phpは親を置き換えず両方読み込まれるので、親の関数を同名で丸ごと複製しないでください。以下のCSS例は、自分で通常CSSの読み込み処理を管理できるテーマを前提にしています。

方法1：特定のカテゴリーだけ読み込むCSSを切り替える

どんなときにおすすめ？ 一部のカテゴリーの記事のデザイン（CSS）を大幅に変えたいときにこの方法を使うと良いでしょう。

特定のカテゴリーの記事だけ別のCSSファイルを読み込むようにする方法です。CSSを大幅に変えたいときは、この方法が良いでしょう。

1-1：CSSファイルを複製

カスタマイズするテーマ（子テーマなら子テーマ）のフォルダを開き、style.cssという名前のファイルを見つけます。子テーマの通常CSSとして用意した内容を、必要に応じて親テーマのCSSや依存関係も確認したうえで複製し、◯◯.cssというように好きな名前に変えます。この例では、special.cssという名前にすることにします。これで、style.cssとspecial.cssという２つのファイルができました。

1-2：CSSの読み込み処理を書き換え

公開当時はテーマフォルダにあるheader.phpを開いてCSSのlinkタグを書き換える方法を紹介していました。Ctrl (command) + Fで「style.css」を検索したときの旧例は以下です。現在はwp_enqueue_style()による読み込みが一般的で、全テーマのheader.phpにこのタグがあるとは限りません。

<link rel='stylesheet' href='****/style.css' type='text/css'/>

↑これはCSSファイルを直接読み込む旧例で、****はテーマのURL部分です。現在の例ではfunctions.phpのwp_enqueue_scriptsフックで、通常CSSの読み込み自体を次の処理へ置き換えます。例では自分で管理するhandle名をsaruwaka-mainと定義し、通常CSSと専用CSSのどちらか一方だけをこのhandleで読み込みます。このサンプルでは、自分で管理する元の通常CSS用コールバックとそのadd_actionを、この関数とadd_actionへ置き換えて使います。既存の通常CSSのenqueueや直接linkを残したまま、後から別のコールバックを追加するコードではありません。同じhandleが先に登録済みの場合、wp_enqueue_style()へ別URLを渡しても登録内容は置き換わらないため、元の登録処理から変更する必要があります。親テーマが別handleでCSSを読み込む場合は、その実装・依存関係を確認して読み込み元を調整する必要があり、未知のhandleを一律に解除する方法ではありません。既存functions.phpのPHP内に追加するときは、先頭の<?phpを重複させないでください。

<?php
function saruwaka_category_styles() {
	if ( is_singular( 'post' ) && in_category( 'スラッグ', get_queried_object_id() ) ) {
		$stylesheet_url = get_stylesheet_directory_uri() . '/special.css';
	} else {
		$stylesheet_url = get_stylesheet_directory_uri() . '/style.css';
	}
	wp_enqueue_style( 'saruwaka-main', $stylesheet_url );
}
add_action( 'wp_enqueue_scripts', 'saruwaka_category_styles' );

↑「特定のカテゴリーの記事ではspecial.cssを読み込み、それ以外のカテゴリーの記事にはstyle.cssを読み込む」というような条件分岐をしています。wp_enqueue_scriptsでクエリ成立後に、is_singular('post')で通常投稿の個別ページへ限定し、表示中の投稿IDを明示して所属を調べます。'スラッグ'にはさきほど調べたスラッグを''ではさんで書きます。旧****に対応するURL部分はget_stylesheet_directory_uri()で取得し、/style.cssなどをつなぎます。この関数は子テーマ使用時には子テーマのURLを返すため、style.cssとspecial.cssをそのフォルダへ用意してください。下の複数カテゴリー例・3分岐例はこの関数全体の差し替え候補です。同名の関数とadd_actionを全部同時に貼らないでください。

複数のカテゴリーを指定する場合

<?php
function saruwaka_category_styles() {
	if ( is_singular( 'post' ) && in_category( array( 'design', 'life', 'html' ), get_queried_object_id() ) ) {
		$stylesheet_url = get_stylesheet_directory_uri() . '/special.css';
	} else {
		$stylesheet_url = get_stylesheet_directory_uri() . '/style.css';
	}
	wp_enqueue_style( 'saruwaka-main', $stylesheet_url );
}
add_action( 'wp_enqueue_scripts', 'saruwaka_category_styles' );

複数のカテゴリーの記事のデザインを変えたい場合には、上のようにarray( 'スラッグ1','スラッグ2','スラッグ3','スラッグ4' )というようにarray()の中にカンマで区切って書きます。配列内のどれか1つに直接所属していれば一致します。

親カテゴリーを指定しても子カテゴリーだけの所属は自動的に含まれない

例えば「親カテゴリーA」の下にある「子カテゴリーB、C、D」の全てのデザインを変えたい場合には、array( 'A', 'B', 'C', 'D' )と必要な子カテゴリーも指定します。子カテゴリーだけを付けた投稿は親Aの指定に自動一致しませんが、親Aも直接付けた投稿はAに一致します。

1-3：専用のCSSを自由にカスタマイズ

これで特定のカテゴリーがspecial.cssを読み込むようになりました。あとは、special.cssを自由にカスタマイズすればOKですね。

【参考】デザインを3パターン以上で分けたいとき

例えば「カテゴリーAの記事」と「Bの記事」と「それ以外の記事」で3パターンのデザインを作りたいというときには、3つめのCSSファイル作ったうえで以下のように書きます。

<?php
function saruwaka_category_styles() {
	if ( is_singular( 'post' ) && in_category( 'スラッグ1', get_queried_object_id() ) ) {
		$stylesheet_url = get_stylesheet_directory_uri() . '/special.css';
	} elseif ( is_singular( 'post' ) && in_category( 'スラッグ2', get_queried_object_id() ) ) {
		$stylesheet_url = get_stylesheet_directory_uri() . '/special2.css';
	} else {
		$stylesheet_url = get_stylesheet_directory_uri() . '/style.css';
	}
	wp_enqueue_style( 'saruwaka-main', $stylesheet_url );
}
add_action( 'wp_enqueue_scripts', 'saruwaka_category_styles' );

↑elseif(~)で条件分岐を増やしています。２つ目の専用CSSファイルは上の例ではspecial2.cssとしていますが、もちろん好きな名前でOKです。複数の分岐に該当する投稿は先の分岐が選ばれます。ここでも関数全体を先の例と差し替え、通常CSSを重ねて読み込まないようにしてください。

方法2：条件分岐で別のテンプレートを読み込むようにする

どんなときにおすすめ？ 一部のカテゴリーの記事のHTMLをがらっと変えたいときには、この方法がおすすめです。例えば、アイキャッチ画像の挿入位置を変えたり、記事のヘッダーやサイドバーなどの構成をガラッと変えたい場合などですね。

この方法のイメージは、次の図のようになります。

クラシックテーマではテンプレート階層に従ってファイルが選ばれます。single-post-{slug}.phpやsingle-post.phpなどが先に選ばれる場合もあります。ここでは通常投稿の個別ページでsingle.phpが使われるテーマを前提にします。ここには「カテゴリー判定＆振り分け」のコードだけを書いておきます。つまり「ハブ」としての役割をするわけですね。そして、特定のカテゴリーの記事ではsingle-special.phpを読み込み、それ以外のカテゴリーの記事ではsingle-normal.phpを読み込みます。と言ってもよく分からないかと思うので、実際に手順を解説していきます。

2-1：single.phpを3つに複製

テーマフォルダに入っているsingle.phpを子テーマ側へ用意して複製し、同じ中身のファイルを3つ作ります。複製したファイルの名前は好きなものでOKですが、例えば以下のようにしましょう。

2-2：single.phpを書き換え

次にsingle.phpを「カテゴリー判別＆振り分け」用のコードに書き換えます。コードを全て消して、以下のコードを書きます。

<?php
if ( is_singular( 'post' ) && in_category( 'スラッグ', get_queried_object_id() ) ) { //特定のカテゴリの場合
	get_template_part( 'single-special' );
} else { //それ以外の場合
	get_template_part( 'single-normal' );
}
?>

スラッグには、さきほど調べたスラッグを''ではさんで書きます。デザインを変えたいカテゴリーが複数ある場合には、is_singular( 'post' ) && in_category( array( 'design', 'life', 'html' ), get_queried_object_id() )という条件へ差し替え、スラッグをarray()の中に並べて書きます。これで特定のカテゴリの記事を開くと、別のテンプレート（single-special.php）が読み込まれるようになります。なお、get_template_part()の中に書く'single-special'などには.phpをつける必要はありません。この例は1引数でsingle-special.phpやsingle-normal.phpを探し、子テーマになければ親テーマも探します。旧例のget_template_part( 'single-normal', 'normal' )はsingle-normal-normal.phpを先に探してsingle-normal.phpへfallbackするため、ここでは説明したファイル名だけを指定しています。

2-3：single-special.phpをカスタマイズ

あとは、single-special.phpを好きなようにカスタマイズすればOKです。サイドバーをまるっと削除しても、そのカテゴリー固有のコンテンツを加えても良いでしょう。single-normal.phpはそれ以外のカテゴリー記事で使われるテンプレートなので、今回は何も変えなくて良いですね。

【参考】3つ以上のテンプレをカテゴリー別の条件分岐で使うには？

「カテゴリーAのときはテンプレその1、Bのときはテンプレその2...」というようにさらに条件分岐させることもできます。例えば3つのテンプレを使い分けたいときは、もう1つテンプレを複製して（例：single-more.php）、single.phpのコードをまるっと以下のように書き換えます。

<?php
if ( is_singular( 'post' ) && in_category( 'スラッグ1', get_queried_object_id() ) ) { //特定のカテゴリの場合
	get_template_part( 'single-special' );
} elseif ( is_singular( 'post' ) && in_category( 'スラッグ2', get_queried_object_id() ) ) { //特定のカテゴリ2の場合
	get_template_part( 'single-more' );
} else { //それ以外の場合
	get_template_part( 'single-normal' );
}
?>

方法3：bodyタグにカテゴリー別のclassを追加

どんなときにおすすめ？ 一部のカテゴリーのCSSをほんの一部だけ変えたいときにおすすめの方法です。以下の設定をしておくと、何かとサイトのデザインカスタマイズがしやすくなるはずです。

この方法は次の2ステップで行います。

bodyタグにそのカテゴリーの記事にしか出力されないクラス名が入るので、特定のカテゴリーに対してのみCSSでデザイン指定ができるようになるわけですね。「何言ってるの？」という方は、CSSの書き方の基本が参考になるかと思います。

3-1：bodyタグにカテゴリー固有のclass名を追加

具体的な手順を説明していきます。まず、以下のコードをまるっとfunctions.phpの既存PHP内に追加します（先頭の<?phpを重複させないでください）。テーマがbody_class()をbodyタグへ出力していることが前提です。通常投稿の個別ページだけを対象にして、表示中の投稿IDから直接所属する全カテゴリーを取得します。既に同名の関数がある場合は重複定義せず整理してください。

<?php
//カテゴリー固有のクラスをbodyに追加
function add_category_id_classes_to_body_classes( $classes ) {
	if ( is_singular( 'post' ) ) {
		foreach ( get_the_category( get_queried_object_id() ) as $category ) {
			$classes[] = 'categoryid-' . $category->term_id;
		}
	}
	return $classes;
}
add_filter( 'body_class', 'add_category_id_classes_to_body_classes' );

出典： bodyタグのクラスにカテゴリー情報を含めて個別スタイルを設定

これで<body class="categoryid-数字"という形でbodyタグにクラス名が出力されます。この数字＝さきほど調べたカテゴリーIDです。たとえば、IDが6のカテゴリーに属する記事を開くと、bodyタグにcategoryid-6というクラス名が追加されているはずです。きちんと出力されているか調べるためには、ブラウザーの要素の検証機能を使うのが良いかと思います。複数カテゴリーに所属する投稿には、それぞれのcategoryid-クラスが付きます。子カテゴリーから親カテゴリーのクラスが自動的に追加されるわけではありません。

3-2：CSSでデザインを指定

CSSファイル（style.css）を編集していきます。例えば「IDが15のカテゴリーだけ、h3の見出しデザインを変えたい」という場合、CSSに以下のように追記します。

.categoryid-15 h3 {
	color: red;
	font-size: 20px;
}

.categoryid-15 h3{}というようにセレクタに半角スペースを空けていますが、これは「クラスがcategoryid-15の要素内のh3タグ」という意味になります。