README

## 在拥有 composer 自动加载的 WordPress 主题中使用 WordPress 的 Navwalker

wp-bootstrap-navwalker

一个自定义的 WordPress 导航遍历器类，使用 WordPress 内置菜单管理器在自定义主题中完全实现 Bootstrap 4.0+ 导航样式。

Bootstrap 4.0

要支持 Bootstrap 4 alpha，您需要使用此包的 >3 版本

安装

使用已安装和自动加载在 functions.php 中的 composer 进入您的主题文件夹

导入

composer require jorgelsaud/bootstrap-nav-walker

打开您的 WordPress 主题 functions.php 文件 /wp-content/your-theme/functions.php 并添加以下代码

// Register Custom Navigation Walker
require_once('vendor/autoload.php');

将以下代码添加到您的函数文件中

add_filter('get_custom_logo','change_logo_class');


function change_logo_class($html)
{
    $html = str_replace('class="custom-logo"', 'img-fluid', $html);
    $html = str_replace('class="custom-logo-link"', 'navbar-brand', $html);
    return $html;
}

在 functions.php 中注册自己的菜单，添加以下代码

register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'THEMENAME' ),
) );

Bootstrap 2.x 与 Bootstrap 3.0

Bootstrap 2.x 和 Bootstrap 3.0 之间有许多更改，这会影响导航遍历器类的使用方式和支持的内容。对于 CSS 变更，我建议阅读官方 Bootstrap 文档中的“从 2.x 迁移到 3.0”部分 https://bootstrap.ac.cn/getting-started/#migration

Bootstrap 3.0.0+ 中最明显的功能更改是它只支持单级下拉菜单。此脚本旨在实现 Bootstrap 3.0 菜单结构，不添加其他功能，因此不支持额外的下拉菜单级别。

如果您想使用 Bootstrap 2.x，您可以在以下位置找到遍历器类的旧版本 https://github.com/twittem/wp-bootstrap-navwalker/tree/For-Bootstrap-2.3.2

注意

这是一个实用类，旨在使用正确的语法和类格式化您的 WordPress 主题菜单，以利用 Bootstrap 下拉导航，但不包括所需的 Bootstrap JS 文件。您必须手动包含它们。

安装

使用已安装和自动加载在 functions.php 中的 composer 进入您的主题文件夹

导入

composer require jorgelsaud/bootstrap-nav-walker

打开您的 WordPress 主题 functions.php 文件 /wp-content/your-theme/functions.php 并添加以下代码

// Register Custom Navigation Walker
require_once('vendor/autoload.php');

用法

更新您的 wp_nav_menu() 函数中的 header.php 以使用新的遍历器，通过向 wp_nav_menu 数组添加 "walker" 项。

 <?php
            wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse',
        'container_id'      => 'bs-example-navbar-collapse-1',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => '\jorgelsaud\WordpressTools\NavWalker::fallback',
                'walker'            => new \jorgelsaud\WordpressTools\NavWalker())
            );
        ?>

您的菜单现在将使用正确的语法和类格式化以实现 Bootstrap 下拉导航。

您还希望在您的 functions.php 文件中声明您的新菜单。

register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'THEMENAME' ),
) );

通常菜单会被额外的标记包裹，以下是一个 navbar-fixed-top 菜单的例子，它会在响应式导航时折叠。

<nav class="navbar navbar-light bg-faded">
  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
    &#9776;
  </button>
  <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
    <a class="navbar-brand" href="<?php echo home_url(); ?>">
        <?php bloginfo('name'); ?>
    </a>

    <?php
            wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'nav navbar-nav',
        'container_id'      => 'exCollapsingNavbar2',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => '\jorgelsaud\WordpressTools\NavWalker::fallback',
                'walker'            => new \jorgelsaud\WordpressTools\NavWalker())
            );
        ?>
  </div>
</nav>

要更改您的菜单样式，请将 Bootstrap 导航类名添加到 menu_class 声明中。

有关导航类的更多信息，请参阅 Bootstrap 文档中的选项 https://bootstrap.ac.cn/components/#nav

显示菜单

要显示菜单，您必须将菜单与主题位置相关联。您可以在 WordPress 菜单管理器中编辑菜单时，通过选择 主题位置 列表中的主题位置来完成此操作。

附加功能

此脚本包括了添加 Bootstrap 分隔符、下拉标题、图标和禁用链接到您的菜单的功能。

分隔符

只需将一个具有 URL 为 # 和 链接文本 或 标题属性 为 divider（不区分大小写，因此“divider”或“Divider”都有效）的链接菜单项添加即可，其余的将由类来完成。

图标

要将图标添加到链接中，只需在链接的标题属性字段中放置Glyphicon类的名称，然后类会完成剩余的工作。例如：glyphicon-bullhorn

下拉菜单标题

添加下拉菜单标题非常相似，只需添加一个新的链接，其URL为#，标题属性为dropdown-header（它与Bootstrap CSS类匹配，因此容易记住）。将导航标签设置为您的标题文本，然后类会完成剩余的工作。

禁用链接

要设置禁用链接，只需将标题属性设置为disabled，然后类会完成剩余的工作。

仅图标

要设置仅图标（Font awesome）的链接，只需将标题属性设置为only-icon，然后类会完成剩余的工作。

变更日志

3.0 支持 Bootstrap 4 2.4 兼容 bt4 2.3 解决了attr未定义的问题 2.2 为仅图标添加了类（icononly） 2.1 添加了仅图标功能

此变更之前

2.0.4

更新了回退函数，以接受从wp_nav_menu传递的参数数组

2.0.3

包含了一个回退函数，如果未将菜单分配给主题位置，则会在WordPress菜单管理器中添加一个链接。

2.0.2

对回退函数进行的小调整，以确保仅在最顶级下拉菜单中显示光标。

2.0.1

为活动菜单项添加了缺失的active类。

2.0

完全重写了类，使用了最新的WordPress 3.6 walker类。
现在完全支持Bootstrap 3.0+
与wp_debug和主题检查插件进行了测试。

jorgelsaud / bootstrap-nav-walker

维护者

详细信息