WordPressでカテゴリーやタグをCSSでスタイル分けする方法

今回はWordPressでカテゴリーやタグを、CSSでスタイル分けする方法についてご紹介します。

カテゴリーやタグの情報を取得する際に、スラッグ名をクラス名に付与して出力させる

カテゴリーやタグを出力する際に付与されるクラス名に、それぞれのカテゴリーやタグのスラッグ名を対応させます。
カテゴリーの例を見てみましょう。

<ul class="category__items">
  <?php
  $categories = get_categories();
  if ($categories) :
    foreach ($categories as $category) : ?>
      <li class="category__item">
        <!-- モディファイアにslug名を対応させることにより、CSSでスタイル分けが可能 -->
        <a class="category__link category__link--<?php echo esc_html($category->slug); ?>" href="<?php echo esc_url(get_category_link($category->term_id)); ?>">
          <?php echo $category->name; ?>
        </a>
      </li>
    <?php endforeach; ?>
  <?php endif; ?>
</ul>

上記のコードでは、get_categories()関数を使用してカテゴリーを取得し、foreachループを使ってカテゴリーを出力しています。
カテゴリーのクラス名には、$category->slugを使用してカテゴリーのスラッグ名を対応させています。

付与されたクラス名に対して、CSSを適用させる

付与されたクラス名に対して、テーマのスタイルシート（style.css）などで適切なCSSを適用します。
カテゴリーのスタイルを変更するCSSの例を見てみましょう。

今回の例では、出力されたCSSには「design」「development」のスラッグ名がクラス名として付与されています。

.category__link--design {
    background-color: #ff0000;
    color: #fff;
    padding: 10px;
}

.category__link--development {
    background-color: #00ff00;
    color: #000;
    padding: 10px;
}

上記のCSSコードでは、.category__link--designと.category__link--developmentというクラスを作成し、それぞれのカテゴリーに異なるスタイルを適用しています。
背景色、テキスト色、パディングなどのプロパティを変更することで、カテゴリーの見た目を自由にカスタマイズすることができます。

カテゴリーやタグをスタイル分けする際の手順は以上です。
今回は例として、カテゴリーを出力した際のコードを紹介しましたがタグの場合でも考え方は同じになります。

まず、カテゴリーやタグを出力する際に付与されるクラス名を、それぞれのカテゴリーやタグのスラッグ名と対応させることが重要です。
そして、付与されたクラス名に対して適切なCSSを適用することで、カテゴリーやタグの見た目を自由にカスタマイズすることができます。

カテゴリーやタグの情報を取得する方法については、以下の記事でご紹介しています。