Bootstrap WordPress菜单添加nav-link等自定义CSS类失败求解

问题原因 #

你使用的add_a_class和add_li_class并非WordPress原生wp_nav_menu函数支持的参数，因此配置后不会生效，需要通过WordPress提供的钩子过滤器来给菜单元素添加对应的Bootstrap类，同时可以同步适配下拉菜单的结构要求。

解决步骤 #

1. 将以下代码添加到主题的functions.php文件中，即可自动给菜单对应标签添加需要的类和下拉属性：

// 给导航菜单li标签添加nav-item类，有子菜单时额外添加dropdown类
add_filter('nav_menu_css_class', 'custom_nav_item_class', 10, 3);
function custom_nav_item_class($classes, $item, $args) {
    if ($args->theme_location == 'menu-1') {
        $classes[] = 'nav-item';
        if (in_array('menu-item-has-children', $classes)) {
            $classes[] = 'dropdown';
        }
    }
    return $classes;
}

// 给导航菜单一级a标签添加nav-link类，有子菜单时额外添加下拉相关属性
add_filter('nav_menu_link_attributes', 'custom_nav_link_attr', 10, 3);
function custom_nav_link_attr($atts, $item, $args) {
    if ($args->theme_location == 'menu-1') {
        $parent_item = in_array('menu-item-has-children', $item->classes);
        $atts['class'] = $parent_item ? 'nav-link dropdown-toggle' : 'nav-link';
        if ($parent_item) {
            $atts['role'] = 'button';
            $atts['data-bs-toggle'] = 'dropdown';
            $atts['aria-expanded'] = 'false';
        }
    }
    return $atts;
}

// 给子菜单ul添加dropdown-menu类
add_filter('nav_menu_submenu_css_class', 'custom_submenu_class', 10, 3);
function custom_submenu_class($classes, $args, $depth) {
    if ($args->theme_location == 'menu-1') {
        $classes[] = 'dropdown-menu dropdown-menu-end';
    }
    return $classes;
}

// 给子菜单内的a标签添加dropdown-item类
add_filter('nav_menu_item_args', 'custom_submenu_link_class', 10, 3);
function custom_submenu_link_class($args, $item, $depth) {
    if ($args->theme_location == 'menu-1' && $depth > 0) {
        add_filter('nav_menu_link_attributes', function($atts) {
            $atts['class'] = 'dropdown-item';
            return $atts;
        }, 20, 1);
    }
    return $args;
}

2. 调整header.php中的wp_nav_menu参数，删除无效参数，匹配静态代码的容器结构：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container px-5">
        <a class="navbar-brand" href="<?php echo esc_url(home_url('/')); ?>">Start Bootstrap</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <?php
        wp_nav_menu(array(
            'theme_location' => 'menu-1',
            'container' => 'div',
            'container_class' => 'collapse navbar-collapse',
            'container_id' => 'navbarSupportedContent',
            'menu_class' => 'navbar-nav ms-auto mb-2 mb-lg-0',
            'menu_id' => 'primary-menu',
            'fallback_cb' => false,
        ));
        ?>
    </div>
</nav>

修改完成后刷新页面即可看到类已经正常添加，下拉菜单功能也会同步适配Bootstrap 5的交互要求。

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