在
WordPress 主题开发中，结合 Bootstrap 框架可以极大提升开发效率，但两者在菜单结构上的兼容性问题常常让开发者头疼。本文将详细介绍如何让 WordPress 输出符合
Bootstrap4 规范的
导航菜单，实现美观且功能完善的导航效果。
首先需要在主题的functions.php文件中注册一个导航菜单，为后续在后台自定义菜单奠定基础。代码如下：
register_nav_menus(array(
'bzg_primary_nav' => __('主导航', 'bzg'),
));
这段代码会在 WordPress 后台的 "外观 - 菜单" 中创建一个名为 "主导航" 的菜单位置，方便管理员进行菜单管理。
注册完成后，需要在主题的header.php文件中调用该菜单。基本调用代码如下：
这里的theme_location参数需要与注册时的键名保持一致，depth参数设置为 2 表示支持二级菜单，container设为 false 可以避免生成额外的容器标签。
WordPress 默认输出的菜单类名与 Bootstrap4 所需的类名不匹配，需要通过过滤器进行替换，主要涉及三个方面的修改：
使用nav_menu_css_class过滤器修改菜单项的类名，使其符合 Bootstrap4 的规范：
通过nav_menu_submenu_css_class过滤器将子菜单的类名修改为 Bootstrap4 的dropdown-menu：
3. 链接属性设置
使用nav_menu_link_attributes过滤器为链接添加 Bootstrap4 所需的类名和属性，实现下拉菜单功能：
通过上述三个过滤器，我们完成了 WordPress 菜单到 Bootstrap4 菜单的转换：
- 将
menu-item替换为nav-item，符合 Bootstrap4 的导航项类名规范
- 为当前项添加
active类，实现当前页面的高亮显示
- 为含有子菜单的项添加
dropdown类，并设置相应的下拉属性
- 子菜单链接使用
dropdown-item类，与 Bootstrap4 的下拉菜单样式匹配
- 添加
data-toggle等属性，实现 Bootstrap4 的下拉交互功能
经过这些修改后，WordPress 输出的菜单就能完美适配 Bootstrap4 的样式和
交互效果，既保留了 WordPress 后台自定义菜单的便利性，又能充分利用 Bootstrap4 的美观样式和响应式特性。
联盟
这世上所有的不公平都是因为当事人能力的不足
看了这篇文章，对在WordPress中使用Bootstrap4构建导航菜单有了更清晰的认识，特别是适配Bootstrap4的样式类部分，学到了新知识😊！