WordPress wp_nav_menu样式失效求助：自定义菜单样式无法生效

核心问题分析 #

你当前的代码存在三个关键错误，直接导致样式失效：

1. 主题位置不匹配：注册的菜单标识是header_menu_fadev/top_menu_fadev/footer_menu_fadev，但调用时误用了top_menu/footer_menu，完全不对应
2. Items_wrap结构错误：强行将所有菜单项塞进单个<li>标签，导致DOM结构混乱，样式无法作用到正确元素
3. 下拉菜单缺少自定义处理：默认wp_nav_menu不会生成Bootstrap所需的dropdown系列类，需要自定义Walker类来适配

具体修复步骤 #

1. 统一菜单标识匹配

所有调用的theme_location必须和注册的标识完全一致，不能自行缩写或修改。

2. 添加全局菜单类过滤器

在主题的functions.php中添加以下代码，自动给菜单项和链接添加自定义类，避免手动拼接结构：

// 给菜单项添加自定义类
add_filter('nav_menu_css_class', 'fadev_menu_item_classes', 10, 4);
function fadev_menu_item_classes($classes, $item, $args, $depth) {
    // 顶部/底部菜单的li类
    if (in_array($args->theme_location, ['top_menu_fadev', 'footer_menu_fadev'])) {
        $classes[] = 'mx-2';
        $classes[] = 'my-2';
        $classes[] = 'my-lg-0';
    }
    // 头部菜单的li类（含下拉）
    if ($args->theme_location === 'header_menu_fadev') {
        $classes[] = 'nav-item';
        if (in_array('menu-item-has-children', $classes)) {
            $classes[] = 'dropdown';
            $classes[] = 'mx-2';
        } else {
            $classes[] = 'mx-2';
        }
    }
    return $classes;
}

// 给菜单链接添加自定义类
add_filter('nav_menu_link_attributes', 'fadev_menu_link_attributes', 10, 4);
function fadev_menu_link_attributes($atts, $item, $args, $depth) {
    // 顶部/底部菜单链接类
    if (in_array($args->theme_location, ['top_menu_fadev', 'footer_menu_fadev'])) {
        $atts['class'] = 'text-white';
    }
    // 头部菜单链接类（含下拉触发属性）
    if ($args->theme_location === 'header_menu_fadev') {
        $atts['class'] = 'nav-link';
        if (in_array('menu-item-has-children', $item->classes)) {
            $atts['class'] .= ' dropdown-toggle';
            $atts['data-bs-toggle'] = 'dropdown';
            $atts['role'] = 'button';
            $atts['aria-expanded'] = 'false';
        }
    }
    return $atts;
}

3. 自定义Walker类适配Bootstrap下拉

在functions.php中添加Walker类，将默认子菜单转换为Bootstrap的dropdown-menu结构：

class Fadev_Bootstrap_Walker extends Walker_Nav_Menu {
    // 渲染子菜单容器
    function start_lvl(&$output, $depth = 0, $args = null) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"dropdown-menu\">\n";
    }

    // 渲染子菜单项链接
    function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        parent::start_el($output, $item, $depth, $args, $id);
        if ($depth > 0 && $args->theme_location === 'header_menu_fadev') {
            $output = str_replace('<a', '<a class="dropdown-item"', $output);
        }
    }
}

4. 正确调用三个菜单

头部菜单（带下拉）

if (has_nav_menu('header_menu_fadev')) {
    wp_nav_menu(array(
        'theme_location' => 'header_menu_fadev',
        'container' => 'nav',
        'container_class' => 'header__nav',
        'menu_class' => 'align-items-center d-flex',
        'walker' => new Fadev_Bootstrap_Walker(),
        'fallback_cb' => false,
    ));
}

顶部菜单

if (has_nav_menu('top_menu_fadev')) {
    wp_nav_menu(array(
        'theme_location' => 'top_menu_fadev',
        'container' => 'nav',
        'container_class' => 'section__left__nav',
        'menu_class' => 'align-items-center d-flex flex-wrap',
        'fallback_cb' => false,
    ));
}

底部菜单

if (has_nav_menu('footer_menu_fadev')) {
    wp_nav_menu(array(
        'theme_location' => 'footer_menu_fadev',
        'container' => 'nav',
        'container_class' => 'section__left__nav',
        'menu_class' => 'align-items-center d-flex flex-wrap',
        'fallback_cb' => false,
    ));
}

验证步骤 #

1. 登录WordPress后台，在「外观-菜单」中给每个主题位置分配对应的菜单
2. 清除WordPress缓存和浏览器缓存
3. 查看页面DOM结构，确认所有自定义类已正确输出到目标元素

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