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

カテゴリーごとにデザインを切り替える方法

記事内に商品プロモーションが含まれる場合があります

WordPressでは、簡単に一部のカテゴリーの記事だけ別デザインに変えることができます。方法はいくつかありますが、この記事ではそれぞれの方法の「使いどころ」と「手順」を詳しく解説していきます。違いを理解したうえで、目的に合った方法を選ぶのが良いでしょう。

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

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

読み込むCSSファイルを変える

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

方法1の大まかな手順

  1. style.cssを複製→◯◯.cssを作る
  2. header.phpで特定のカテゴリーのときに◯◯.cssを読み込むように設定
  3. ◯◯.cssを好きに編集

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

テーマフォルダを開き、style.cssという名前のファイルを見つけます。これを複製して◯◯.cssというように好きな名前に変えます。この例では、special.cssという名前にすることにします。これで、style.cssとspecial.cssという２つのファイルができました。

1-2：header.phpを書き換え

同じくテーマフォルダにあるheader.phpを開き、カテゴリーごとに読み込むCSSファイルを変えるように設定します。まず、Ctrl (command) + Fで「style.css」と検索してみましょう。すると、以下のようなコードが見つかるかと思います。

header.php（ビフォー） 
<link rel='stylesheet' href='****/style.css' type='text/css'/>

↑これがCSSファイルを読み込んでいるコードです。****の部分は、テーマごとに異なります。この部分を以下のように書き換えます。

header.php（アフター） 
<?php if ( in_category(array('スラッグ')) ) ://特定のカテゴリーの場合 ?> 
	<link rel="stylesheet" href="****/special.css" type="text/css" />
<?php else://通常ページの場合 ?>
	<link rel="stylesheet" href="****/style.css" type="text/css" />
<?php endif; ?>

↑「特定のカテゴリーの記事ではspecial.cssを読み込み、それ以外のカテゴリーの記事にはstyle.cssを読み込む」というような条件分岐をしています。‘スラッグ’にはさきほど調べた英数字を''ではさんで書きます。****の部分は、書き換え前に/style.cssの前に書かれていた文字列と同じものにしてください。

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

header.php 
<?php if ( in_category(array('design','life','html')) ) ://特定のカテゴリーの場合 ?> 
	<link rel="stylesheet" href="****/special.css" type="text/css" />
<?php else://通常ページの場合 ?>
	<link rel="stylesheet" href="****/style.css" type="text/css" />
<?php endif; ?>

複数のカテゴリーの記事のデザインを変えたい場合には、上のようにarray（'スラッグ1','スラッグ2','スラッグ3','スラッグ4'）というようにarray()の中にカンマで区切って書きます。

親カテゴリーを指定しても子カテゴリーのデザインは変わらない

例えば「親カテゴリーA」の下にある「子カテゴリーB、C、D」の全てのデザインを変えたい場合には、array（'A','B','C','D'）と指定します。

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

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

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

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

header.php（アフター） 
<?php if ( in_category(array('スラッグ1')) ) ://デザインその1 ?> 
	<link rel="stylesheet" href="****/special.css" type="text/css" />
<?php elseif ( in_category(array('スラッグ2')) ) ://デザインその2 ?> 
	<link rel="stylesheet" href="****/special2.css">
<?php else://通常ページの場合 ?>
	<link rel="stylesheet" href="****/style.css" type="text/css" />
<?php endif; ?>

↑elseif(~)で条件分岐を増やしています。２つ目の専用CSSファイルは上の例ではspecial2.cssとしていますが、もちろん好きな名前でOKです。

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

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

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

single-phpでカテゴリー判定

記事が開くときには、はじめにsingle.phpが読み込まれます。ここには「カテゴリー判定＆振り分け」のコードだけを書いておきます。つまり「ハブ」としての役割をするわけですね。そして、特定のカテゴリーの記事ではsingle-special.phpを読み込み、それ以外のカテゴリーの記事ではsingle-normal.phpを読み込みます。と言ってもよく分からないかと思うので、実際に手順を解説していきます。

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

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

3つのファイル

  1. single.php 振り分けるハブとしての役割
  2. single-normal.php 通常テンプレ
  3. single-special.php 特定のカテゴリ記事テンプレ

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

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

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

スラッグには、さきほど調べたスラッグを''ではさんで書きます。デザインを変えたいカテゴリーが複数ある場合には、<?php if ( in_category(array('design','life','html')) ) :?>というようにスラッグをarray()の中に並べて書きます。これで特定のカテゴリの記事を開くと、別のテンプレート（single-special.php）が読み込まれるようになります。なお、get_template_part()の中に書く’single-special’などには.phpをつける必要はありません。

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

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

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

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

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

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

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

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

ざっくりとした流れ

  1. HTMLのbodyタグにカテゴリー固有のclass名を追加する例：<body class="categoryid-5">...
  2. CSSでカテゴリー固有のclass名に対してCSSを指定例：.categoryid-5 h2 {color: blue}

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

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

具体的な手順を説明していきます。まず、以下のコードをまるっとfunction.phpに追加します。

function.php 
//カテゴリ固有のクラスをbodyの追加
function add_category_id_classes_to_body_classes($classes) {
  global $post;
  if ( is_single() ) {
    foreach((get_the_category($post->ID)) as $category)
      $classes[] = 'categoryid-'.$category->cat_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というクラス名が追加されているはずです。きちんと出力されているか調べるためには、ブラウザーの要素の検証機能を使うのが良いかと思います。

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

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

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

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

サルワカくんの顔（通常）
サルワカくん

このようにWordPressなら柔軟にデザインを切り替えることができます。

この記事も参考になるかも

最強のブログ運営ツール21選：おすすめの執筆ソフトやデザインツールまとめ

最強のブログ運営ツール21選：おすすめの執筆ソフトやデザインツールまとめ

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

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

HTMLとCSSの勉強におすすめの本8冊（初心者〜中級者向け）

HTMLとCSSの勉強におすすめの本8冊（初心者〜中級者向け）

同じカテゴリーの記事
同じカテゴリーの記事一覧
WordPressの使い方
サルワカ