WordPressのグーテンベルクのクエリーループブロックは便利だけど、カテゴリーごとにカテゴリー名が色変えできたらいいなと思ってjQueryを使用した。
そのうちWordPress公式がスラッグをclass属性として付与、とかになってくれたらいいなの希望もこめて覚書。
前提
クエリーループブロックを使う
[クエリーループブロック]-[投稿テンプレート]内に[カテゴリー]ブロックを追加する
これでクエリーループを使って記事一覧ページを作る際に、記事ごとの選択カテゴリーも表示されるようになる。
jQuery( function( $ ) {
//カテゴリーがマッチしたらクラスを付与
jQuery.each({
"ニュース":"news",
"イベント":"event",
"お知らせ":"topics",
"各種情報":"info",
},function(i,j){
$('.taxonomy-category a').filter(function(){return $(this).html()==i}).addClass(j);
});
});
カテゴリーブロックには各カテゴリーのaタグをつつむ、taxonomy-category wp-block-post-termsというクラスを付与されたdiv要素があります。（ちょっと説明下手かも）
なので上のjQueryでは、taxonomy-category以下のaタグの文字列（ここではカテゴリー名）が「ニュース」だったら、そのaタグにnewsというクラス属性を追加する、といった感じ。
"aタグ内の文字列":"class名", で設定しています。
実際のソースコードは下記。
<div class="taxonomy-category wp-block-post-terms"> <a href="https://example.com/topics" rel="tag" class="topics">お知らせ</a><span class="wp-block-post-terms__separator"> </span> <a href="https://example.com/info" rel="tag" class="info">カテゴリー名</a> </div>
span.wp-block-post-terms__separatorはカテゴリーブロックの設定にある、カテゴリーとカテゴリーの間を仕切るものになります。（今回は空白）
あとはCSSのほうでカテゴリー別の色を設定してデザイン調整すればOK
