【WordPress】ループの中でタクソノミーのタームをラベルとして使用する際に、タームごとのクラスを取得してスタイルを切り分けたい時

迷える黒猫くん
迷える黒猫くん

新着情報などのループの中で各カテゴリー名をラベルとして色分けして使用したいのだけど、うまくクラス分けできないかニャ…

やたらと長いタイトルになってしましましたが、私自身がこの内容で記事を探し様々に検索した経験によります。
誰かこちらで悩まれているかたが見つけていただけましたら幸いです。

タイトルを読んでもピンとこない方は以下のようなページを想定しておりますので確認してみてください。

デフォルトの投稿とカスタム投稿でやり方も異なるのでそれぞれ解説していきます。

デフォルトの投稿タイプ

functions.php

functions.phpにカテゴリーのタームにユニークなクラス名(タームのスラッグ名)を指定する以下の関数を作ります。

//category-label
function categories_label()
{
  $cats = get_the_category();
  foreach ($cats as $cat) {
    echo '<span ';
    echo 'class="' . esc_attr($cat->slug) . '">';
    echo esc_html($cat->name);
    echo '</span>';
  }
}

そしてトップページやアーカイブページなど関数を呼び出したい箇所に以下の記載をします。

<?php categories_label() ?>

こちらで以下のコードがHTMLで出力されます。

<span class="スラッグ名">ターム名</span>

これでタームごとにタームのスラッグがclass名になるので、CSSでスタイルを分けることができます!

カスタム投稿タイプ

通常の投稿対応と同様にfunctions.phpにタクソノミーのタームにユニークなクラス名(タームのスラッグ名)を指定する以下の関数を作ります。

functions.php

//taxonomy-label
function taxonomies_label()
{
  if ($terms = get_the_terms(get_the_ID(), 'news_cate')) {
    foreach ($terms as $term) {
      echo ('<dd ');
      echo 'class="' . esc_attr($term->slug) . '"><a href="' . get_term_link($term->slug, 'news_cate') . '">';
      echo esc_html($term->name);
      echo ('</a></dd>');
    }
  }
}

そしてトップページやアーカイブページなど関数を呼び出したい箇所に以下の記載をします。

<?php taxonomies_label() ?>

こちらで以下のコードがHTMLで出力されます。
※今回先ほどの投稿タイプと異なりddタグにリンク付き出力してますが、先ほど同様にspanタグにすることもリンクを付けないことも可能です。また同様にecho以下を入れ替えれば通常の投稿をこちらのタイプで出力することも可能になります。

<dd class="スラッグ名"><a href="タームアーカイブのリンク">ターム名</a></dd>

コメント

タイトルとURLをコピーしました