ブログやお知らせのカテゴリ表示を色分け

フォーラムで、「トップページのブログやインフォのカテゴリーの色分け」というトピがありました。

トップページに表示されるブログなどのトピックス一覧で、日付の横に現れるカテゴリーの色を、カテゴリーごとに変更するには難しいでしょうか。

が、これだとブログカテゴリしか色分けできません。

「お知らせ」の方も色分けできない？と質問が来ましたので、サンプルを。（他にも方法はあると思います）

基本は、フォーラムでの解決方法と同じです。

準備（タームを分解表示させリンクも付ける）

※module_loop_post2.php（抜粋＋アイキャッチ）の方でも同様です。

module_loop_post.phpを複製して（例えば）module_loop_post_color.phpを作成

１３～１７行目を変更します。

【変更前】


$taxo_catelist = get_the_term_list( $post->ID, $taxonomySlug, ' ','','');
?>
<li id="post-<?php the_ID(); ?>">
<span class="infoDate"><?php echo esc_html( get_the_date() ); ?></span>
<span class="infoCate"><?php echo $taxo_catelist; ?></span>

$taxo_catelist = get_the_term_list( $post->ID, $taxonomySlug, ' ','','');

<?php echo esc_html( get_the_date() ); ?>

<?php echo $taxo_catelist; ?>

【変更後】


//$taxo_catelist = get_the_term_list( $post->ID, $taxonomySlug, ' ','','');
$terms = get_the_terms( $post->ID, $taxonomySlug);
 ?>

<li id="post-<?php the_ID(); ?>">
<span class="infoDate"><?php echo esc_html( get_the_date() ); ?></span>
<span class="infoCate">
	<?php if ( $terms ) {
		foreach ($terms as $term) {
	?>
		<span class="<?php echo  $term->slug; ?>">
			<a href="<?php echo get_term_link($term->slug, $taxonomySlug) ?>"><?php echo  $term->name; ?></a>
		</span>
<?php  
			}
	}
?>
</span>

//$taxo_catelist = get_the_term_list( $post->ID, $taxonomySlug, ' ','','');

$terms = get_the_terms( $post->ID, $taxonomySlug);

<?php echo esc_html( get_the_date() ); ?>

<?php if ( $terms ) {

foreach ($terms as $term) {

slug; ?>">

<a href="<?php echo get_term_link($term->slug, $taxonomySlug) ?>"><?php echo $term->name; ?></a>

<?php

}

と、こんな感じで、カテゴリスラッグが追加されるので、cssでゴニョゴニョすればオッケ

モジュールを変更

TOPページの場合

module_top_list_info.php、module_top_list_post.phpの、

<?php get_template_part(‘module_loop_post’); ?>

を

<?php get_template_part(‘module_loop_post_color’); ?>

に変更

ブログ一覧、お知らせ一覧ページの場合

index.phpを同様に。

cssを追加

cssカスタマイズ（または子テーマcss）に、好みでcssを追加して下さい。

【サンプルcss】

※カテゴリスラッグ（cat1,cat2・・・）は、ご自身のサイトにあわせて下さい


.content .infoList .infoCate .cat1 a{background-color:#00ffff;}
.content .infoList .infoCate .cat2 a{background-color:#ffccff;}
.content .infoList .infoCate .cat3 a{background-color:#ffff99;}
.content .infoList .infoCate .info-cat-a a{background-color:#ccff66;}
.content .infoList .infoCate .info-cat-b a{background-color:#cc99ff;}