[WordPress] カスタムメニューのコードから余計なタグやクラスを削除しスッキリさせ、かつカレントクラス機能を付ける

カスタムメニューを使うとオリジナルのメニューを管理画面で簡単に作れて便利ですが、カスタムメニューで生成されるコードは余計な 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 が表示されていない場合は画面上部の「表示オプション」から表示できます。)

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;
}

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

Related Article

5 Comments & Tracbacks

  • riotchi 2016-07-30 1:49 AM

    ありがとうございます!
    ホント、鬱陶しくてたまりませんでした。
    (どうしてこんなにクラス名を思いつけて、しかも一つのタグにつけられるのか。わたしなんぞには到底理解不可能な、深遠で高尚な理由があるのだと推測していますが、、、)
    でも、これからすっきり涼しくなります。うれしいです。

    このブログは、ミニマムに必要事項のみが書かれているので、読みやすいです。
    解説も、「ああ、ここがそういう所なのか」と、わかりやすかったです。

    これからも立ち寄らせていただきますので、よろしくお願いします。

    Reply

    • saori 2016-07-31 8:03 PM

      riotchi さま

      コメントありがとうございます!クラスたくさんついて少々気になりますよねw
      読みやすいとおっしゃっていただけて嬉しいです。ありがとうございます。こちらこそよろしくお願いいたします。

      Reply

  • rio-erin 2016-08-04 1:36 PM

    ありがとうございます!
    jQueryしかないかとか、カスタムメニューはやめようかとか思いましたが、こちらの記事のおかげで鬱陶しいクラス名をごっそり削除し、オレ様クラス名だけを付けることができました。

    ただ、single.phpではだめでした。
    なので、single.php(投稿記事ページ)でもクラス名を付けられるように、追加してみました。

    if( $item -> current == 1 ) {
    $classes[] = ‘current’;
    }else{//追加部分↓
    $mycur = $item -> classes;
    $mycur_key = array_key_exists(‘4’, $mycur);
    if($mycur_key == 1){
    $classes[] = ‘current’;
    }
    }
    return $classes;
    }

    プログラムは、毎回コピペばかりという素人なので、自分の環境では大丈夫そうですが、本当に大丈夫なのか心配です。
    classes[4]があるかどうかで判定していいものか。やっぱり、何か、単語の方がいいのでしょうか。
    きちんとしたものにしてくださると、ありがたいです。

    よろしくお願いします。

    Reply

    • saori 2016-09-02 9:25 AM

      お返事遅くなってすみません。また確認してみます!ありがとうございます!!

      Reply

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル コンテンツ スライドショー jQueryプラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS