・wp_list_categoriesのクラスにスラッグ付与するには？
こんな疑問にお答えします。
カテゴリーリストやターム一覧を出したい時に、wp_list_categoriesを使うときありますよね。
デザインによっては、出力された特定ターム部分のみ色を変えたい場合もあるかと。
ただデフォルトのまま出力しちゃうと、その指定は難しめ。
ただあるコードを記述すれば、スラッグがクラス名に付与されるため、指定しやすくなるんですよね。
簡単にできるよ！
ということで、この記事では「wp_list_categoriesのクラスにスラッグ付与」について解説していきます！
・wp_list_categoriesのクラスにスラッグ付与
・wp_list_categoriesのクラスにスラッグ付与【特定タクソノミー】
・wp_list_categoriesのクラスにスラッグ付与【複数のタクソノミー】
目次
【解説】wp_list_categoriesのクラスにスラッグ付与【WordPress】
- 通常のコード
- クラス名にスラッグを付与するコード
順に見ていきましょう。
通常のコードがこちら。
<ul>
<?php wp_list_categories(); ?>
</ul>実際にHTMLに表示されるコードがこちら↓
<ul>
<li class="cat-item cat-item-1"><a href="#">HTML</a></li>
<li class="cat-item cat-item-2"><a href="#">CSS</a></li>
<li class="cat-item cat-item-3"><a href="#">JavaScript</a></li>
<li class="cat-item cat-item-4"><a href="#">WordPress</a></li>
</ul>これだと特定のカテゴリーに対して色を変えたいとなったとき、指定が難しいです。
例えば「JavaScript」という文字の色を変えたいとします。
「cat-item-3」クラスを指定して色を変えても、もし順番が変わったら、違うカテゴリーに対して適用されちゃいますよね。
特定カテゴリーに対して、スラッグをクラスに付与すれば、この問題は解決できます。
スラッグに対してCSSを記述すれば、順番が変わろうとも関係ないですからね。
クラス名にスラッグを付与するコードがこちら。functions.phpに記述します。
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 );実際に表示されるコードがこちら↓
<ul>
<li class="cat-item cat-item-1 cat-item-html"><a href="#">HTML</a></li>
<li class="cat-item cat-item-2 cat-item-css"><a href="#">CSS</a></li>
<li class="cat-item cat-item-3 cat-item-javascript"><a href="#">JavaScript</a></li>
<li class="cat-item cat-item-4 cat-item-wordpress"><a href="#">WordPress</a></li>
</ul>クラス名に「cat-item-スラッグ名」が付与されます。
この場合「JavaScript」という文字の色を変えたいとします。
「cat-item-javascript」クラスに対して色を指定すれば、順番が変わったとしても、「JavaScript」に対して適用されますよね。
これで特定部分に対して適用さすことができました。
3行目の「タクソノミー名」の部分に、指定したいタクソノミーを記述しましょう。
$taxonomy = isset( $args['taxonomy'] ) && taxonomy_exists( $args['taxonomy'] ) ? $args['taxonomy'] : 'タクソノミー名';例として「workというカスタム投稿タイプのwork_catというタクソノミーの場合」を挙げてみます。
その場合は3行目部分を下記に変えればOK。
$taxonomy = isset( $args['taxonomy'] ) && taxonomy_exists( $args['taxonomy'] ) ? $args['taxonomy'] : 'work_cat';出力は下記の感じで↓
<ul>
<?php wp_list_categories( array(
'taxonomy' => 'work_cat',
'title_li' => '',
) ); ?>
</ul>catogoryだけでなく、work_catというタクソノミーに対しても「wp_list_categoriesのクラスにスラッグ付与したい」場合もあるはず。
その場合は下記のように記述すればOK。
function add_taxonomy_slug_class( $output, $args ) {
$regex = '/<li class="cat-item cat-item-([\d]+)[^"]*">/';
// タクソノミーのスラッグを指定する配列
$taxonomies = array('category', 'work_cat');
// カテゴリーのリストのHTMLからカテゴリーIDを取得する
preg_match_all( $regex, $output, $m );
foreach ($taxonomies as $taxonomy) {
if ( isset( $args['taxonomy'] ) && $args['taxonomy'] == $taxonomy && !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_taxonomy_slug_class', 10, 2 );
下記部分に複数のタクソノミーを追加していきます。
$taxonomies = array('category', 'work_cat');
【解説】wp_list_categoriesのクラスにスラッグ付与【WordPress】：まとめ
- 通常の場合、特定のカテゴリーに対しての指定が難しい。順番が変わると適用されないため。
- functions.phpにてクラス名にスラッグを付与させる
- スラッグのクラス名に対して指定すれば、順番が変わっても適用される
wp_list_categoriesのクラスにスラッグ付与したい場合は使ってみよう！
