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でなんとか対応しました
Contents
前提と対処した方法
前提
プラグインで出力されるカテゴリー一覧は、カテゴリー名だけが文字列として出力される。
カテゴリー名に対応するスラッグを、カテゴリ名を囲う要素にクラスとして付与したい。
対応
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でプラグインプラグインの出力をいじれないことってよくありますよね。
出力の外見をカスタマイズしたいときなど、この方法でクラスを付与すればできることが広がるのでは無いでしょうか(^^)
今回はチェックボックスのカテゴリーリストを、カテゴリー別の背景画像にするべく使用しました。
Notice: Undefined variable: post_id in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/comments.php on line 20
Notice: Undefined variable: aria_req in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/comments.php on line 23
Notice: Undefined variable: aria_req in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/comments.php on line 28
Notice: Undefined variable: html5 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/comments.php on line 31
Notice: Undefined variable: aria_req in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/comments.php on line 31