WordPressでカテゴリーに応じてCSSを切り替える方法

WordPressのブログ一覧ページには新しい投稿が10件ほど表示されます。テーマによってレイアウトの違いはありますが、多くの場合、各投稿のタイトルやサムネイル（アイキャッチ画像のこと）のほか、その投稿が属しているカテゴリーのリンクが表示されます。

カテゴリーのリンク部分をCSSでボタン風にデザインしている場合に、カテゴリーごとにボタンの色を変えたいと思ったことはないでしょうか？たとえば、「英会話」「プログラミング」というカテゴリーがあったとして、現実的な方法を２つ紹介します。

元々、このようなHTMLが出力されているとします。

<a href=”https://〇〇〇.com/category/programming/”>プログラミング</a>

もし、以下のようにHTMLにclass名が付くようにできれば、CSSでカテゴリーごとに別々のスタイルを割り当てることができるでしょう。

<a href=”https://〇〇〇.com/category/programming/” class=”programming”>プログラミング</a>

これを実現するには、「投稿ごとにカテゴリーの情報を取得して、HTMLに反映する」ようにテンプレートファイル（PHP）をカスタマイズする必要があります。

PHPに不慣れな人にはややハードルが高いかもしれませんが、HTMLだけの静的サイトと同じような感覚で、WordPressが出力するHTMLの内容を自由自在にカスタマイズできるようになると、サイト制作の幅が大きく広がります。

チャレンジしてみたい方には、ワードプレス中級コースがお勧めです。

CSSの知識だけで実現できる方法です。CSSのスタイルをどの要素に適用させるかを指定する部分をセレクタと呼び、一般的にはHTMLタグに記述されているid属性やclass属性の値を使いますが、セレクタの指定方法はそれだけではありません。

属性セレクタを使うと、「特定の属性を持つ要素」「属性の値に特定の文字を含む要素」といったように、スタイルを割り当てる条件をより細かく限定することができます。知っておくとコーディングが楽になる使い方をいくつか紹介します。

[属性名]

【例】input[disabled] { background-color: gray; }

フォームのボタンなどに disabled属性を記述すると、クリックできなくなります（クリックしても反応しない）。その場合に背景色をグレーにする例です。

[属性名=”値”]

【例】a[target=”_blank”]::after { content: url(アイコンのURL); }

ブログ投稿などの本文に含まれるリンクのうち、クリックすると新しいタブでリンク先が開くもの（target属性に_blankを指定したアンカータグ）だけ、リンク文字列の後ろにアイコンを表示する例です。

サイト全体に適用すると、グローバルメニューなどにもアイコンが付いてしまいかねないので、投稿本文を囲むclass名を併用して、適用範囲を限定するとよいでしょう。

[属性名^=”値”]

【例】a[href^=”https://foo.com/”]::after { content: url(アイコンのURL); }

リンク先のURLが「https://foo.com/」で始まる場合にアイコンを付ける例です。特定のサイト（≒特定のドメイン）内のページへのリンクにだけ、特別なスタイルを割り当てたいときに使えます。「^=」は属性セレクタにおいて前方一致を意味する記号です。

[属性名$=”値”]

【例】a[href$=”contact”]::after { content: url(アイコンのURL); }

リンク先のURLが「contact」で終わる場合にアイコンを付ける例です。特定のページ（≒URLが特定の文字列で終わる）へのリンクにだけ、特別なスタイルを割り当てたいときに使えます。「$=」は属性セレクタにおいて後方一致を意味する記号です。

[属性名*=”値”]

【例】a[href*=”english”]::after { content: url(アイコンのURL); }

リンク先のURLに「english」を含む場合にアイコンを付ける例です。「*=」は属性セレクタにおいて部分一致を意味する記号です。

WordPressのカテゴリーページは、URLの最後が「/category/カテゴリースラッグ」という形式です。このことを利用して、属性セレクタの部分一致または後方一致を使うと、リンク先のカテゴリーごとにスタイルを分けることができます。

▼HTML

<a href=”https://〇〇〇.com/category/programming/“>プログラミング</a>

▼CSS

a[href*=”/category/english/“] { … }

a[href*=”/category/programming/“] { … }