WP Bootstrap Navwalker 使用教程

2026-01-20 02:46:25作者：廉彬冶Miranda

想要为你的WordPress主题添加Bootstrap 4导航风格？试试wp-bootstrap-navwalker！这是一个完全兼容WordPress菜单管理器的自定义Nav Walker类。只需将它放入你的主题文件夹，更新functions.php，并轻松设置，即可实现响应式Bootstrap菜单。注意：该代码正在进行重大更新，建议使用v4.3.0稳定版。别忘了自己引入必要的Bootstrap CSS和JS哦！

项目地址：https://gitcode.com/gh_mirrors/wpb/wp-bootstrap-navwalker

1. 项目介绍

WP Bootstrap Navwalker 是一个自定义的 WordPress 导航菜单类，旨在完全实现 Bootstrap 4 导航样式。通过使用 WordPress 内置的菜单管理器，开发者可以在自定义主题中轻松集成 Bootstrap 4 的导航菜单样式。该项目支持 Bootstrap 3 和 Bootstrap 4，并且完全符合 WordPress.org 主题提交的审查指南。

主要功能

完全实现 Bootstrap 4 导航样式。
支持 WordPress 内置菜单管理器。
兼容 WordPress.org 主题审查指南。
支持 Bootstrap 3 和 Bootstrap 4。

2. 项目快速启动

安装

下载 WP Bootstrap Navwalker 项目文件。
将 class-wp-bootstrap-navwalker.php 文件放置在你的 WordPress 主题文件夹中，例如 /wp-content/themes/your-theme/。

配置

在你的 WordPress 主题的 functions.php 文件中添加以下代码：

/**
 * 注册自定义导航菜单
 */
function register_navwalker() {
    require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );

// 注册导航菜单
register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'THEMENAME' ),
) );

使用

在你的主题文件（通常是 header.php）中，使用 wp_nav_menu 函数来调用导航菜单，并指定 walker 参数为 WP_Bootstrap_Navwalker：

wp_nav_menu( array(
    'theme_location' => 'primary',
    'depth' => 2, // 1 = 无下拉菜单, 2 = 有下拉菜单
    'container' => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id' => 'bs-example-navbar-collapse-1',
    'menu_class' => 'navbar-nav mr-auto',
    'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
    'walker' => new WP_Bootstrap_Navwalker(),
) );