ワードプレスでwp_nav_menu　の出力されliに任意のクラスを追加する方法

wp_nav_menuはワードプレスの管理画面で設定した、メニューをulとliで出力してくれる関数です。この出力したliに任意のクラスを付与するPHPのコードを解説いたします。

wp_nav_menuの書式

wp_nav_menuの書式は下記のようになります。

$args = array(
    'container' => '全体をくるむタグ',
    'menu'=> 'メニュー名',
    'depth' => サブメニューで出力する深さ,
    'menu_class' => 'メニュー全体のクラス'
    );
echo wp_nav_menu($args);

しかしliにクラスを指定する処理はありません。このためliにクラスを指定するフックをfunctions.phpに追加します。

function add_additional_class($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', 1, 3);

このことによって、add_li_classにクラス名を指定するとliにクラスが出力できるようになります。

Menu　という名称のメニューの一番上の階層のメインメニューだけを出力しliにmanulistというクラスを付与したい場合のコードは下記のようになります。

$args = array(
    'container' => 'ul',
    'menu'=> 'Menu',
    'depth' => 1,
    'menu_class' => '',
    'add_li_class' => 'manulist'
    );
echo wp_nav_menu($args);

WordPress ワードプレスのテーマやプラグインの修正・カスタマイズなどのコーディングのご依頼ご相談はワードプレスドクターまでお気軽にお送りください