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

Update 2014/07/15 Web制作メモ > WordPress

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

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

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

まず、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>

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

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

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

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

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.phpとheader.phpにもう少し追記して、クラス名やdivタグを消してしまうことにします。

divタグとulのクラスを消す（header.php）

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

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

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

テンプレートタグ/wp nav menu – WordPress 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')) : '';
}

こちらに記載されていたコードをそのまま使いました！

wordpress – remove li class & id for menu items and pages list – Stack Overflow

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')) : '';
}

さいごに

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

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

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

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

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

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

WordPress3.xでメニューをカスタマイズする（wp_nav_menu　の出力を変更する方法） – [[ ist ]] mac,windows,ipod パソコン周辺機器　etc…

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

10251

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

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

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

divタグとulのクラスを消す（header.php）

liのクラスを消す（functions.php）

さいごに

新しい記事

古い記事

よく読まれている投稿

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

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

divタグとulのクラスを消す（header.php）

liのクラスを消す（functions.php）

さいごに

関連記事

新しい記事

古い記事

よく読まれている投稿