如何在WordPress中用Bootstrap 4创建导航栏？锚点标签加类问题

我之前在整合Bootstrap 4和WordPress菜单时也碰到过一模一样的问题，其实用WordPress自带的过滤器就能轻松解决，这也是最规范的做法，具体步骤如下：

核心方法：使用nav_menu_link_attributes过滤器 #

这个过滤器专门用来修改WordPress菜单中锚点（）标签的属性，我们可以通过它给链接添加nav-link类，甚至根据菜单状态动态添加active类。

步骤1：在主题的functions.php中添加代码 #

打开你当前主题的functions.php文件，插入以下代码：

function add_bootstrap_nav_link_class($atts, $item, $args) {
    // 替换成你实际注册的菜单位置（比如你的primary菜单）
    if (isset($args->theme_location) && $args->theme_location == 'primary') {
        // 给锚点添加基础的nav-link类
        $atts['class'] = 'nav-link';
        
        // 如果是当前活跃的菜单项，额外添加active类（可选，Bootstrap也支持把active加在<li>上）
        if ($item->current || $item->current_item_ancestor) {
            $atts['class'] .= ' active';
        }
    }
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_bootstrap_nav_link_class', 10, 3);

步骤2：确认菜单位置参数 #

代码里的primary是菜单的注册位置，你需要替换成自己主题中实际的菜单位置名称。可以在主题的functions.php里找register_nav_menus的代码，比如：

register_nav_menus( array(
    'primary' => __( '主导航菜单', 'your-theme-slug' ),
) );

这里的primary就是你要填的参数。

配合

标签的类 #

既然你已经成功给

<ul class="navbar-nav">
    <li class="nav-item active">
        <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">About</a>
    </li>
</ul>