カテゴリを表示するときに色分けする

記事一覧などでカテゴリーの表示を行う際に「お知らせ」は赤色、「イベント情報」はグリーンなど色分けを行いたい。

まず考えたのがテンプレートでもfunctionsでも良いのでどこかに関数を定義して記事に設定されたカテゴリー名から対応するカラーコードを返す方法。一見するとそれで良いように思ったが問題なのは「カテゴリーは今後増えたり減ったりするし、追加されるカテゴリーは今後の運営しだい」ということ。

あらかじめ関数でカラーコードを定義する場合、入力されるカテゴリーがわからないと対応できないしカテゴリーの追加変更のみならず、お知らせはやっぱり青色にして!などのちょっとした変更でもコードの修正が必要になってしまう。

そこで、今回はカテゴリーの「説明」欄を利用することにした。

カテゴリーの説明欄にそのカテゴリーに当てはめたいカラーコードを入力しておき、カテゴリーを表示したいときに説明欄を読み込んで背景色に利用する。

あとは記事情報を取得したときにカテゴリーに設定された説明欄を読み込んでやれば良い。

if ($the_query->have_posts()) :
?>
<div class="news_container">
    <table>
<?php
  while ($the_query->have_posts()) : $the_query->the_post();
?>
        <tr>
            <td>
                <?php
                //記事のカテゴリの最初を取得
                $cat = get_the_category();
                $c_name = $cat[0] ->cat_name;
                $c_desc = $cat[0] ->description;
                ?>
                      <?php
                      echo "<span class='category_box'";
                      echo "style= background-color:" . $c_desc . ">";
                      echo $c_name;
                      ?>
                </span>
            </td>
            <td>
                <?php  echo get_the_date(); ?>
            </td>
            <td>
                <a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a>
            </td>
        </tr>
<?php
  endwhile;
endif;

今回はカテゴリーは一番最初のもの1つだけを表示することにしたのでget_the_category()で取得したオブジェクトから0番目のものをそれぞれ$c_nameに名前、$c_descに説明を入力。echo文でHTMLを出力する際にタグに直接スタイルを記述してカラーコードとカテゴリー名を記述している。(その他のスタイルはcategory_boxにて指定)

今後、カテゴリーが増えた場合、説明欄にカラーコードを入力しておけばコードを修正することなくカテゴリーの色分けが可能。

タイトルとURLをコピーしました