WordPress多级下拉菜单子菜单层级自定义class样式修复

解决方案 #

通过WordPress原生的nav_menu_submenu_css_class过滤器即可实现不同层级子菜单的类名自定义，无需自定义Walker导航类，操作步骤如下：

• 将以下代码添加到当前主题/子主题的functions.php文件中

add_filter('nav_menu_submenu_css_class', 'set_custom_submenu_level_class', 10, 3);
function set_custom_submenu_level_class($classes, $args, $depth) {
    // 仅对class为main-menu-links的菜单生效，不干扰其他位置的导航菜单
    if ($args->menu_class !== 'main-menu-links') {
        return $classes;
    }

    // 层级计数$depth从0开始：0为一级子菜单（默认已自带sub-menu类，无需重复添加）
    switch ($depth) {
        case 1:
            $classes[] = 'sub-menu-2';
            break;
        case 2:
            $classes[] = 'sub-menu-3';
            break;
        // 若需要支持更多层级，可在此处新增对应case添加自定义类
    }

    return $classes;
}

校验与注意事项 #

• 代码添加完成后，清空站点缓存（含缓存插件缓存、浏览器缓存），刷新前端后检查元素即可看到：一级子菜单保留默认sub-menu类，二级子菜单同时携带sub-menu sub-menu-2类，三级子菜单同时携带sub-menu sub-menu-3类，与静态HTML结构的类名完全一致。
• 原静态版本编写的CSS下拉交互、样式代码无需任何修改，hover展开、侧边弹出、渐变背景等效果可直接正常运行。
• 原有wp_nav_menu调用逻辑无需调整，保持原有参数配置即可，参考调用示例：

wp_nav_menu([
    'theme_location' => '你已注册的目标菜单位置',
    'menu_class' => 'main-menu-links',
]);

内容的提问来源于stack exchange，提问作者medempire