一覧や詳細における分類の表示時にslugなどをclassに付与してもらえると嬉しい。

0
いいねをした人: 居ません
10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • 投稿者
    投稿
  • #114425
    Hajime Megane Ogushi
    参加者
    19

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

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

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

    <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
    いいねをした人: 居ません
    #114430
    株式会社 蔵守
    参加者
    24

    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
    いいねをした人:
    #114435
    アバター画像キタジマ タカシ
    参加者
    2421

    要は

    <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
    いいねをした人:
    #114437
    Hajime Megane Ogushi
    参加者
    19

    ありがとうございます。

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

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

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

    ですので

    c-meta__term–category-{term_slug}

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

    0
    いいねをした人: 居ません
    #114517
    アバター画像キタジマ タカシ
    参加者
    2421

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

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

    2
    いいねをした人:
    #114521
    Hajime Megane Ogushi
    参加者
    19

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

    0
    いいねをした人: 居ません
    #114548
    Hajime Megane Ogushi
    参加者
    19

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

    0
    いいねをした人: 居ません
    #114624
    アバター画像キタジマ タカシ
    参加者
    2421

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

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

    1
    いいねをした人:
    #114745
    アバター画像キタジマ タカシ
    参加者
    2421

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

    1
    いいねをした人:
    #114815
    Hajime Megane Ogushi
    参加者
    19

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

    1
    いいねをした人:
10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • トピック「一覧や詳細における分類の表示時にslugなどをclassに付与してもらえると嬉しい。」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。