Notice: Undefined offset: 4 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 474

Notice: Undefined offset: 5 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 477

Notice: Undefined offset: 6 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 480

Notice: Undefined offset: 7 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 483

Notice: Undefined offset: 4 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 474

Notice: Undefined offset: 5 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 477

Notice: Undefined offset: 6 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 480

Notice: Undefined offset: 7 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 483

WordPressで、プラグインを使用して出力したカテゴリー一覧に、カテゴリー名とマッチしたスラッグをクラスとして付与したときのメモです。
プラグイン側の出力は拡張できる余地がなさそうだったので、jQueryでなんとか対応しました

前提と対処した方法

前提
プラグインで出力されるカテゴリー一覧は、カテゴリー名だけが文字列として出力される。
カテゴリー名に対応するスラッグを、カテゴリ名を囲う要素にクラスとして付与したい。

対応
jQueryの.each()メソッドを使用して、指定した範囲内で、文字列(ここではカテゴリー名)とマッチした指定の要素(ここでは<span>タグ)を持つ親要素(ここでは<label>タグ)に、対になった文字列(ここではカテゴリースラッグ)をクラスとして付与。

この例ではチェックボックスでカテゴリーを選ぶ形の一覧なので、#cat-list内にある<label>タグの中に、マッチする<span>があったら、<label>タグにクラスを付与しています。

実際のコード

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
//文字列がマッチしたらクラスを付与
$.each({
  "和食":"type01",
  "イタリアン":"type02",
  "フレンチ":"type03",
  "アメリカン":"type04",
  "アジアン":"type05",
},function(i,j){
  $('#cat-list label').has($('span').filter(function(){return $(this).html()==i})).addClass(j);
});
</script>

5〜9行で「カテゴリ名:付与したいクラス名」を記述しています。

WordPressで「カテゴリ:スラッグ」を自動出力

WordPressの場合は、別途「カテゴリ名:スラッグ」を羅列させるファイルを用意しておいてそれを読み込むと、カテゴリの増減や名称変更にも対応できて便利です。

ここでは「cat-list.php」というファイルを別途用意し、カテゴリ一覧を出力させ、footer.phpのjQuery側でそれを読み込んでいます。

cat-list.php

<?php 
//カテゴリー一覧を「"カテゴリ名":"スラッグ",」で出力
$categories = get_categories();
if (is_array($categories)) {
  foreach($categories as $category):
    $cat_id = $category->cat_ID;
    $cat_title = $category->cat_name;
    $cat_slug = $category->category_nicename;
  echo '"'.$cat_title.'":"'.$cat_slug.'",';
endforeach;
}?>

footer.php

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
//文字列がマッチしたらクラスを付与  
$.each({
  <?php get_template_part('cat-list');//cat-list.phpを読み込む?>
},function(i,j){
    $('#cat-list label').has($('span').filter(function(){return $(this).html()==i})).addClass(j);
});
</script>

あとがき

WordPressでプラグインプラグインの出力をいじれないことってよくありますよね。
出力の外見をカスタマイズしたいときなど、この方法でクラスを付与すればできることが広がるのでは無いでしょうか(^^)
今回はチェックボックスのカテゴリーリストを、カテゴリー別の背景画像にするべく使用しました。