WordPressカスタマイズ事例

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

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

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

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

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

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

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

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カスタマイズ事例