サポート » 使い方全般 » 特定のカテゴリ記事へのアイコン表記

  • 解決済 cwic

    (@cwic)


    質問失礼します。

    多分「単一記事の投稿」PHPの編集になるかと思いますが、

    特定カテゴリに所属の記事タイトル付近にカテゴリ別のアイコン(画像)を表示したいのですが、、、

    例えば、カテゴリが「カテゴリA」「カテゴリB」「カテゴリC」の3種類あった場合、
    「カテゴリA」に所属する記事のタイトル部分には「A」のアイコン、
    「カテゴリB」に所属する記事のタイトル部分には「B」のアイコン、
    「カテゴリA」と「カテゴリC」の両方に所属する記事の場合は「A」と「C」の2つのアイコンが表示される。。。という風にしたいのですが、可能でしょうか?

    多分ですが、
    「もし(PHP if…)カテゴリが(カテゴリID)の場合はimg src” “を表示する」
    ・・・という様な記述になるだろうとは想像できるのですが、具体的にはわからないので質問させていただきました。

    分かる方いらっしゃいましたら是非教えてください。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • 何がわからないかが不明なのでお答えしにくいのですが、

    in_category()やget_the_category()

    は試していないのでしょうか。

    ご使用のテーマの対応するテンプレートファイルに、カテゴリをクラス名として挿入し、あとはスタイルシートでご希望のアイコンに加工されてはいかがでしょうか?

    たとえば、ご使用中のテーマがdefaultとして、投稿記事にカテゴリ別アイコンを付けたいならば、single.phpファイルの
    <div class="post" id="post-<?php the_ID(); ?>">
    の前に

    <?php
    $ClassAddCategory = '';
    $cats = wp_get_post_categories(get_the_ID());
    if( is_array( $cats)){
      foreach( $cats as $cat){
        $cobj = get_category( $cat);
        $ClassAddCategory .= ' category-' . $cobj->slug;
      }
    }
    ?>

    と言ったコード書き、
    <div class="post" id="post-<?php the_ID(); ?>">

    <div class="post" id="post-<?php the_ID(); ?>" class="<?php echo $ClassAddCategory; ?>">
    と変更します。
    ※これはdefaultテーマの標準投稿記事テンプレートの場合です。ご自分の使用されているテーマ/テンプレートに合わせて修正してください。

    あとはスタイルシートで対応するカテゴリのクラス名にスタイルを適用します。
    たとえば、クラス名「category-test」のタイトルの背景を替えたいならば

    .category-test h2 {
      background-color : red; /* 試しに背景を赤くする */
    }

    とします。
    アイコンぽくしたいならば、backgroudでイメージ背景を設定すればできます。
    このような方法ではいかがでしょうか?

    ただ、複数アイコンは上記のスタイルシートでは対応できません。
    でも、応用次第では可能であると思いますよ。

    モデレーター IKEDA Yuriko

    (@lilyfan)

    <?php
    $ClassAddCategory = '';
    $cats = wp_get_post_categories(get_the_ID());
    if( is_array( $cats)){
      foreach( $cats as $cat){
        $cobj = get_category( $cat);
        $ClassAddCategory .= ' category-' . $cobj->slug;
      }
    }
    ?>

    これをやるんでしたら、素直に img 要素を吐いてしまえばいいかもしれません。以下の例は、テーマのディレクトリー直下に category-SLUG.png を作っておけば、それを表示するというサンプルです (SLUG の部分は実際のカテゴリースラッグに差し替えてください)。

    <?php
    $ClassAddCategory = '';
    $cats = wp_get_post_categories(get_the_ID());
    if( is_array( $cats)){
      foreach( $cats as $cat){
        $cobj = get_category( $cat);
        $icon_file =  '/category-' . $cobj->slug . '.png';
        if (file_exists(get_template_directory() . $icon_file)) {
            echo '<img src="' . get_template_directory_uri() . $icon_file . '" alt="' . $cobj->name . '" />';
        }
      }
    }
    ?>

    皆様方ありがとうございます。

    最終的にlilyfanさんに書き込みいただいた方法で無事解決する事ができました。
    教本等にあるPHPのサンプルをコピペして使用する程度の知識しかなく、自分でPHPを書く事ができないもので………ご迷惑おかけします。。。

    ちなみにもう一つなんですが通常のサイドバーにある

    <?php wp_list_cats(‘sort_column=ID’) ?>

    を使用したカテゴリーリストの頭部分にもこれを応用した画像の挿入などできないものでしょうか?

    重ね重ね失礼します。

    モデレーター IKEDA Yuriko

    (@lilyfan)

    wp_list_cats() はちょっと古いですね。wp_list_categories() を使う場合、すべてのカテゴリーに同じアイコンをつけるならば、feed_image オプションで実現可能ですが、今回の場合は使えません。

    wp_list_categories() の出力をいじる wp_list_categories フィルターを使って、<li><li><img src="......" /> と置換するフィルター関数を作ればよさそうです。

    lilyfanさんありがとうございます。

    …が、wp_list_categories フィルター、フィルター関数………

    もう完全に混乱してます(泣

    wp_list_categories フィルターというのはプラグインか何かでしょうか???

    …ちょっと調べ回ってみます。

    liタグのclassに”cat-item cat-item-カテゴリID”と設定されているので、CSSを使って背景なら画像の設定が可能です。

    モデレーター IKEDA Yuriko

    (@lilyfan)

    wp_list_categories フィルターというのはプラグインか何かでしょうか???

    これは PHP のコードをちょっと書く、ということですね (簡単なプラグインを作るのとほぼ同じ)。ちょっと高度な技となりますが、一度やってしまえばそんなに難しいものではありません。

    しかしながら、taikiken さんのおっしゃるように CSS で対応する方が簡単ですね (この手法があることをすっかり忘れていました)。

    taikikenさん、lilyfanさんありがとうございます。
    CSSにて制御する方法で無事解決できました。ありがとうございます!

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • トピック「特定のカテゴリ記事へのアイコン表記」には新たに返信することはできません。