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')) : ''; }
さいごに
メニューのごちゃごちゃ感は以前からとても気になっていたので、とってもすっきりしました!
ですが…この作業をすると、以下のように管理画面でメニュー項目ごとにつけたクラスも出力されなくなってしまいます。
(表示オプションでチェックを入れて)
(クラスを設定すると本来はちゃんと出力される)
わたしは特に使っていないのですが、凝ったカスタマイズする場合は不便に感じるかもしれませんよね。
そこで、クラスなどを消すのではなく、出力される内容をカスタマイズするという方法もあるようです。このような記事がありました。
とっても難しそうですが…次の機会にはこちらも試してみたいと思います!