[Hajime Megane Ogushi]

一覧表示における記事毎のカテゴリーには、カテゴリーごとのIDがclassがついてます。

ブログ

もっと簡単に、もっと効率的に WordPress サイトを構築・運用したい方のための WordPress テーマ

snow-monkey.2inc.org

<span class="c-entry-summary__term c-entry-summary__term--category-23">
お知らせ </span>

しかし、記事中では、カテゴリーごとの差異を示すclassなどがついていません。

[クリスマスを彩る豪華な参加賞あり！] WordPress テーマ Snow Monkey & unitone アドベントカレンダー2022やります！

例年、アドベントカレンダーという12月1日から25日までみんなで毎日記事を書こう！というイベントをやっています…

snow-monkey.2inc.org

<li class="c-meta__item c-meta__item--categories">
<span class="screen-reader-text">カテゴリー</span>
<svg class="svg-inline--fa fa-folder" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="folder" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H298.5c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z"></path></svg><!-- <i class="fa-solid fa-folder" aria-hidden="true"></i> Font Awesome fontawesome.com -->
<a href="https://snow-monkey.2inc.org/category/info/">お知らせ</a>
</li>

具体的な用途としてはカテゴリーごとに色分けして、出力したい的な要望です。

もちろん
template-parts/content/entry-meta をフィルターで上書きして、いい感じにすることは出来るのですが
可能なら、統一されてidかslug（出来るなら操作しやすい slug のほうがいいです。）がカテゴリーを出力する場所に付与されないかなーと思い、コメントしてみました。

サイドバーのランキングにもカテゴリーが出てたりするので、影響の箇所が大きそうですが、ご検討のほどお願いします。

♥ 0

いいねをした人: 居ません

[株式会社 蔵守]

Snow Monkey も body_class() 関数を使って body の部分に class を追加しているので、そこをカスタマイズしてあげればいいかなと思います。

add_filter( 'body_class', function( $class ) {
    global $post;
    $categories = get_the_category( $post->ID );
    foreach ( $categories as $category ) {
		$class[] = "cat-" . $category->slug;
	}
    return $class;
} );

こんな感じなものをプラグインにすれば使いまわせるのでは

♥ 3

いいねをした人:

[キタジマ タカシ]

要は

<li class="c-meta__item c-meta__item--categories">
  <span class="c-meta__term c-meta__term--category-23">
    <span class="screen-reader-text">カテゴリー</span>
    <i class="fa-solid fa-folder" aria-hidden="true"></i>
    <a href="https://snow-monkey.2inc.org/category/info/">お知らせ</a>
  </span>
</li>

みたいになったら良いですかね？ 確かにここ CSS でさくっとやろうとしても HTML 構造的に無理なので、こうしちゃったほうが良い気がします！

♥ 1

いいねをした人:

[Hajime Megane Ogushi]

ありがとうございます。

body_class() に追加する場合、記事に付与されるカテゴリーが複数だと、色分けが出来ないので、どうしようかと考えておりました。

c-meta__term–category-23
そうですね、そのとおりです。

ただIDだと、登録時のWPの状態によってIDが可変してしまい、DBの情報が異なる場合に、想定通りの色分けにならない可能性があります。

ですので

c-meta__term–category-{term_slug}

みたいなると一番ありがたいです。
またおそらく今も考慮されているので大丈夫だと思うのですが。カスタム分類でも同様のルールでclassが付与されるととても嬉しいです。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

ただIDだと、登録時のWPの状態によってIDが可変してしまい、DBの情報が異なる場合に、想定通りの色分けにならない可能性があります

あ！そうでした、スラッグですね。一応一覧のところと、記事内のところ、どちらも ID と slug の class を出力するようにしてみようと思います。しばしお待ちを！

♥ 2

いいねをした人:

[Hajime Megane Ogushi]

やたー！ありがとうございます。ありがとうございます。

♥ 0

いいねをした人: 居ません

[Hajime Megane Ogushi]

あーでも、ごめんなさい！
slugにすると日本語のスラッグだったときにすごいことになっちゃうかもですね。
なのでそこをフィルターするようなものがあるだけでもいいかもです。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

slugにすると日本語のスラッグだったときにすごいことになっちゃうかもですね。

class 名は日本語 ok なので、URL エンコードされた状態でなければそんなに見にくくなることもないのかな？と思います。勝手に URL エンコードされちゃうようなら考えます！

♥ 1

いいねをした人:

[キタジマ タカシ]

v18.2.0 で追加してみました。アップデートして確認してみてください！

♥ 1

いいねをした人:

[Hajime Megane Ogushi]

ありがとうございます！大変いい感じです。こちら閉じます！

♥ 1

いいねをした人:

[投稿者]

投稿