お問い合わせはコチラから

wp_nav_menuのli要素にclassを追加する

サイト運営

wp_nav_menuから出力されるHTMLファイルにclassを追加する時のTipsです。

wp_nav_menuには、出力されるulタグにclassを追加するオプション(menu_classmenu_id)が最初から用意されています。しかし、liタグにclassを追加するオプションは用意されていません。

検索したら、liタグにclassを追加する頭の良い解決方法が見つかったのでメモしておきます。

wp_nav_menuのli要素にclassを追加するソース

header.php

$args = array(
    'container'     => '',
    'theme_location'=> 'your-theme-loc',
    'depth'         => 1,
    'fallback_cb'   => false,
    'add_li_class'  => 'your-class-name1 your-class-name-2'
    );
wp_nav_menu($args);

functions.php

function add_additional_class_on_li($classes, $item, $args) {
    if(isset($args->add_li_class)) {
        $classes[] = $args->add_li_class;
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);

お気に入りポイント

nav_menu_css_classフックを使う解決方法は検索すると沢山出てきます。その中でこの方法が優れている点は、通常のオプションと同じようにclassを追加できる点です。メニュー名やlocationを判定してフックの中身で判定せずに、wp_nav_menuの引数側で動きを変更できる点が気に入りました。

wp_nav_menuをいじる時に気を付けたいこと

wp_nav_menuを自分で設置する時に忘れがちなのが、register_nav_menusの設定です。

wp_nav_menuをいじる時には(たぶんfunctions.phpに書かれている)必ず確認した方が良いです。

理由:メニューのlocationの指定で使う名前は、ダッシュボードのメニューからはわからないので。

番外編:メニューの下に説明を表示する

最近よく見かけるメニューの下に小さい文字で英字表記を追加する時のカスタマイズ。

外観→メニューの表示オプションで、説明に✓チェックをいれて、メニューに説明を付与できるようにする。

function prefix_nav_description( $item_output, $item, $depth, $args ) {
 if ( !empty( $item->description ) ) {
 $item_output = str_replace( '">' . $args->link_before . $item->title, '">' . $args->link_before . '<strong>' . $item->title . '</strong>' . '<span class="menu-item-description">' . $item->description . '</span>' , $item_output );
 }
 return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'prefix_nav_description', 10, 4 );

このカスタマイズを行うと、スマホ時にも表示されてしまうので、spanをdispaly:noneにするか、説明を書いていない別メニューを用意する必要があります。

まとめ

メニュー周りは、サイト制作の鬼門で一番面倒な部分です。いじらなくてよいならいじりたくない部分ですが、いじらないといけなくなった時に結構ハマるのでメモしておきました。

タイトルとURLをコピーしました