WP PHP

カテゴリー毎に色違いのアイコンを出したい

トップページの新着一覧などで、各投稿のカテゴリーがひと目で分かるように、色を変えたり、画像を出し分けたい。

取得したカテゴリーにclassを付ける

<?php the_category(); ?>

の代わりに

<?php $cat = get_the_category(); $cat = $cat[0]; {
  echo '<span class="cat-' . $cat->category_nicename . '" >'; 
 } ?>
<?php the_category(' '); ?></span>

を使う。

これで取得されたカテゴリー名は、cat-カテゴリースラッグのclassが付くので、あとはcssで装飾。
例えばお知らせ(topics)カテゴリの場合

.cat-topics a{
 display:inline-block;
 padding:0 20px;
 font-size:12px;
 font-weight:bold;
 line-height:20px;
 color:#fff;
 background:#ff7800;
 border-radius:4px;
}
home > TIPS > WP PHP > カテゴリー毎に色違いのアイコンを出したい

Copyright © 2012 SMILEWORKS All Rights Reserved.