wp_list_categoriesのclassにスラッグを含める方法

Web Design Recipesのたかはしのりさんが、「WordPress のよくあるカスタマイズコード functions.php 多め」という記事で、

テンプレートタグ wp_list_categories に、スラッグ名のクラス付ける方法あったら、教えていただけると嬉しいです！

とおっしゃっていたので、いつものように？チャレンジしてみたのでした。

wp_list_pagesでは、page_css_classという出力されるclassへのフックがあって簡単に追加・削除が可能なのですが、wp_list_categoriesは、出力される全HTMLソースに対する wp_list_categories というフックがあるのみで、ちょっと難度があがります。

方針としては、「WordPressのカレンダーのthにclassを追加するコード（日本語限定）」と同様の方法で、正規表現でのパターン抽出と置換を行う方法を採ります。

具体的な手順は下記の通り。

1. 正規表現を用いて、wp_list_categories のHTMLソースに含まれる cat-item-nn（nnはid）からカテゴリーのidを取得する
2. 取得できた id を get_term の引数として、カテゴリー（カスタム分類）の情報を取得
3. カテゴリーの情報から、カテゴリースラッグを含んだ置換用の配列を生成
4. preg_replaceで wp_list_categories のHTMLソースを置換

今回、str_replaceではなく、preg_replaceで置換を行っているのは、cat-item-1 の置換が cat-item-10 にも適用されてしまうのを防ぐためです。

実際のコードは CODE 1 のとおり。
いつものように、利用しているテーマの functions.php に追加していただければ、wp_list_categories にカテゴリースラッグの class が出力されるようになります。

function add_cat_slug_class( $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_cat_slug_class', 10, 2 );

get_term を使うことによりデータベースへのクエリーが増えてしまう可能性があったため、「Debug BarとDebug-Bar-ExtenderでWordPressのパフォーマンスチェック」の方法でクエリー数のチェックも行いましたが、どうやらキャッシュを利用していて、増えているようなことはありませんでした。

出力はこんな感じ。いかがでしょうか。

	<li class="cat-item cat-item-40 cat-item-web-tech"><a href="https://www.warna.info/archives/category/web-tech/" title="Webの小ネタ に含まれる投稿をすべて表示">Webの小ネタ</a>
</li>
	<li class="cat-item cat-item-1 cat-item-technique"><a href="https://www.warna.info/archives/category/technique/" title="WordPressの小技 に含まれる投稿をすべて表示">WordPressの小技</a>
</li>