WPでカテゴリーアイコンにclassを付与して色変更、画像変更する方法

WordPressの一覧ページ、アーカイブやトップページなどで、記事のカテゴリー名を表示しているアイコンをカテゴリーごとに色を変えたり、画像を変えたりする方法です。カテゴリーID、またはカテゴリースラッグを取得して、カテゴリーのアイコンにCSSクラスを付与してデザイン上の見栄えを変えます。

元となるテンプレートの記述内容

まず例で新着記事５件を表示させる一覧のテンプレートをもとに説明します。

<?php 
query_posts('showposts=5');
if (have_posts()) : 
while (have_posts()) : 
the_post();
?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a><span class="post-cat cat<?php echo $cat->cat_ID; ?>"><?php the_category(', ') ?></span><span class="post-data"><?php the_time(get_option('date_format')); //the_time('Y年m月d日') ?></span></li>
<?php
endwhile;
endif;
?>

↑上記のテンプレートにカテゴリーIDを表示させるためのコードを追記します。

挿入するコード２か所

<?php 
 $cat = get_the_category();
 $cat = $cat[0];
?>

<?php echo $cat->cat_ID; ?>

表示させたいカテゴリーアイコン箇所のclassに挿入することで、カテゴリーIDをclass名とすることができます。

最終的なテンプレートの記述内容

コードを挿入したテンプレートの記述内容は以下になります。

カテゴリーIDを表示させる場合

class付与される箇所はカテゴリーIDの表示のみだと数字だけになってしまうので「cat-{カテゴリーID}」となるように「cat-」を追記しています。（「cat-」でなくてなんでも自由でいいです）

<?php 
 $cat = get_the_category();
 $cat = $cat[0];
?>
<?php 
query_posts('showposts=5');
if (have_posts()) : 
while (have_posts()) : 
the_post();
?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a><span class="post-cat cat-<?php echo $cat->cat_ID; ?>"><?php the_category(', ') ?></span><span class="post-data"><?php the_time(get_option( 'date_format')); //the_time('Y年m月d日') ?></span></li>
<?php
endwhile;
endif;
?>

カテゴリースラッグを表示させる場合

こちらはカテゴリーIDの表示ではなくてカテゴリースラッグで表示する場合の記述内容です。「cat_ID」の箇所が「category_nicename」になっています。こちらの場合はカテゴリースラッグが日本語になっている場合はclassとして使用できないので注意です。

<?php 
 $cat = get_the_category();
 $cat = $cat[0];
?>
<?php 
query_posts('showposts=5');
if (have_posts()) : 
while (have_posts()) : 
the_post();
?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a><span class="post-cat cat-<?php echo $cat->category_nicename; ?>"><?php the_category(', ') ?></span><span class="post-data"><?php the_time(get_option( 'date_format')); //the_time('Y年m月d日') ?></span></li>
<?php
endwhile;
endif;
?>

画像を変える場合の最終的なテンプレートの記述内容

カテゴリーアイコンを画像で表示させたい場合の画像変更のテンプレートの記述内容は以下になります。画像のファイル名にをカテゴリーIDか、カテゴリースラッグを含めるのが条件です。

緑文字の箇所が変更される画像のタグです。画像の場所は設置する場所によって変更してください。

カテゴリーIDを表示させる場合

<?php 
 $cat = get_the_category();
 $cat = $cat[0];
?>
<?php 
query_posts('showposts=5');
if (have_posts()) : 
while (have_posts()) : 
the_post();
?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a><span class="post-cat"><img src="<?php echo get_template_directory_uri(); ?>/images/icon-<?php echo $cat->cat_ID; ?>.png" alt="<?php the_category(', ') ?>" width="" height="" /></span><span class="post-data"><?php the_time(get_option( 'date_format')); //the_time('Y年m月d日') ?></span></li>
<?php
endwhile;
endif;
?>

※画像のファイル名は「icon-{カテゴリーID}.png」としています。

カテゴリースラッグを表示させる場合

<?php 
 $cat = get_the_category();
 $cat = $cat[0];
?>
<?php 
query_posts('showposts=5');
if (have_posts()) : 
while (have_posts()) : 
the_post();
?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a><span class="post-cat"><img src="<?php echo get_template_directory_uri(); ?>/images/icon-<?php echo $cat->category_nicename; ?>.png" alt="<?php the_category(', ') ?>" width="" height="" /></span><span class="post-data"><?php the_time(get_option( 'date_format')); //the_time('Y年m月d日') ?></span></li>
<?php
endwhile;
endif;
?>

※画像のファイル名は「icon-{カテゴリースラッグ}.png」としています。