カスタムメニューで出力されるメニューのHTMLは、デフォルトでは以下のように冗長なIDやclassがふられます。
<ul id="navigation-ul-id" class="navigation-ul-class"> <li id="menu-item-1" class="current-menu-item menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1 category1"><a>Category 1</a></li> <li id="menu-item-2" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2 category2"><a>Category 2</a></li> <li id="menu-item-3" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3 category3"><a>Category 3</a></li> </ul>
このIDやclassを削除してスッキリさせる方法は以下ブログで紹介されています。
【WordPress】カスタムメニューのid・classを削除・追加|シンプルにカスタマイズ
こちらで紹介されているコードを利用して下記の状態までスッキリできます。
<ul> <li class="current-menu-item"><a>Category 1</a></li> <li><a>Category 2</a></li> <li><a>Category 3</a></li> </ul>
しかし残しておきたいクラスまで削除されます。
今回はカテゴリーのスラッグを残したかったので、上記サイトで紹介されていたコードを改変します。
リストのクラス名にカテゴリースラッグを付与する
以下がクラス名を書き換えるコードです。
function my_nav_menu_class( $classes, $item ) { // すべてのliタグのclassを削除する前に、設定したカスタムクラスを変数$custom_classに格納 if( $classes[0] ){ $custom_class = esc_attr( $classes[0] ); } // すべてのliタグのclassを削除 $classes = array(); //メニュー項目がカテゴリーならばカテゴリースラッグを含める if( $item -> object == 'category' ) { $item_cat = get_category( $item -> object_id ); $classes[] = $item_cat -> slug; } // 現在のページのliタグに、classの値としてcurrentを設定 if( $item -> current == true ) { $classes[] = 'current-menu-item'; } // カスタムクラスを設定した場合、liタグのclassの値にカスタムクラスを追加 if( $custom_class ){ $classes[] = $custom_class; } return $classes; } add_filter( 'nav_menu_css_class', 'my_nav_menu_class', 10, 2 );
上記コード内の以下4行が今回追加した部分です。
//メニュー項目がカテゴリーならばカテゴリースラッグを含める if( $item -> object == 'category' ) { $item_cat = get_category( $item -> object_id ); $classes[] = $item_cat -> slug; }
WordPress内のグローバル変数$item
にはメニュー項目の情報が格納されています。しかしここから直接カテゴリースラッグを取得することはできません。
まず$item->object
がcategory
であることを確認したら、$item->object_id
をもとにget_category()
でカテゴリー情報を取得します。取得したカテゴリー情報からスラッグをクラスに付与するという処理をしています。
if文の対象をページなどにすることで他の値をクラス名に付与する応用もできます。
デフォで付与されるクラスを除去してからまた付け直しているのでムダな処理にも感じますが、そもそもデフォルトで余計なクラスを付けすぎな仕様から見直してほしいところですね…