如何为WordPress中dynamic_sidebar的<ul>标签添加类名

嘿，我懂你碰到的这个坑——本来想给菜单的

加类名，结果用register_sidebar设置before_widget为<ul class="menu">后，出现了两层
嵌套，这肯定不是你想要的效果。

问题根源 #

原因很直接：你用before_widget和after_widget包裹的是整个菜单widget，而WordPress的导航菜单widget本身就会自动输出自己的<ul>标签。这样一来，就变成了<ul class="menu"><ul>菜单内容</ul></ul>，自然出现了嵌套问题。

解决方案分三种情况： #

1. 侧边栏仅用于放置该菜单

如果这个侧边栏就是专门用来放这个菜单的，完全不需要通过侧边栏的before_widget来加类，直接在调用菜单时指定类名即可：

首先注册导航菜单（若未注册）：

register_nav_menus( array(
    'before-content-menu' => 'Before Content Menu',
) );

然后在主题模板中调用菜单时，设置menu_class参数：

wp_nav_menu( array(
    'theme_location' => 'before-content-menu',
    'menu_class'     => 'menu', // 直接给菜单的<ul>添加类名
    'container'      => false, // 可选：若不需要外层<div>容器，可设为false
) );

这样输出的就是<ul class="menu">...</ul>，完全没有嵌套问题。

2. 侧边栏需兼容其他widget

如果这个侧边栏还要放其他widget，不能随便修改before_widget的话，可以用过滤器针对菜单widget单独处理，去掉它的外层

包裹：

将这段代码添加到主题的functions.php中：

add_filter( 'dynamic_sidebar_params', 'custom_adjust_menu_widget_wrapper' );
function custom_adjust_menu_widget_wrapper( $params ) {
    // 检查当前widget是否为导航菜单
    if ( isset( $params[0]['widget_name'] ) && $params[0]['widget_name'] === 'Navigation Menu' ) {
        // 替换菜单widget的前后包裹标签，这里设为空，也可换成<div>等标签
        $params[0]['before_widget'] = '';
        $params[0]['after_widget']  = '';
    }
    return $params;
}

这样菜单widget不会被侧边栏的<ul class="menu">包裹，其他widget依然保留原有侧边栏包裹，完美解决嵌套问题。

3. 简化修改：替换侧边栏包裹标签

如果不想改动太多代码，也可以把侧边栏的before_widget和after_widget换成<div>标签：

register_sidebar(array(
    'name' => 'Before Content Area',
    'id' => 'before-content-area',
    'before_widget' => '<div class="widget-wrapper">',
    'after_widget' => '</div>',
));

再配合第一种方法的menu_class给菜单

加类，最终结构会是<div class="widget-wrapper"><ul class="menu">...</ul></div>，结构合理且无嵌套。

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