wp_list_categoriesをカスタマイズして、カテゴリリストのli要素にスラッグ名つきのクラスを付与する テーマ販売あり

記事一覧ページのサイドバーとかにカテゴリ一覧やタグ一覧を表示して、そのカテゴリorタグによって色を変えたいことありますよね。
そのためには一覧のli要素にカテゴリorタグのスラッグ名つきのクラスを付与する必要があります。

そこで今回は、wp_list_categoriesでカテゴリリストを取得してそのli要素にスラッグ名つきのクラスを付与する方法のご紹介です。

まず表示側は以下のように記述します。

<ul>
  <li class="cat-item <?php if ( is_category( "parent-cat" ) ) {
		echo 'current-cat';
	} ?>"><a href="<?php echo esc_url( home_url( '/' ) ); ?>parent-cat/">すべて</a></li>
	<?php
	$args = array(
		'child_of' => get_category_by_slug( 'parent-cat' )->cat_ID,
		'title_li' => ''
	);

	wp_list_categories( $args ); ?>
</ul>

ここでは、カテゴリ名 =’parent-cat’の子カテゴリを取得してます。
「すべて」っていうタグをli要素の最初に入れて、親カテゴリparent-catが選択されたときに、’current-cat’というクラスを手動でつけます。
‘current-cat’は wp_list_categories関数で選択状態のカテゴリに自動で付与してくれるクラスです。
これで出力側htmlは完成。
　
次に、テーマのfunctions.phpに以下を追記して、wp_list_categoriesにフックをかけます。

function add_slug_class_to_li( $output, $args ) {
	$regex    = '/<li class="cat-item cat-item-(\d+)[^"]*/';
	$taxonomy = isset( $args['taxonomy'] ) && taxonomy_exists( $args['taxonomy'] ) ? $args['taxonomy'] : 'category';
	preg_match_all( $regex, $output, $m );

	if ( ! empty( $m[1] ) ) {
		$replace = array();
		foreach ( $m[1] as $term_id ) {
			$term = get_term( $term_id, $taxonomy );
			if ( $term && ! is_wp_error( $term ) ) {
				$replace[ '/<li class="cat-item cat-item-' . $term_id . '("| )/' ] = '<li class="cat-item cat-item-' . $term_id . ' cat-item-' . esc_attr( $term->slug ) . '$1';
			}
		}
		$output = preg_replace( array_keys( $replace ), $replace, $output );
	}
	return $output;
}
add_filter( 'wp_list_categories', 'add_slug_class_to_li', 10, 2 );

これで、各カテゴリ（orタグorターム）のli要素に cat-item-‘スラッグ名’　というクラスを付与してくれます。
　
あとはCSSで色付けすれば完成です。こんな感じ。

/* wp_list_categoriesが出力する標準クラスの非選択状態 */
.cat-item a{
	border:2px solid #55E0A2;
	color:#55E0A2;
	font-size:0.9rem;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	padding:3px 10px;
	width:100%;
	display:block;
	padding:5px 10px;
}
/* wp_list_categoriesが出力する標準クラスの選択状態 */
.cat-item.current-cat a,.cat-item a:hover{
	background-color:#55E0A2;
	color:#FFFFFF;
}
/* child-catというカテゴリの非選択状態 */
.cat-item-child-cat a{
	border:2px solid #ff5362;
	color:#ff5362;
}
/* child-catというカテゴリの選択状態 */
.cat-item-child-cat.current-cat a,.cat-item-child-cat a:hover{
	background-color:#ff5362;
	color:#FFFFFF;
}

けっこう使えると思います。

---

【この事例を解決するためのWordPressテーマを購入できます】

現在あなたが利用されているWordPressテーマを活かしたまま、このページの事例を解決できるWordPressテーマを、子テーマとして購入できます。
この子テーマを有効化するだけで、現在お使いのデザインテーマにこの事例解決の機能が自動付与されます。
デザインが入っていないため、一般より格段に低い価格（事例の難易度により200円～1.3万円）です。
※ テーマは買い切りです
※ 自由に改変してお使いいただいて構いません
※ すでに子テーマでサイト運用されている方は、当該子テーマをマージしてください