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

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

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

https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_nav_menu

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

この記事で分かること

wp_nav_menuのli要素にclassを追加するソース
wp_nav_menuをいじる時に気を付けたいこと
番外編：メニューの下に説明を表示する
まとめ

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);

How to add Class in using wp_nav_menu() in Wordpress?

I am using wp_nav_menu($args) and I want to add my_own_class CSS classname to the <li> element. I'd like to get the foll...

お気に入りポイント

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にするか、説明を書いていない別メニューを用意する必要があります。