サポート » 使い方全般 » 新着記事表示にカテゴリー名(複数)を色分けして表示

  • トップページに新着記事一覧を表示させており、投稿記事が所属するカテゴリー名も色分けして表示させています。
    1つのカテゴリーに所属しているだけなら表示できたのですが、2つ以上の複数カテゴリーに所属している場合の色分け表示ができなくつまづいています。

    現在はこのようなコードで表示させていました。
    CSSで色指定して、slugで判断しています。

    `
    <?php
    query_posts(array(‘post_type’ => ‘post’));
    while (have_posts()) :
    the_post();
    <?php
    $cat_info = apt_category_info();
    ?>
    <div class=”subject”>
    <div id=”top_news_img”>
    <p><a href=”<?php the_permalink(); ?>”><?php
    if (has_post_thumbnail()) :
    the_post_thumbnail(array(200,150));
    else :
    echo “No Image”;
    endif; ?></a></p>
    </div>
    <div id=”top_news_main”>
    <p> <span class=”date”>
    <?php the_time(‘Y年m月d日’); ?>
    </span>
    <span class=”news_category <?php echo esc_attr($cat_info->slug); ?>”><?php echo esc_html($cat_info->name); ?></span></p>
    <h3><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h3>
    <?php the_excerpt(); ?>
    </div>
    </div>
    endwhile;
    wp_reset_query();
    ?>
    `

    色々と調べてみたのですが、単純に記事が所属しているカテゴリー名を複数表示するだけなら可能ですが色分けして複数表示ということができません。

    どなたかご教授お願いいたします。
    初めて書かせていただきましたので、説明漏れ・記入漏れなどありましたらご指摘願います。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • モデレーター gatespace

    (@gatespace)

    hati_8さん

    質問内容とそれますが、トピックスのタイトルが消えてしまっています。
    お手数ですが

    • 消える前に入れていたタイトル(覚えている範囲でもかまいません)
    • 何か気づいたこと

    をお教えください

    トピック投稿者 hati_8

    (@hati_8)

    こちらに記入させていただきます。

    入力していたタイトルです。
    「 新着記事表示にカテゴリー名を色分けして表示する方法(複数カテゴリーに所属している場合) 」

    タイトルと本文を入力し、投稿ボタンを押したところタイトルだけが反映されなかった様子でした。

    モデレーター gatespace

    (@gatespace)

    こちらで短めのタイトルに変更しておきました

    トピック投稿者 hati_8

    (@hati_8)

    タイトル長かったんですかね・・・
    ありがとうございました。助かりました!

    こんにちは、

    特別な関数を使っているようですが、そのような関数を使わなくてもちょっとした工夫で配色は可能です。

    自動配色のサンプルを下に書いておきますので、工夫してみてください

    <div style="border:1px solid #ccc;padding:20px;background:#000;">
    <?php
      $opecity        = 1;
      $category_count = 20;
      $categories     =  get_categories( array ( 'number' => $category_count ) );
      $html           = '<span class="cat-figure indv-color-%1$s">%2$s</span>';
      $css_b          = '.indv-color-%1$s{ background: rgba( %2$s, %3$s, %4$s, %5$s);}'."\n";
      $css_f          = '.indv-color-%1$s{ color: %2$s; }'."\n";
      $define_style   = '';
    
      foreach ($categories as $key=>$category) {
    
      	printf( $html, $category->term_id, $category->cat_name );
    
    	$color_value       = intval( ( 255 / $category_count ) * (int) $key ); 
    
    	$define_style     .= sprintf( $css_b, $category->term_id, $color_value, $color_value, $color_value, $opecity );
    
    	if( $color_value > 180 ){
    
    		$define_style .= sprintf( $css_f, $category->term_id, '#000' );
    	} else {
    
    		$define_style .= sprintf( $css_f, $category->term_id, '#fff' );
    	}
    
      }
    ?>
     <style scoped>
    .cat-figure{
    	padding:3px;
    	margin:3px;
    	border-radius:5px;
    	display:inline-block;
    	border:1px solid #999;
    	}
    <?php echo $define_style;?>
    </style>
    </div>

    テンプレートの適当な場所に貼り付けてみてください。

    モデレーター gatespace

    (@gatespace)

    そういえば、そういう記事を以前書いたことがあったのでした。

    WordPressのカテゴリー編集画面にカラーピッカーをつける
    http://gatespace.jp/2012/09/28/add-extra-fields-for-category/

    もっとも書いたときのバージョンが古いので、カラーピッカー部分は最新版で検証していません。
    ただ、表示部分のロジックは参考になるかと思います。

    トピック投稿者 hati_8

    (@hati_8)

    返信遅くなってしまい大変申し訳ありません。
    nobitaさん、gatespaceさんありがとうございます。

    カラーピッカーの記事は調べている最中に拝見させていただき、こんな便利なことがあるんだ!
    と思ったのですが、今回のクライアントが親切で機能をつけるとどんどん追加要望が後からでてくるんで、この使用でやってください!の最低限でいこうかと・・
    あっちで増やせるようにしたらカテゴリーを細分化して100くらい作られそうなので。

    で、本題なのですがnobitaさんに提示して頂いた自動配色のサンプルを自分なりに使用してみました。
    これも便利な機能だな、と感激していたのですが先方からのダメ出しと変更が。。

    ・カテゴリー名は白文字表示で文字バックの色を指定した色に変える。
    ・記事を書いた時に選択したカテゴリ名がタイトルの上に全て横並びに表示される。
    ・新着記事の表示件数は新着順にタイトル、日時、本文(120文字)、サムネイル付きで4件表示。

    といった仕様で落ち着きそうです。(変更かからなければ)

    といったところで振り出しに戻ってしまいました。
    slugを使いカテゴリー名にCSSを適用させるといったイメージで作っていたのですが、
    2つ以上のカテゴリーに所属している記事を呼び出したときにカテゴリー名毎にCSSを適用させるイメージができません。
    (同時にslugを全て呼び出してしまうので、カテゴリー名に適切なslugを適用できない)

    nobitaさんのコードを参考にもう少し色々と調べて考えてみます。

    続けて、ただ単純にカテゴリー名の文字背景に色付けして、さらに複数のカテゴリー名を色分けして表示する方法でもっと別の方法がありましたら情報やヒントお願いいたします。

    まだまだ理解できてない部分も多いので勉強させていただきたいと思いますのでよろしくお願いいたします。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「新着記事表示にカテゴリー名(複数)を色分けして表示」には新たに返信することはできません。