【Labs】WordPressでカテゴリー別にデザインを変える方法

こんにちは（・∀・）

今日はWordPressでカテゴリー毎にデザインを変える方法をご紹介します。

WordPressの基本仕様

WordPressは基本的にトップページ用のPHPファイルと固定ページ用のPHPファイル、それに各記事用のPHPで表示されるようにできています。

トップページ用のPHPファイルだったらindex.phpやhome.php、固定ページならpage.php、各記事用のページならsingle.phpなどなどです。

その中で、トップページ用のindex.phpはトップページだけではなくカテゴリーやタグで分けた時に表示するページとしても使用します。

なので本当のトップページとカテゴリーやタグで振り分けた時のデザインは同じになってしまいます。

もちろんトップページとそれ以外のページのPHPファイルを別にすればデザインを分けることはできます、例えばcategory.phpとかtag.phpなどなどを別に作るとか。

ですが、トップページ以外のPHPファイルを作らなくてもトップページとそれ以外のデザインを分けることができます。

今日はその方法をご紹介していきます。

WordPressでカテゴリー別にデザインを変える方法

in_category関数の設定方法は次の通りです。

<?php if (is_home()) : ?>
//ここにトップページ用のCSSを記述
<?php elseif (in_category('hoge1')) : ?>
//ここにカテゴリー「hoge1」用のCSSを記述
<?php elseif (in_category('hoge2')) : ?>
//ここにカテゴリー「hoge2」用のCSSを記述
<?php elseif (in_category('hoge3')) : ?>
//ここにカテゴリー「hoge3」用のCSSを記述
<?php else : ?>
//ここに上記以外のカテゴリー用のCSSを記述
<?php endif; ?>

次の書き方でも同じ結果が返ります。

<?php if (is_home()) { ?>
//ここにトップページ用のCSSを記述
<?php } elseif (in_category('hoge1')) { ?>
//ここにカテゴリー「hoge1」用のCSSを記述
<?php } elseif (in_category('hoge2')) { ?>
//ここにカテゴリー「hoge2」用のCSSを記述
<?php } elseif (in_category('hoge3')) { ?>
//ここにカテゴリー「hoge3」用のCSSを記述
<?php } else { ?>
//ここに上記以外のカテゴリー用のCSSを記述
<?php } ?>

CSSだけではなく、カテゴリー毎に違う内容を記述することもできます。

in_category()の引数「hoge1」「hoge2」...は各カテゴリーのカテゴリーIDかスラッグを記述します。

カテゴリーのカテゴリーIDとスラッグの調べ方ですが、

WordPressダッシュボードの 投稿 > カテゴリー へ移動。

カテゴリーIDは、調べたいカテゴリーにカーソルを合わせるとステータスバーに表示されるURLの中にある「category&tag_ID=xxx」の「xxx」の数値がIDになります。

スラッグは各カテゴリーのスラッグ欄に表示されています。

複数のカテゴリーを指定したい場合は「array」を使います。

<?php if (in_category(array('hoge1','hoge2','hoge3'))) : ?>

ちなみに「in_category」と似たような関数で「is_category」があります。

違いは、

「in_category」は指定したカテゴリーが設定されている投稿か。

「is_category」は指定したカテゴリーのアーカイブページか。

という違いです。

カテゴリーのアーカイブページの設定なので「is_category」を使うのが正解だと思いますが、「in_category」でも同じ結果が返りますのでこの場合はどちらを使っても大丈夫だと思います。

いかがでしたでしょうか、WordPressのカテゴリー毎にデザインを変える方法についてをご紹介しました。

参考

WordPressで特定のカテゴリーの表示を変える方法あれこれ
この際はっきりさせておきたい in_category() と is_category() の違い