前回、WordPressのメニュー機能を使ってメニューを修正しました。そのときのソースがこちらです

<nav>
<div class="menu-sp-navi-container">
<ul id="menu-sp-navi" class="menu">
<li id="menu-item-7261" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7261"><a href="/">全て</a></li>
<li id="menu-item-7262" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-7262"><a href="https://www.logw.jp/category/wpmemo">WPメモ</a></li>
<li id="menu-item-7263" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7263"><a href="https://www.logw.jp/category/credit">お金関係</a></li>
</ul>
</div>
</nav>

まぁなんといったらいいか、色々邪魔なクラスなどがついてしまいました。代わりに元々あったactiveクラスが消えてしまいました。divなどもいらないですがいても邪魔ではないので今回は放っておきたいと思います。

ulのクラスを削除する

とりあえずナビのulタグのクラスを削除します。

<?php echo wp_nav_menu(array( 'menu' => 'SP-Navi',
'items_wrap' => '<ul>%3$s</ul>
));?>

items_wrapというのを追加しました。これで消すことができます。divタグも削除したい場合は、以下のようにします。

<?php echo wp_nav_menu(array( 'menu' => 'SP-Navi',
'items_wrap' => '<ul>%3$s</ul>',
'container' => false
));?>

これでOKです。

liのクラスを全て削除する

liのクラスを削除するには、header.phpではなく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')) : '';
    }

これでOKです。header.phpとunction.phpをアップしてみます。

ソースが綺麗になった

ソースが綺麗になりました。

<nav>
<div class="menu-sp-navi-container">
<ul>
<li><a href="/">全て</a></li>
<li><a href="https://www.logw.jp/category/wpmemo">WPメモ</a></li>
<li><a href="https://www.logw.jp/category/credit">お金関係</a></li>
</ul>
</div>
</nav>

見事に綺麗に消えました。