WP Bootstrap Navwalker 使用教程

最新推荐文章于 2024-09-13 09:00:40 发布

瞿旺晟

最新推荐文章于 2024-09-13 09:00:40 发布

阅读量1.1k

点赞数 19

本文链接：https://blog.csdn.net/gitblog_00066/article/details/142194380

版权

WP Bootstrap Navwalker 使用教程

wp-bootstrap-navwalker 项目地址: 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(),
) );