WordPressでカスタムメニューを使う際、自動で長いidやclassが出力されます。実際のページ上の見た目には全く問題はないのですが、何となくソースコードをすっきりさせたい時に使える方法をご紹介します。

不要なコードを削除するにはfunctions.phpに以下のコードを記載します。

カスタムメニューの<li>からidとclassを削除するコード

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

また、<ul>からidとclassを削除したい場合は、header.phpに書いたwp_nav_menu()関数を以下のように修正します。

<ul>からidとclassを削除するコード例

<nav>
<?php wp_nav_menu( array ( 
    'theme_location' => 'testmenu',
    'items_wrap' => '<ul>%3$s</ul>',
    'container' => false
) ); ?>
</nav>

これで<ul>からidとclassが削除されます。また、こちらの<ul>に独自のidやclassを追加したい場合は、上記コードの<ul>に追加したいidまたはclassを直接書いてください。

functions.phpを編集する際はバックアップをお忘れなく！