wp_nav_menu のメニューから不要な id や class を消す

wp_nav_menu はカスタムメニューを出力する関数です。 しかしながら、そこから出力される HTML は例えば次のソースコードのように冗長で、非常に汚いですね。

<ul>
<li id="menu-item-12" class="menu-item menu-item-type-post_type … ">
<a href="URL">メニュー名</a>
</li>
<li id="menu-item-43" class="menu-item menu-item-type-post_type … ">
<a href="URL">メニュー名</a></li>
</ul>

ここでは標準のコードを次のコードのように綺麗にします。 nav_menu_item_id フィルタと、nav_menu_css_class フィルタを使えば、簡単に綺麗にすることができます。

<ul>
<li class="menu-item">
<a href="URL">メニュー名</a>
</li>
<li class="menu-item">
<a href="URL">メニュー名</a></li>
</ul>

nav_menu_item_id を使って id を消す

特に操作しないとき、wp_nav_menu 関数はmenu-item-00のような id を出力します。 ここでは出力される id を完全に削除しようと思います。

nav_menu_item_id フィルタは、wp_nav_menu がメニューを出力する際に適用されるフィルタです。 メニューとして出力される li 要素の id を追加、削除して変更することができます。

functions.php ファイルに次のようなコードを追加して、nav_menu_item_id フィルタをフックします。 theme は編集するテーマ名に合わせて変更してください(そのままでも動作します)

ここでは単純に不要な id を削除しているだけです。 引数から既定の値を取得して変更することなどもできるのですが、実質的に使うことはないでしょう。 したがってここでも割愛しました。

function karakuri_optimize_menu_id()
{
    return '';
}
add_filter('nav_menu_item_id', 'karakuri_optimize_menu_id');

nav_menu_css_class を使って class を消す。

特に操作しないとき、wp_nav_menu 関数は次のような class を出力します。 ここでは menu-item だけ残したいと思います。

• menu-item
• menu-item-type-post_type
• menu-item-object-page
• menu-item-00

nav_menu_css_class フィルタは、wp_nav_menu がメニューを出力する際に適用されるフィルタです。 メニューとして出力される li 要素の class を追加、削除して変更することができます。

functions.php ファイルに次のようなコードを追加して、nav_menu_css_class フィルタをフックします。 theme は編集するテーマ名に合わせて変更してください(そのままでも動作します)。

function theme_optimize_menu_class($classes, $item)
{ 
    return array('menu-item');
}
add_filter('nav_menu_css_class', 'theme_optimize_menu_class', 10, 2);

引数の $classes には、すでに与えられた class の規定値が与えられています。 特に必要になることも少ないでしょうが、例えば一部の class の一部だけを削除し、 新たに必要な class を追加する場合などに参照します。