memocarilog

カスタムメニューを使うとオリジナルのメニューを管理画面で簡単に作れて便利ですが、カスタムメニューで生成されるコードは余計な div や id、class が入ってしまいます。この余分な部分を削除して、カレントクラス表示の機能は残す方法です。

カスタムメニューの基本的な使い方は以下の過去記事にまとめています。

カスタムメニューをデフォルトのまま表示したコードは以下のようになっています。

これをスッキリ必要なものだけにしていきます。具体的には、ul 要素を囲っている div 要素を削除し、ul と li 要素に付与されているID、クラスを削除します。

ただ、現在開いているページメニューに付けられる current-menu-item クラスは便利なので、それと同じように表示中ページの li には current のクラスを付けるようにします。

メニューを囲っている div要素と、ul要素に付与されているID・クラスを削除する

カスタムメニューは表示したいテンプレートファイルへ <?php wp_nav_menu(); ?> を記入して表示しますが、この wp_nav_menu() タグに以下のようなパラメータを渡すことで、div要素、ul要素に付いているID、クラスを削除できます。

<?php wp_nav_menu(
	array(
		'container' => false ,
		'items_wrap' => '<ul>%3$s</ul>'
	)
); ?>

囲っている div 要素を削除したい場合はパラメータ ‘container’ を false にします。もしこの div を nav 要素にしたい場合はここに ‘nav’ を入れます。

ul 要素に付いているIDとクラスは ‘items_wrap’ に ‘<ul>%3$s</ul>’ を渡すことで表示しないようにできます。「%3$s」というのはメニューリストを表示する為の文字列のため省略した場合メニューの表示がされなくなってしまうので注意です。

li 要素のID・クラスを削除し、表示中ページの li に current クラスを付ける

li 要素のクラスの操作は nav_menu_css_class フィルターフック、IDの操作は nav_menu_item_id フィルターフックを使って行います。以下のコードを functions.php へ記入します。

// クラスを削除して、表示中メニューに 'current' クラスを付与する
add_filter( 'nav_menu_css_class', 'remove_to_currentClass', 10, 2 );
function remove_to_currentClass( $classes, $item ) {
	$classes = array();
	if( $item -> current == true ) {
        $classes[] = 'current';
    }
	return $classes;
}

// ID を削除する 
add_filter('nav_menu_item_id', 'removeId', 10);
function removeId( $id ){ 
	return $id = array(); 
}

nav_menu_css_class と nav_menu_item_id フィルターフックで、 li 要素に付けられるはずのクラスとIDが入った配列（$classes/$id）を空にしてクラスとIDを削除します。

remove_to_currentClass の第二引数（$item）で各liのオブジェクトを取得できるので、その中に含まれる current 情報が true の場合には current という文字列を配列（$classes）に入れて、currentクラス表示できるようにします。

これでカスタムメニューのコードがスッキリしました。下の画像ではホームのページを開いているので、該当する最初の li 要素に 「current」クラスがついています。

カスタムクラスが設定されていた場合は、そのクラスを li 要素へ付ける

カスタムメニューには、各リンクに対して個別にカスタムクラスをつけるという便利な機能があります。（設定画面へCSS class が表示されていない場合は画面上部の「表示オプション」から表示できます。）

カスタムクラスは $classes[0] へ格納されるようなので、これを li 要素へ付与されるようにするには、前項までのコードに少しコードを加え、以下のようにします。

add_filter( 'nav_menu_css_class', 'my_custom_nav', 10, 2 );
function my_custom_nav( $classes, $item ) {

    // 	$classes を空にする前にカスタムクラスを変数へ入れておく		
    if( !empty( $classes[0] ) ){
        $custom_class = esc_attr( $classes[0] );
    }
    
    $classes = array();
    if( $item -> current == true ) {
        $classes[] = 'current';
    }
    // 先に変数に入れておいたカスタムクラス名を配列へ入れる
    if( !empty( $custom_class ) ){
	    $classes[] = $custom_class;
    }
    return $classes;
}

これで、カスタムクラスも付けられるようになりました。