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に以下を追記して、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カスタマイズ事例