WordPressの管理画面サイドナビ「外観」>「メニュー」でサイトのナビを設定すると大体ごちゃごちゃします。
ワードプレスの既成テーマのほか、ブランクテーマ・オリジナルで作成したテーマでwp_nav_menuを使ってグローバルメニューの出力をすると、概ねliタグにidと沢山のclassを勝手にワードプレスが吐き出してごちゃごちゃします。
↓こんな感じで・・・
/* ワードプレス ナビメニューのulタグの中身 */
<li id="menu-item-XXXX" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-XXXX">
<li id="menu-item-XXXX" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-XXXX">
<li id="menu-item-XXXX" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-XXXX">決してidやclassが必要ない、ということではございません。
しかし特にclassの中身に関しては、タグの数的にあまりにも無駄すぎるのです。9割削っていいくらい（シンプルな装飾のメニューならむしろ全部いらない）・・・
別にこのまま放置してても問題は起こらないのですが、やっぱり気になる人は、すっきりさせたいですよね。
何でこんなにワードプレスのグローバルメニューはごちゃごちゃ散らかっているの？
WordPress（ワードプレス）管理画面の「メニュー」で設定したグローバルメニューをhtmlとして出力する際に用いるwp_nav_menuという関数が原因です。
もっと細かくお話しすると、そのwp_nav_menu関数の出力する様々な内容をしっかりfunctions.phpファイル内で制御していない場合に発生します。
wp_nav_menu関数を紐解くと、下のパラメータを要素とする配列の集合体です。
/* テンプレートタグ/wp nav menu のデフォルト値 */
<?php
$defaults = array(
'menu' => '',
'menu_class' => 'menu',
'menu_id' => '{メニューのスラッグ}-{連番}',
'container' => 'div',
'container_class' => 'menu-{メニューのスラッグ}-container',
'container_id' => '',
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'echo' => true,
'depth' => 0,
'walker' => '',
'theme_location' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
);
wp_nav_menu( $defaults );
?>ちなみに、冒頭で触れたブランクテーマ・オリジナルで作成したテーマでサイトを制作する技術者の方々は、（案件で制作する場合は特に）このwp_nav_menuのパラメータ自体カスタマイズしてきちんと処理するのが業界的にスタンダードですので、グローバルメニューの記述が荒れる事はほぼないかと。
index.phpやheader.phpに直書きした方が楽じゃない？
ワードプレスに慣れていらっしゃる方々やHTML/CSS/PHPなどの知識がある方々の中には、そのように思われる方も一定数いらっしゃるかもしれません。
はい、めっちゃ楽です（笑）。
そう、ワードプレステーマフォルダ内のindex.phpやheader.phpなどに直にグローバルナビメニューをhtmlで直接記述して制作する方法ももちろんありますし、間違ってはいないと思うのですが、個人的にその作り方はナンセンスだと考えています。
本来WordPressはホームページ制作に関する専門知識が乏しくても、管理画面内で様々な設定が一括して行え、簡単にコントロールできるユーザビリティに溢れたものだと思っています。
中・小規模のメニュー構成で保守・管理まで面倒見るような企業案件であれば、ソースファイルに直書きでも良いかなと、思ったりもします。ですが、やはり管理画面の「メニュー」で設定できるようにした方が、本来のワードプレスの仕組みに抗っていないし、何よりクライアントに優しい本来のCMSの姿だと思うんです。
既成テーマの場合はテーマによってidやclassの吐き出す内容が変わってきます。
ワードプレスの既成テーマをお使いの方に関しては、インストールしているテーマによってはwp_nav_menu周りをしっかり調整しているものもあります。また、デフォルトのパラメーターのままでテーマ特有のクラスを追加で付与しているようなテーマもあり、この辺りは多少見極めが必要になります。
また、既成テーマの場合はデフォルトのパラメーターのまま付与されたクラス自体にもCSSを当てている場合があり、単純にクラスを削除してしまうとレイアウトやカラーが崩れる場合があり、注意が必要です。
その辺りも踏まえて、ワードプレスが吐き出すグローバルメニューのliタグの乱雑なidやclassをコントロールする方法をご説明します。
wp_nav_menuが出力したidとclassはfunctions.phpで制御しましょう！
WordPress（ワードプレス）のfunctions.phpファイルに下のプログラムを記述します。基本的にコピペでOK！
/*グローバルメニューのliのid,classを削除*/
add_filter('nav_menu_css_class', 'wp_navtag_remove', 100, 1); //liのclassを強制的に全削除
add_filter('nav_menu_item_id', 'wp_navtag_remove', 100, 1); //liのidを強制的に削除
add_filter('page_css_class', 'wp_navtag_remove', 100, 1); //これはテーマによって記述しなくても良い場合がありますが、念の為記述しておいてください
function wp_navtag_remove($var) {
return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';
}
これでグローバルメニューのliタグに自動的に付与されるidとclassがきれいに削除されます。ちなみに、現在表示中のページに該当するメニューにだけワードプレスが自動的に付与するcurrent-menu-itemというクラスだけが付与されるようにしていますが、こうする事で表示中のページのメニューのみCSSで色変えなどの装飾ができるため、訪問者にとってわかりやすいナビメニューを作ることができます。
もしもidだけ残したい場合は、下の記述だけ取っ払ってください。
add_filter('nav_menu_item_id', 'wp_navtag_remove', 100, 1); //liのidを強制的に削除任意のクラスを残したい場合は複数指定可能です。
ワードプレス管理画面の「外観」>「メニュー」設定画面内のCSS class (オプション)に指定した任意のクラスを生かしたい場合や、既成テーマのCSSの兼ね合いで装飾が崩れた場合などに特定のクラスを残しておきたい場合など、任意のクラスを指定することができます。
/*グローバルメニューのliのclassを複数残したい場合*/
add_filter('nav_menu_css_class', 'wp_navtag_remove', 100, 1);
add_filter('nav_menu_item_id', 'wp_navtag_remove', 100, 1);
add_filter('page_css_class', 'wp_navtag_remove', 100, 1);
function wp_navtag_remove($var) {
return is_array($var) ? array_intersect($var, array(
'current-menu-item', //'クラス名',でつなげていく
'menu-item',
'menu-item-has-children',
'home' //最後は , をとる
)) : '';
}