WordPress开发中wp_nav_menu如何将ul元素替换为div元素

不建议继续使用全量字符串替换的方式修改菜单输出，这种方式容易误替换菜单项文本/描述中存在的同名字符串，也可能因标签属性顺序变化出现匹配失效问题，下面两种方案都可以稳定实现需求，优先推荐第一种自定义Walker的方案，兼容性最好。

方案1：自定义轻量Walker类（全版本兼容，推荐） #

这个方案通过重写WordPress原生菜单Walker类的对应方法，直接生成目标结构，完全不需要字符串替换，容错率最高。

1. 先在主题的functions.php文件中添加如下自定义Walker类代码：

class Custom_Div_Nav_Walker extends Walker_Nav_Menu {
    // 重写子菜单开始标签：将原<ul class="sub-menu">替换为目标div
    public function start_lvl( &$output, $depth = 0, $args = null ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<div class=\"nav__list-sub-alt nav__dropdown js-nav-next\">\n";
    }

    // 重写子菜单结束标签：将原</ul>替换为</div>
    public function end_lvl( &$output, $depth = 0, $args = null ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</div>\n";
    }
}

2. 修改你原来调用wp_nav_menu的代码，替换原有str_replace逻辑，新增items_wrap和walker参数：

$defaults = array(
    'theme_location' => 'primary', // 替换为你实际使用的菜单位置标识
    'container' => false, // 按需设置，不需要默认外层容器可设为false
    'items_wrap' => '<div class="nav__list">%3$s</div>', // 替换最外层默认ul为div，类名可按需调整
    'walker' => new Custom_Div_Nav_Walker(),
    // 保留你原有其他参数，比如depth、menu_class等
);
// 直接输出菜单即可，无需额外字符串替换
echo wp_nav_menu( $defaults );

方案2：过滤器实现（WordPress 5.5+可用，无需写Walker类） #

如果你的站点WordPress版本在5.5以上，可以直接通过官方提供的子菜单输出过滤器修改标签，代码更简洁：

1. 在主题functions.php中添加如下过滤器代码：

// 替换子菜单开始标签
add_filter( 'wp_nav_menu_submenu_start', function( $output, $depth, $args ) {
    $indent = str_repeat("\t", $depth);
    return "\n$indent<div class=\"nav__list-sub-alt nav__dropdown js-nav-next\">\n";
}, 10, 3 );

// 替换子菜单结束标签
add_filter( 'wp_nav_menu_submenu_end', function( $output, $depth, $args ) {
    $indent = str_repeat("\t", $depth);
    return "$indent</div>\n";
}, 10, 3 );

2. 调用wp_nav_menu时同样修改items_wrap参数替换最外层ul即可，不需要指定walker，也不需要str_replace替换类名。

注意事项 #

• 如果需要给不同层级的子菜单设置不同类名/属性，可以在start_lvl方法或过滤器回调中通过$depth参数判断层级，$depth值为0对应一级子菜单，值为1对应二级子菜单，以此类推。
• 修改完成后请清空站点缓存（包括缓存插件缓存、浏览器缓存）再查看效果，避免缓存导致旧结构输出。
• 最终输出结构与参考截图一致，所有菜单包裹标签都会替换为div，子菜单类名也会直接生成目标类名，不会出现多余属性。

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