Woocommerceサイトで商品カテゴリはあるけど、商品が無いカテゴリが結構あるようなサイトがあったとします。その場合、商品が無いカテゴリが大量にあるとメニュー上のほとんどのカテゴリはハズレになってしまうので、積極的に非表示にした方が親切なケースもあります。
通常、wp_nav_menuで挿入しているメニューの場合、自前でカスタマイズしないとメニューの表示をダイナミックに変更することは出来ません。
今回、Woocommerceのサイトで商品カテゴリをwp_nav_menuで表示しているときに、商品登録があるカテゴリだけ表示できるようなカスタマイズを行ったので、ご紹介します。
グローバルメニューで商品がある商品カテゴリのみ表示するカスタマイズ
wp_nav_menuのhookを使って、特定の条件でcssを追加することで表示非表示を切り替えます。
商品カテゴリで、かつ、商品がある場合のみclassを追加します。
function my_special_nav_class( $classes, $item ) {
if($item->object == 'product_cat'){
$term = get_term_by( 'id',$item->object_id,'product_cat');
if ( $term->count > 0 ) {
$classes[] = 'special-class';
}
}
return $classes;
}
add_filter( 'nav_menu_css_class', 'my_special_nav_class', 10, 2 );.menu-item-object-product_cat:not(.special-class) {
display: none;
}グローバルメニューで商品カテゴリに商品数を表示するカスタマイズ
wp_nav_menuの表記を変更する場合は、the_title hookを使うカスタマイズが有名です。参考記事にあるカテゴリー用のカスタマイズをWoocommerceの商品カテゴリに適用できるように変更しました。
function my_the_title_menu_category( $title, $post_ID ) {
if ( 'nav_menu_item' == get_post_type( $post_ID ) ) {
if ( 'taxonomy' == get_post_meta( $post_ID, '_menu_item_type', true ) && 'product_cat' == get_post_meta( $post_ID, '_menu_item_object', true ) ) {
$term = get_term_by( 'id', get_post_meta( $post_ID, '_menu_item_object_id', true ), 'product_cat' );
if ( $term->count > 0 ) {
$title .= sprintf( ' (%d)', $term->count );
}
}
}
return $title;
}
add_filter( 'the_title', 'my_the_title_menu_category', 10, 2 );まとめ
ほとんどの人には、何の意味があるのか？というカスタマイズかもしれませんが、特殊な運用をしている人が一定数いて、そのような人たちには便利なカスタマイズじゃないかと思います。
