広島の格安ホームページ制作は全国対応アクトスタイルにお任せください!

インフォメーションWordpress

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

カスタムメニューは管理画面からカスタマイズでき、とても簡単で便利なのですがwp_nav_menu()関数が出力するHTMLのクラス名が長く、しかも多くてごちゃごちゃしてしまいます。 以下は簡単にli内のクラス名とIDを削除するカスタマイズ方法です。

 

 

◆削除前のカスタムメニューの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="http://hpseisakuwa.com/homepage.html">http://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="http://hpseisakuwa.com/homepage/first.html">http://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="http://hpseisakuwa.com/homepage/renewal.html">http://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="http://hpseisakuwa.com/homepage/responsive.html">http://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="http://hpseisakuwa.com/homepage/service.html">http://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="http://hpseisakuwa.com/homepage/flow.html">http://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="http://hpseisakuwa.com/work/&quot;>WORK</a></li">http://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="http://hpseisakuwa.com/homepage/faq.html">http://hpseisakuwa.com/homepage/faq.html</a>">よくあるご質問</a></li>

</ul>

</li>

</ul>

 

 

こーーんなに長かったhtmlが・・・

 

◆削除後のカスタムメニューのhtml


<ul id="menu-header-menu" class="menu">

<li><a href="<a href="http://hpseisakuwa.com/homepage.html">http://hpseisakuwa.com/homepage.html</a>">ホームページ制作</a>         <ul class="sub-menu">

<li><a href="<a href="http://hpseisakuwa.com/homepage/first.html">http://hpseisakuwa.com/homepage/first.html</a>">ホームページを開設される方</a></li>

<li><a href="<a href="http://hpseisakuwa.com/homepage/renewal.html">http://hpseisakuwa.com/homepage/renewal.html</a>">リニューアルされる方</a></li>

<li><a href="<a href="http://hpseisakuwa.com/homepage/responsive.html">http://hpseisakuwa.com/homepage/responsive.html</a>">レスポンシブWEBデザイン</a></li>

<li><a href="<a href="http://hpseisakuwa.com/homepage/service.html">http://hpseisakuwa.com/homepage/service.html</a>">サービスのご案内</a></li>

<li><a href="<a href="http://hpseisakuwa.com/homepage/flow.html">http://hpseisakuwa.com/homepage/flow.html</a>">制作の流れ</a></li>

<li><a target="_blank" href="<a href="http://hpseisakuwa.com/work/&quot;>WORK</a></li">http://hpseisakuwa.com/work/">WORK</a></li</a>>

<li><a href="<a href="http://hpseisakuwa.com/homepage/faq.html">http://hpseisakuwa.com/homepage/faq.html</a>">よくあるご質問</a></li>

</ul>

</li>

</ul>

 

 

こんなにスッキリ!!!

 

 

方法は驚くほどカンタン♪ functions.phpに以下の内容を追記します。


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

}

 

 

これだけです!

コメントを残す

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


*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

インフォメーション