カスタムメニューにはデフォルトでは、<div>やらわけのわからないクラス名がごちゃごちゃ勝手についています。それらを削除して、すっきりとさせカスタマイズしやすくしたいと思います。また、liの項目それぞれに別々のクラス名を設定する方法もご紹介します。 この方法を応用すると、ナビバーの項目それぞれにアイコンフォントを入れたり、JQueryのメニューにもカスタムメニューで対応できるようになりますよ! スポンサーリンク カスタムメニューのliに任意のクラス名を追加 意外にもダッシュボードからできてしまいます。 外観→メニュー→【表示オプション】 表示オプションをクリックすると表示する項目がにゅるっと降りてきますので【CSS クラス】にチェック そうするとメニュー構造のなかに選んであるメニューのバーを開いてみると【CSS class (オプション)】というものが出現!これにメニューそれぞれのクラス名を付与し、文字頭にアイコンフォントを設置するわけです。 入力したものがそのままクラス名になるので日本語不可! カスタムメニューのデフォルトで付くDivやらclassを削除 <div>とulについているクラスを削除 header.phpにある<?php wp_nav_menu(); ?>を削除。 当ブログでも使用しているSTINGER5では以下の記載を書き換えします。 <?php $defaults = array( 'theme_location' => 'navbar', ); wp_nav_menu( $defaults ); ?> 代わりに下記を記述。 <?php wp_nav_menu( array( 'container' => false , 'items_wrap' => '<ul>%3$s</ul>' ) ); ?> これで<div>とulについているクラス名が消えました。 liについている余計なid名とクラス名を削除 上記でで設定した以外の部分を削除します。 functions.phpに記述 //カスタムメニューのliのid,classを削除 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-【任意のカスタムメニュー名】-item','【クラス名1】','【クラス名2】','【クラス名3】')) : ''; } arrayの後のクラス名1~3にはそれぞれ上で設定したクラス名を記述します。必要な項目全て記入が必要です。 MEMOcurrent-【任意のカスタムメニュー名】-itemは今現在表示されている所に付与されるクラス名です。これにスタイルを設定して今みているページには違うスタイルを設定したりするのもよさそう。そうするとずいぶんすっきりとしたものになります!爽快!! <ul><li class="home current-menu-item"><a href="https://###">ホーム</a></li> <li class="site"><a href="https://###">サイト作成</a></li> <li class="otoiawase"><a href="https://###">お問い合わせ</a></li> まとめ いかがでしたか?シンプルな方がカスタマイズしやすいですし、コードも見やすくなるのでわたしはこちらの方が好きです。 これから、メニュー部分のカスタマイズのエントリーが続く予定です。。。 100日チャレンジ27日目分昨日エントリー書いてない… Recommendこの記事もおすすめです!Please Share!! ツイートする シェアする はてブする この記事のタイトルとURLをコピーする 記事タイトル【WordPress】カスタムメニューのクラスやidを削除したり、liに任意のクラスを付けたり。 記事URLhttps://shufulife.com/custommenu/ お使いの端末ではこの機能に対応していません。下のテキストボックスからコピーしてください。 この記事が気に入ったらいいね!しよう 最新情報をお届けします最新記事をお知らせします Facebookで フォローする Twitterで フォローする WordPress カスタマイズ 公開日:2014/10/3 更新日:2017/10/25