WordPressでお知らせ一覧リストのアイコンをカテゴリーごとに自動で変更させる

WordPressで制作するコーポレートサイトには「お知らせ」や「新着情報」を設置するのですが、カテゴリーごとにアイコンを変えたいなと思いました。

せっかくWordPressで作っているんだから、取得できる情報を活用して、勝手に切り替わるようにしました。その時に実装したメモです。

カテゴリーのスラッグを活用する

WordPressでカテゴリーを作成する時に設定するスラッグ。このスラッグを取得して、投稿のリストごとにアイコン（画像）を変える方法。

簡単に言い換えれば、取得したスラッグ名をCSSのクラスや画像ファイル名の一部分で置き換えます。

CSSクラスをカテゴリースラッグにする方法

カテゴリーナンバー「2」「3」「4」から5記事読み込んで、それぞれのliタグのclassをカテゴリースラッグに割り当てます。

<ul>
<?php
$posts = get_posts('numberposts=5&category=2,3,4');
global $post;
?>
<?php
if($posts): foreach($posts as $post): setup_postdata($post); ?>

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

<li class="<?php echo $cat->category_nicename; ?>"><?php the_time('Y.m.d'); ?><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

<?php endforeach; endif;
?>
</ul>

あとは、CSSのリストアイコンや背景なりで画像を設定すればOK。

画像ファイル名の一部分をカテゴリースラッグにする方法

次に、imgタグで読み込む画像ファイルをカテゴリースラッグに置き換える方法です。やや強引ですが、CSSを使わないのでシンプル。

<?php
$posts = get_posts('numberposts=5&category=2,3,4');
global $post;
?>
<?php
if($posts): foreach($posts as $post): setup_postdata($post); ?>
<table>
	<tr>
	<th><?php the_time('Y.m.d'); ?></th>
<?php
	$cat = get_the_category();
	$cat = $cat[0];
?>
	<td class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/topics_icon_<?php echo $cat->category_nicename; ?>.gif" alt="" /></td>
	<td><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></td>
	</tr>
</table>

<?php endforeach; endif;
?>

カテゴリースラッグは便利

今回はリストの画像を置き換える方法でしたが、このやり方を流用すれば他にも便利なことができそうですね。