WordPressカスタムメニューの長いクラス名などを消してすっきりさせたときのメモ

wordpress-cord-tangled
Update Web制作メモ >

WordPressでカスタムメニューを使うときに自動で出力される長いクラス・idや、メニュー全体を囲うdivタグを消して、コードをすっきりさせました。そのときのメモです。

カスタムメニューの使い方おさらい

WordPressでカスタムメニューを使い、このようなナビゲーションメニューをつくる手順のおさらいです。

wordpress menu example 600x55

まず、functions.phpに以下の内容を書き込み、カスタムメニュー機能を有効にします。

register_nav_menu( 'ロケーション', '説明' );
  • ロケーション:header.phpなどでメニューを設置するときに使う名前。半角英数字で。
  • 説明:管理画面に表示される説明。日本語でも大丈夫です。

書き方の例です。複数のメニューを使用することももちろんできます。

register_nav_menu( 'testmenu', 'テストメニュー' );
register_nav_menu( 'footer-menu', 'フッターメニュー' );

次に、メニューを設置したいところ(ナビゲーションメニューならheader.phpのどこかに設置するのが一般的でしょうか)に、以下の内容を書き込みます。

<?php wp_nav_menu( array ( 'theme_location' => 'ロケーション' ) ); ?>

書き方の例です。先ほどfunctions.phpで作成したふたつのうち、ひとつをここに設置することとします。

<nav>
<?php wp_nav_menu( array ( 'theme_location' => 'testmenu' ) ); ?>
</nav>

管理画面でメニューの中身を設定します。外観→メニューを開き、固定ページやカテゴリーなどなどメニューに表示したいものを加えていきます。

0 edit wordpress menu 600x329

メニューに名前を付けて保存します。

1 edit wordpress menu 600x318

「位置の編集」タブを開き、いま名前をつけたメニューを選びます。先ほどfunctions.phpに書いた‘説明’の部分がここに表示されています(テストメニュー・フッターメニューというところ)。

wordpress menu setting 600x239

以上、カスタムメニューの使い方のおさらいでした。

wp_nav_menu()関数が出力するHTML(ごちゃごちゃ)

いま設置したメニューのHTMLを見てみます(localhost/wordpress/のあたりは、実際はリンク先のアドレスになります)。

<nav>
<div class="menu-menu-container">
    <ul id="menu-menu" class="menu">
        <li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-23"><a href="http://localhost/wordpress/">ホーム</a></li>
        <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://localhost/wordpress/?page_id=19">お問い合わせ</a></li>
        <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://localhost/wordpress/?page_id=21">サイトマップ</a></li>
        <li id="menu-item-26" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26"><a href="http://localhost/wordpress/?cat=6">とうふ</a></li>
        <li id="menu-item-27" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27"><a href="http://localhost/wordpress/?cat=5">アイス</a></li>
        <li id="menu-item-28" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-28"><a href="http://localhost/wordpress/?cat=9">コーヒー</a></li>
        <li id="menu-item-29" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-29"><a href="http://localhost/wordpress/?cat=10">シュークリーム</a></li>
        <li id="menu-item-30" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-30"><a href="http://localhost/wordpress/?cat=4">ドーナッツ</a></li>
    </ul>
</div>
</nav>

カスタムメニューの機能はとっても便利なのですが、自動でつけられるクラス名が長くて(しかも多くて)ちょっとごちゃごちゃしてしまうのが気になります…。それに、この例のようにメニュー全体を<nav>タグで囲む場合、その中の<div>タグは無くてもいいかなあと思うのです。

そこで、functions.phpheader.phpにもう少し追記して、クラス名やdivタグを消してしまうことにします。

divタグとulのクラスを消す(header.php)

先ほどheader.phpwp_nav_menu()関数を使い、メニューを設置しました。

<?php wp_nav_menu( array ( 'theme_location' => 'testmenu' ) ); ?>

この関数にはtheme_location以外のいろいろなパラメーターを指定することができるみたいです(Codex参照)。

この説明によると、例えばcontainerというパラメーターで、メニュー全体を何で囲むか(あるいは囲まないか)が設定されます。その初期値がdivなので、メニューがdivで囲まれているんですね。

説明を見ながら、以下のように追記してみました。

<nav>
<?php wp_nav_menu( array ( 
    'theme_location' => 'testmenu',
    'items_wrap' => '<ul>%3$s</ul>',
    'container' => false
) ); ?>
</nav>
  • items_wrap<ul>につくクラスとidを無しにしました。
  • container:全体をdivなどで囲まないことにしました。ここでnavタグを使うことにしてもよかったかも。
  • 複数のパラメーターを指定しましたので、それぞれの末尾にカンマを忘れずに書きます。

header.phpを上書き保存したら、HTMLを見てみます。

<nav>
<ul>
<li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-23"><a href="http://localhost/wordpress/">ホーム</a></li>
    <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://localhost/wordpress/?page_id=19">お問い合わせ</a></li>
    <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://localhost/wordpress/?page_id=21">サイトマップ</a></li>
    <li id="menu-item-26" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26"><a href="http://localhost/wordpress/?cat=6">とうふ</a></li>
    <li id="menu-item-27" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27"><a href="http://localhost/wordpress/?cat=5">アイス</a></li>
    <li id="menu-item-28" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-28"><a href="http://localhost/wordpress/?cat=9">コーヒー</a></li>
    <li id="menu-item-29" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-29"><a href="http://localhost/wordpress/?cat=10">シュークリーム</a></li>
    <li id="menu-item-30" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-30"><a href="http://localhost/wordpress/?cat=4">ドーナッツ</a></li>
</ul>
</nav>

ちゃんと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を見てみます。

<nav>
<ul>
    <li class="current-menu-item"><a href="http://localhost/wordpress/">ホーム</a></li>
    <li><a href="http://localhost/wordpress/?page_id=19">お問い合わせ</a></li>
    <li><a href="http://localhost/wordpress/?page_id=21">サイトマップ</a></li>
    <li><a href="http://localhost/wordpress/?cat=6">とうふ</a></li>
    <li><a href="http://localhost/wordpress/?cat=5">アイス</a></li>
    <li><a href="http://localhost/wordpress/?cat=9">コーヒー</a></li>
    <li><a href="http://localhost/wordpress/?cat=10">シュークリーム</a></li>
    <li><a href="http://localhost/wordpress/?cat=4">ドーナッツ</a></li>
</ul>
</nav>

ほとんどのクラス・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')) : '';
}

さいごに

メニューのごちゃごちゃ感は以前からとても気になっていたので、とってもすっきりしました!

ですが…この作業をすると、以下のように管理画面でメニュー項目ごとにつけたクラスも出力されなくなってしまいます。

(表示オプションでチェックを入れて)

4 menu option 600x184

(クラスを設定すると本来はちゃんと出力される)

5 wordpress menu class

わたしは特に使っていないのですが、凝ったカスタマイズする場合は不便に感じるかもしれませんよね。

そこで、クラスなどを消すのではなく、出力される内容をカスタマイズするという方法もあるようです。このような記事がありました。

とっても難しそうですが…次の機会にはこちらも試してみたいと思います!