マイホームWEB内覧会

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

custom-menu

カスタムメニューにはデフォルトでは、<div>やらわけのわからないクラス名がごちゃごちゃ勝手についています。それらを削除して、すっきりとさせカスタマイズしやすくしたいと思います。また、liの項目それぞれに別々のクラス名を設定する方法もご紹介します。

この方法を応用すると、ナビバーの項目それぞれにアイコンフォントを入れたり、JQueryのメニューにもカスタムメニューで対応できるようになりますよ!

こちらの記事は公開時より年月が経過しており内容が古くなっている可能性があります。この記事で紹介しているソースコードの使用や、phpコードの書き換えは自己責任でお願いします。

カスタムメニューのliに任意のクラス名を追加

意外にもダッシュボードからできてしまいます。

外観→メニュー→【表示オプション】

表示オプションをクリックすると表示する項目がにゅるっと降りてきますので【CSS クラス】にチェック

custom-menu1

そうするとメニュー構造のなかに選んであるメニューのバーを開いてみると【CSS class (オプション)】というものが出現!これにメニューそれぞれのクラス名を付与し、文字頭にアイコンフォントを設置するわけです。

custom-menu2

入力したものがそのままクラス名になるので日本語不可!

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

MEMO

current-【任意のカスタムメニュー名】-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>

まとめ

いかがでしたか?シンプルな方がカスタマイズしやすいですし、コードも見やすくなるのでわたしはこちらの方が好きです。

ちゅんこ

ちゅんこ

日々の生活を送る上で、「いかに手を抜くか」という不真面目なことを真面目に探求している意識低い系主婦です。東京ではない首都圏に極小ペンシルハウスを建築し、夫と娘(小1)と仲睦まじく暮らしています。好きな食べ物は舟和の芋ようかん。

こちらの記事もおすすめです