サポート » 使い方全般 » 複数のカテゴリをそれぞれ任意の場所に表示させたい

  • 解決済 white-beard

    (@white-beard)


    PHP素人ですが質問させてください。
    記事の投稿の際に、4つのカテゴリを選択しています。
    例)
    色(親1)
    ・白(子1)
    ・赤(子2)

    技術(親2)
    ・CSS(子3)
    ・Flash(子4)

    カテゴリ(親3)
    ・サービス(子5)
    ・ショッピング(子6)

    レイアウト(親4)
    ・typeA(子7)
    ・typeB(子8)

    色だけは複数選択できるとし、その他は一つしか選択できないとします。
    記事一覧ページの各記事の表示エリアに、それぞれをアイコンで、「色はココとココ、レイアウトはココ」などのように指定した好きな場所に表示させたい思っています。
    ちなみに表示させたいのは子カテゴリのみですので、

    <?php wp_list_categories(‘child_of=親カテゴリのID’); ?>

    と、記述しました。
    が上記だと子カテゴリを全て表示させてしまうことになり、imgタグもどこに書いてよいかわかりません。
    次に、

    <?php the_category(‘, ‘); ?>

    と記述しましたが、これだと該当する全てのカテゴリを一発で持ってきてしまいます。
    記事が該当する子カテゴリを取得し、個別に画像化するにはどうしたら良いですか?
    ご教示いただけると幸いです。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • functions.php に以下を追加して

    function my_categories(){
      $cats = get_the_category();
      foreach((array)$cats as $cat)
        if($cat->category_parent != 0)
          echo '<img class="cat-' . $cat->cat_ID
    	. '" src="' . get_bloginfo('template_url')
    	. '/images/' . $cat->category_nicename
    	. '.jpg" alt="' . $cat->cat_name . '" />';
    }

    記事一覧ページのループ内で
    <?php my_categories() ?>
    とすれば OK です。画像のパスは適宜変更してください。

    好きな場所に表示させたい

    各 img タグにクラスが指定してあるので css で位置を指定します。
    例)※ img の親要素は position:relative;
    .cat-1{
    position:absolute;
    left:100px;
    top:100px;
    }

    トピック投稿者 white-beard

    (@white-beard)

    kz様、ありがとうございます!
    表示は無事されました!
    ただ、この方法だと
    ①膨大な子カテゴリIDをCSSに記述しなければならない
    ②色は複数の子カテゴリが選択できるのでpositionで指定すると重なってしまう
    といった問題がでてきてしまいます。
    無理矢理この方法でやってしまってもいいと思うのですが、他にもっと良い案はありますでしょうか?
    頭が悪いので良い方法が思い浮かびません。。

    色はココとココ、レイアウトはココ

    辺りを具体的に明示していただくとアドバイスし易いです。

    親カテゴリ単位で div でまとめた中に、子カテゴリを img 列挙で良いなら以下。

    function my_categories(){
      $cats = get_the_category();
      $group = array();
      foreach((array)$cats as $cat)
        if($cat->category_parent != 0)
          $group[$cat->category_parent]
            .= '<img src="' . get_bloginfo('template_url')
    	.  '/images/' . $cat->category_nicename
    	.  '.jpg" alt="' . $cat->cat_name . '" />';
      foreach($group as $parent_id => $output)
        echo '<div class="cat-' . $parent_id . '">' . $output . '</div>';
    }

    配置は CSS でお好みに。

    トピック投稿者 white-beard

    (@white-beard)

    分かりづらい説明で申し訳ありませんでしたm(_ _)m
    divの中にimg列挙でイメージしていた通りの表示を実現できました。

    大変恐縮なのですが、書き忘れていたことがありまして、
    子カテゴリの一部は画像ではなく、テキストで表示させたいのです。
    これは実現可能でしょうか?
    何度も申し訳ありませんがお願いいたします。

    子カテゴリの一部は画像ではなく、テキストで表示

    書かれている通りに、
     テキストで表示したい子カテゴリの場合は
     img タグでなくて
     テキスト(span タグとか)で出力
    すればOKです。

    一部抜粋(未検証)
    テキスト表示する子カテゴリを指定する場合:

    $totext = array(3, 4); // テキスト表示する子カテゴリ達
        if($cat->category_parent != 0){
          if(in_array($cat->cat_ID, $totext))
            $group[$cat->category_parent]
              .= '<span>' . $cat->cat_name . '</span>';
          else
            $group[$cat->category_parent]
              .= '<img src="' . get_bloginfo('template_url')
    	  .  '/images/' . $cat->category_nicename
    	  .  '.jpg" alt="' . $cat->cat_name . '" />';
        }

    親カテゴリ達でテキスト表示/イメージ表示を判断できるなら
    $totext に当該親カテゴリ達を入れて
    in_array($cat->category_parent, $totext)

     

    トピック投稿者 white-beard

    (@white-beard)

    kz様、何度も本当にありがとうございます!
    親カテゴリたちでテキスト表示orイメージ表示の判断が可能でしたので、

    function my_categories(){
    $cats = get_the_category();
    $group = array();
    foreach((array)$cats as $cat)
    $totext = array(55, 61, 75); // テキスト表示する子カテゴリの親達
    if($cat->category_parent != 0){
    if(in_array($cat->category_parent, $totext))
    $group[$cat->category_parent]
    .= ‘<span>’ . $cat->cat_name . ‘</span>’;
    else
    $group[$cat->category_parent]
    .= ‘<img src=”/img/search/c_’ . $cat->category_nicename
    . ‘.gif” alt=”‘ . $cat->cat_name . ‘” />’;
    }
    foreach($group as $parent_id => $output)
    echo ‘<div class=”cat-‘ . $parent_id . ‘”>’ . $output . ‘</div>’;
    }

    と書いてみましたが、それぞれ、一つの子カテゴリしか表示されず、表示される子カテゴリ達も順番がバラバラです。
    PHPを知らな過ぎで大変恐縮なのですが、これで解決できるかと思いますのでご教示お願いできますでしょうか?

    始めの foreach で実行する内容が 2文に増えたので
    その範囲を指定してあげれば OK です。

    function my_categories(){
      $cats = get_the_category();
      $group = array();
      foreach((array)$cats as $cat){ // begin
        $totext = array(55, 61, 75); // テキスト表示する子カテゴリの親達
        if($cat->category_parent != 0){
          if(in_array($cat->category_parent, $totext))
            $group[$cat->category_parent]
              .= '<span>' . $cat->cat_name . '</span>';
          else
            $group[$cat->category_parent]
              .= '<img src="/img/search/c_' . $cat->category_nicename
              .  '.gif" alt="' . $cat->cat_name . '" />';
        }
      } // end
      foreach($group as $parent_id => $output)
        echo '<div class="cat-' . $parent_id . '">' . $output . '</div>';
    }

    トピック投稿者 white-beard

    (@white-beard)

    kz様、最後まで付き合って頂き、本当に感謝しております!
    思った通りのレイアウトができました☆
    大変勉強になりました。
    ありがとうございました!!m(_ _)m

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「複数のカテゴリをそれぞれ任意の場所に表示させたい」には新たに返信することはできません。