WordPressでカテゴリーごとに異なるデザインを適用する

以前、WordPressのショートコードや条件分岐について書きましたが、カテゴリーごとに異なるデザインを適用させたい時に、条件分岐を使わない方法をご紹介します。

今回は、20代男性向けのページと、30代女性向けのページがあるとして、それぞれコンテンツ部分で異なる画像を表示したいような時に使えます。

やることはこれだけなので、シンプルです。

カテゴリーを作る

まずは、カテゴリー別に異なるデザインを適用させるために、カテゴリーを分けます。カテゴリー分けは、条件分岐やアクセス解析でも使えるので、はじめの段階でできるだけ細かく分けておくのが良いと思います。

パーマリンクを「/%category%/%post_id%/」のようにしておくと、カテゴリーのスラッグがURLに含まれますので、アクセス解析でカテゴリーごとのアクセス数などを見るのが楽になります。

そのカテゴリーに1～2記事しかないというのでは意味がありませんが、私の場合、1,000ページぐらいのサイトであれば20～30個のカテゴリーになることもあります。

私は日本語URLが嫌いなので、必ずローマ字や英語でスラッグを設定しています。

コードを挿入する

カテゴリーごとに異なるclassを振る為にコードを書き換える必要があります。メインのdivに異なるclassが振れればOkです。

<?php
$cat_now = get_the_category();
$cat_now = $cat_now[0];
$now_id = $cat_now->cat_ID;
?>
<div id="main" class="category-<?php echo esc_html($now_id); ?>">

私のサイトで使っているコードをそのまま載せますが、これで、その記事のカテゴリーIDを取得して、そのIDをメインのdivのclass名にすることができます。

今回は、div id="main"に追加していますが、自分のサイトのコンテンツ部分のdivを修正すればOKです。

<div id="main" class="category-23">

<div id="main" class="category-50">

実際にその記事を表示してソースを見ると、このようなコードになっています。

CSSでデザインする

あとは、 class="category-23"やclass="category-50"などに対して、CSSでデザインすればOKです。

category-23が20代の男性向けの記事であれば、男性のイラストを挿入したり、category-50が30代女性向けの記事であれば、女性のイラストや女性が好む画像などを挿入します。

記事ごとに直接画像を挿入していってもいいですが、同じ画像を何度も挿入するのであればCSSの背景で画像を表示しておいた方が、修正が楽になります。

※今回の記事もwebutubutuの地蔵さんに教えてもらった方法です。