カスタムメニューのクラス名を削除する

カスタムメニューは管理画面からカスタマイズでき、とても簡単で便利なのですが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/&quot;>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/&quot;>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]

 

 

これだけです!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA