カスタムメニューは管理画面からカスタマイズでき、とても簡単で便利なのですがwp_nav_menu()関数が出力するHTMLのクラス名が長く、しかも多くてごちゃごちゃしてしまいます。 以下は簡単にli内のクラス名とIDを削除するカスタマイズ方法です。
◆削除前のカスタムメニューのhtml
[html]
<ul id＝”menu-header-menu” class＝”menu”>
<li id＝”menu-item-281″ class＝”menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-281″><a href＝”<a href=”https://hpseisakuwa.com/homepage.html”>https://hpseisakuwa.com/homepage.html</a>”>ホームページ制作</a>
<ul class＝”sub-menu”>
<li id＝”menu-item-284″ class＝”menu-item menu-item-type-post_type menu-item-object-page menu-item-284″><a href＝”<a href=”https://hpseisakuwa.com/homepage/first.html”>https://hpseisakuwa.com/homepage/first.html</a>”>ホームページを開設される方</a></li>
<li id＝”menu-item-286″ class＝”menu-item menu-item-type-post_type menu-item-object-page menu-item-286″><a href＝”<a href=”https://hpseisakuwa.com/homepage/renewal.html”>https://hpseisakuwa.com/homepage/renewal.html</a>”>リニューアルされる方</a></li>
<li id＝”menu-item-287″ class＝”menu-item menu-item-type-post_type menu-item-object-page menu-item-287″><a href＝”<a href=”https://hpseisakuwa.com/homepage/responsive.html”>https://hpseisakuwa.com/homepage/responsive.html</a>”>レスポンシブWEBデザイン</a></li>
<li id＝”menu-item-283″ class＝”menu-item menu-item-type-post_type menu-item-object-page menu-item-283″><a href＝”<a href=”https://hpseisakuwa.com/homepage/service.html”>https://hpseisakuwa.com/homepage/service.html</a>”>サービスのご案内</a></li>
<li id＝”menu-item-288″ class＝”menu-item menu-item-type-post_type menu-item-object-page menu-item-288″><a href＝”<a href=”https://hpseisakuwa.com/homepage/flow.html”>https://hpseisakuwa.com/homepage/flow.html</a>”>制作の流れ</a></li>
<li id＝”menu-item-553″ class＝”menu-item menu-item-type-custom menu-item-object-custom menu-item-553″><a target＝”_blank” href＝”<a href=”https://hpseisakuwa.com/work/">WORK</a></li”>https://hpseisakuwa.com/work/”>WORK</a></li</a>>
<li id＝”menu-item-282″ class＝”menu-item menu-item-type-post_type menu-item-object-page menu-item-282″><a href＝”<a href=”https://hpseisakuwa.com/homepage/faq.html”>https://hpseisakuwa.com/homepage/faq.html</a>”>よくあるご質問</a></li>
</ul>
</li>
</ul>
[/html]
こーーんなに長かったhtmlが・・・
◆削除後のカスタムメニューのhtml
[html]
<ul id＝”menu-header-menu” class＝”menu”>
<li><a href＝”<a href=”https://hpseisakuwa.com/homepage.html”>https://hpseisakuwa.com/homepage.html</a>”>ホームページ制作</a> <ul class＝”sub-menu”>
<li><a href＝”<a href=”https://hpseisakuwa.com/homepage/first.html”>https://hpseisakuwa.com/homepage/first.html</a>”>ホームページを開設される方</a></li>
<li><a href＝”<a href=”https://hpseisakuwa.com/homepage/renewal.html”>https://hpseisakuwa.com/homepage/renewal.html</a>”>リニューアルされる方</a></li>
<li><a href＝”<a href=”https://hpseisakuwa.com/homepage/responsive.html”>https://hpseisakuwa.com/homepage/responsive.html</a>”>レスポンシブWEBデザイン</a></li>
<li><a href＝”<a href=”https://hpseisakuwa.com/homepage/service.html”>https://hpseisakuwa.com/homepage/service.html</a>”>サービスのご案内</a></li>
<li><a href＝”<a href=”https://hpseisakuwa.com/homepage/flow.html”>https://hpseisakuwa.com/homepage/flow.html</a>”>制作の流れ</a></li>
<li><a target＝”_blank” href＝”<a href=”https://hpseisakuwa.com/work/">WORK</a></li”>https://hpseisakuwa.com/work/”>WORK</a></li</a>>
<li><a href＝”<a href=”https://hpseisakuwa.com/homepage/faq.html”>https://hpseisakuwa.com/homepage/faq.html</a>”>よくあるご質問</a></li>
</ul>
</li>
</ul>
[/html]
こんなにスッキリ！！！
方法は驚くほどカンタン♪ functions.phpに以下の内容を追記します。
[html]
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’)) : ”;
}
[/html]
これだけです！