WordPress : カスタムメニューの<li>タグのムダなid/classを除去する

カスタムメニューのHTMLはムダだらけ

WordPressのカスタムメニュー関数 wp_nav_menu() で出力されるHTMLは通常以下のような形です。

<div class="menu-head_navi-container">
  <ul id="menu-head_navi" class="menu">
    <li id="menu-item-2242" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2242"><a href="http://example.com/page-a/">ページ A</a></li>
    <li id="menu-item-2243" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2243"><a href="http://example.com/page-b/">ページ B</a></li>
    <li id="menu-item-2232" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2232"><a href="http://example.com/page-c/">ページC</a></li>
  </ul>
</div>

WordPressが自動で<li>タグへIDとクラスを付与するのですが…見ての通りIDやクラスがムダに長いHTMLになります。

<li>タグへのID/クラスはwp_nav_menu()のオプション設定だけでは除去できないため、functions.phpへコードを書いて除去します。

ムダなIDとクラスを除去する

functions.phpに以下を書き加えます。

//メニューの<li>からID除去
function removeMenuId( $id ){
    return $id = array();
}
add_filter('nav_menu_item_id', 'removeMenuId', 10);

//メニューの<li>からクラス除去
function removeMenuClass( $classes ) {
    return $classes = array();
} 
add_filter( 'nav_menu_css_class', 'removeMenuClass', 10, 2 );

メニュー出力時に動くnav_menu_css_classとnav_menu_item_idの2つのアクションフックへ、空の配列を送ることで除去しています。

出力HTML

<div class="menu-head_navi-container">
  <ul id="menu-head_navi" class="menu">
    <li><a href="http://example.com/page-a/">ページ A</a></li>
    <li><a href="http://example.com/page-b/">ページ B</a></li>
    <li><a href="http://example.com/page-c/">ページC</a></li>
  </ul>
</div>

スッキリしました。

<div>と<ul>のID/クラスはwp_nav_menu()のオプション設定で除去できるので割愛します。

任意のクラスを付与する

以上の内容から逆に言えば配列にクラス名を入れれば任意の内容にすることもできます。

//メニューの<li>に任意のクラスを付与する
function addMenuClass( $classes ) {
    $classes = array(
        'class1',
        'class2',
        'class3'
    );
    return $classes;
} 
add_filter( 'nav_menu_css_class', 'addMenuClass', 10, 2 );

出力HTML

<div class="menu-head_navi-container">
  <ul id="menu-head_navi" class="menu">
    <li class="class1 class2 class3"><a href="http://example.com/page-a/">ページ A</a></li>
    <li class="class1 class2 class3"><a href="http://example.com/page-b/">ページ B</a></li>
    <li class="class1 class2 class3"><a href="http://example.com/page-c/">ページC</a></li>
  </ul>
</div>

任意のクラスが付与できました。

同様にIDも付与できるのですが、IDは1ページに1つのみと定められているためpostIDや連番を振ることになります。そうした処理は冒頭のHTMLのようにデフォルトでされており、二度手間＆重複の処理になるためデフォルトのままで良いのでは？と思えるので割愛します。