【WordPress】カスタムメニューのクラスやidを削除したり、liに任意のクラスを付けたり。

カスタムメニューにはデフォルトでは、＜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にはそれぞれ上で設定したクラス名を記述します。必要な項目全て記入が必要です。

そうするとずいぶんすっきりとしたものになります！爽快！！

<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日目分昨日エントリー書いてない…