WordPressカスタムメニューの長いクラス名などを消してすっきりさせたときのメモ
WordPressでカスタムメニューを使うときに自動で出力される長いクラス・idや、メニュー全体を囲うdivタグを消して、コードをすっきりさせました。そのときのメモです。
カスタムメニューの使い方おさらい
WordPressでカスタムメニューを使い、このようなナビゲーションメニューをつくる手順のおさらいです。
まず、functions.phpに以下の内容を書き込み、カスタムメニュー機能を有効にします。
register_nav_menu( 'ロケーション', '説明' );
- ロケーション：header.phpなどでメニューを設置するときに使う名前。半角英数字で。
- 説明：管理画面に表示される説明。日本語でも大丈夫です。
書き方の例です。複数のメニューを使用することももちろんできます。
register_nav_menu( 'testmenu', 'テストメニュー' ); register_nav_menu( 'footer-menu', 'フッターメニュー' );
次に、メニューを設置したいところ（ナビゲーションメニューならheader.phpのどこかに設置するのが一般的でしょうか）に、以下の内容を書き込みます。
'ロケーション' ) ); ?>
書き方の例です。先ほどfunctions.phpで作成したふたつのうち、ひとつをここに設置することとします。
管理画面でメニューの中身を設定します。外観→メニューを開き、固定ページやカテゴリーなどなどメニューに表示したいものを加えていきます。
メニューに名前を付けて保存します。
「位置の編集」タブを開き、いま名前をつけたメニューを選びます。先ほどfunctions.phpに書いた‘説明’の部分がここに表示されています（テストメニュー・フッターメニューというところ）。
以上、カスタムメニューの使い方のおさらいでした。
wp_nav_menu()関数が出力するHTML（ごちゃごちゃ）
いま設置したメニューのHTMLを見てみます（localhost/wordpress/のあたりは、実際はリンク先のアドレスになります）。
カスタムメニューの機能はとっても便利なのですが、自動でつけられるクラス名が長くて（しかも多くて）ちょっとごちゃごちゃしてしまうのが気になります…。それに、この例のようにメニュー全体を<nav>タグで囲む場合、その中の<div>タグは無くてもいいかなあと思うのです。
そこで、functions.phpとheader.phpにもう少し追記して、クラス名やdivタグを消してしまうことにします。
divタグとulのクラスを消す（header.php）
先ほどheader.phpでwp_nav_menu()関数を使い、メニューを設置しました。
'testmenu' ) ); ?>
この関数にはtheme_location以外のいろいろなパラメーターを指定することができるみたいです（Codex参照）。
この説明によると、例えばcontainerというパラメーターで、メニュー全体を何で囲むか（あるいは囲まないか）が設定されます。その初期値がdivなので、メニューがdivで囲まれているんですね。
説明を見ながら、以下のように追記してみました。
- items_wrap：<ul>につくクラスとidを無しにしました。
- container：全体をdivなどで囲まないことにしました。ここでnavタグを使うことにしてもよかったかも。
- 複数のパラメーターを指定しましたので、それぞれの末尾にカンマを忘れずに書きます。
header.phpを上書き保存したら、HTMLを見てみます。
ちゃんとdivタグがなくなり、ulのクラスとidもなくなりました。
liのクラスを消す（functions.php）
続いて<li>のクラスとidを消すため、functions.phpに以下の内容を追記します。
add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);
add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);
function my_css_attributes_filter($var) {
return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';
}
こちらに記載されていたコードをそのまま使いました！
functions.phpを上書き保存したら、HTMLを見てみます。
ほとんどのクラス・idはなくなり、いま開いているページに該当するメニュー項目にのみcurrent-menu-itemというクラスがついています。このクラスはリンクの文字色を変えたりするのに便利なので、残ってくれてよかった。
フロントページへのリンクにつくクラスも残す方法を追記しました。参考：テンプレートタグ/wp nav menu – WordPress Codex 日本語版
function my_css_attributes_filter($var) {
return is_array($var) ? array_intersect($var, array('current-menu-item','menu-item-home')) : '';
}
さいごに
メニューのごちゃごちゃ感は以前からとても気になっていたので、とってもすっきりしました！
ですが…この作業をすると、以下のように管理画面でメニュー項目ごとにつけたクラスも出力されなくなってしまいます。
（表示オプションでチェックを入れて）
（クラスを設定すると本来はちゃんと出力される）
わたしは特に使っていないのですが、凝ったカスタマイズする場合は不便に感じるかもしれませんよね。
そこで、クラスなどを消すのではなく、出力される内容をカスタマイズするという方法もあるようです。このような記事がありました。
とっても難しそうですが…次の機会にはこちらも試してみたいと思います！
