ワードプレスで投稿カテゴリーのデザインを一定周期でループさせる

ワードプレスのようなCMSを導入する場合、投稿カテゴリー毎にデザイン（色、形等）を設定しておいても、利用者側で自由にカテゴリーの項目数を増やされた場合に、初期設定ものになる事も多く、結果として設定したデザインが使用されないことが多いため、項目数を増やしても、設定したデザインをループさせて適応させる方法をメモ。

CSS

.category01 {
	background: #f00;
	color: #fff;
}
.category02 {
	background: #00f;
	color: #fff;
}
.category03 {
	background: #ff0;
}

CSS側でループさせたいデザインを設定。
参考例は3パターンを用意しています。

PHP（index.php等）

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li>
<span><?php the_time('Y.m.j') ?></span>
<?php
$categories = get_the_category();
$raw_class = '';
$loop_class = '';

if($categories){
	$categories = $categories[0];
	$raw_class = $categories->slug;
	if(preg_match('/^category(\d+)$/', $raw_class, $matches)){
		$number = (int) $matches[1];
		$mod = (($number - 1) % 3) + 1;
		$loop_class = 'category'.str_pad($mod, 2, '0', STR_PAD_LEFT);
	}
	echo '<span class="'.esc_attr($raw_class).' '.esc_attr($loop_class).'">'.esc_html($categories->cat_name).'</span>';
}
?>
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
</li>
<?php endwhile; else: ?>
<?php endif; ?>

前提条件として、ルールを設けないとループ処理が行えないため、今回はスラグ名(slug)を「category○○（○○は数字）」の形式に固定。
取得したスラグ名から「preg_match」関数で数字のみを取り出し、設定したデザイン数で除算することでループした値（$loop_class ）をHTMLタグに追加設定することで、デザインのループを実現しています。

また、今回はスラグ名を使用して実装しているますが「説明（$categories->description）項目」に入力して使用する方法も可能です。

尚、ループ処理自体はカテゴリーIDを使用することでも実装は可能ですが、カテゴリーIDは他の項目と共有しているため、綺麗に連番にならない場合もあります。