カテゴリーごとに別々のアイコンを表示する

投稿記事の一覧を表示しているページなどで、すべての複数の投稿カテゴリーが羅列される際に、それぞれがどのカテゴリーに属する記事なのかがパッと見で視覚的にわかるようにしたいとき、該当するカテゴリーに応じてアイコンなどを付けるといいかもしれません。

そこでこのブログに表示しているようなテキスト表記でカテゴリー名を表記し、背景の色を変更することで見分けやすいようにしてみます。

CSSに追記

#cate-icon {
	clear:both;
	float:left;
	min-width:60px;	//テキストの文字数により極端に横幅が小さくなってしまうのを防ぐために指定しています
	margin-right:10px;
	font-size:10px;
	font-weight:bold;
	text-align:center;
	background-color:#999;
	color:#FFF;
	padding:2px 5px;
}
/*カテゴリーをクラス名にして存在する数だけ用意します。*/
.column {
	background-color: #F00;
}
.news {
	background-color: #0F0;
}
.topics {
	background-color: #00F;
}

#cate-icon {

clear:both;

float:left;

min-width:60px; //テキストの文字数により極端に横幅が小さくなってしまうのを防ぐために指定しています

margin-right:10px;

font-size:10px;

font-weight:bold;

text-align:center;

background-color:#999;

color:#FFF;

padding:2px 5px;

}

/*カテゴリーをクラス名にして存在する数だけ用意します。*/

.column {

background-color: #F00;

}

.news {

background-color: #0F0;

}

.topics {

background-color: #00F;

}

PHPに追記

カテゴリー名を表示したい部分に以下のコードを書き込みます。

<span id="cate-icon" class="<?php $cat = get_the_category(); $cat = $cat[0]; {echo "$cat->category_nicename";} ?>"><?php echo $cat->cat_name; ?></span>

1	<span id="cate-icon" class="<?php $cat = get_the_category(); $cat = $cat[0]; {echo "$cat->category_nicename";} ?>"><?php echo $cat->cat_name; ?></span>

以上でアイコンが表示します。

テキストではなくて、画像にしたい場合は、CSSでそのように設定すれば問題ないと思います。

補足

get_the_category();テンプレートタグ

<?php get_the_category( $post_id ); ?>

1	<?php get_the_category( $post_id ); ?>

$post_id(整数,オプション)投稿ID
初期値は$post->ID(現在の投稿ID)

get_the_categoryは、現在の記事が属しているカテゴリを調べてくれます。
このタグは、パラメータに投稿IDを渡すことで、ループの外側でも使用することができます。

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

<?php

　$cat = get_the_category();

　$cat = $cat[0];

　echo $cat->cat_ID;

変数$catにカテゴリー名を代入
$catに現在の記事が属している1番目のカテゴリー情報を取得する
変数「cat_ID」でカテゴリー名を取り出します。

▼変数

カテゴリID	term_id
カテゴリ名	name
カテゴリスラッグ名	slug
カテゴリーグループ	term_group
カテゴリタクソノミーID	term_taxonomy_id
タクソノミー名	taxonomy
カテゴリの説明	descripttion
親カテゴリ	parent
カテゴリに登録されている記事数	count
カテゴリID	cat_ID
カテゴリの説明	category_description
カテゴリ名	cat_name
カテゴリスラッグ名	category_nicename
親カテゴリ	category_parent