构建一个Bootstrap WordPress主题#9 实现一个

接下来讲解如何使用wp-bootstrap navwalker实现带有WordPress主题的Bootstrap导航栏。 这个脚本非常流行，它可以整合你的导航栏，方便你创建子项目。

1. 打开网址www.github.com/twittem/wp-bootstrap-navwalker ，选择V3-branch版本（适合bootstrap3.x），找到wp-bootstrap-navwalker.php文件，打开这个文件，将其内部代码全部复制（不要直接下载这个文件，下载的文件里包含一个网页脚本，会让站点后台定向到此文件的内部代码页）。

wp-bootstrap-navwalker.php

在主题目录下创建一个同名文件，打开它将刚刚复制的代码粘贴进去，保存代码。

项目文件夹

2. 打开functions.php文件，在顶部使用 require_once() 引入wp_bootstrap_navwalker.php文件

<?php 

require_once('wp-bootstrap-navwalker.php');

function theme_setup(){
    // Featured Image Support
    add_theme_support('post-thumbnails');
}

add_action('after_setup_theme', 'theme_setup');

3. 回到GitHub页面，我们现在将处理这些Usage。 我们想用导航栏内部的wp_nav_menu（）函数。 我们复制突出显示的部分

Usage

4. 进入导航栏所在的header文件，找到collapse类div，将刚刚复制的代码粘贴进去，如下所示：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <?php
      wp_nav_menu( array(
      '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'       => 'WP_Bootstrap_Navwalker::fallback',
      'walker'            => new WP_Bootstrap_Navwalker(),
      ));
    ?>
      <form class="navbar-form navbar-left">
        
      </form>
      
</div><!-- /.navbar-collapse -->

5. 这些代码定义了一系列基本选项。 我们不需要所有这些，我们删掉几项，保存代码。 这是更新后的代码：

wp_nav_menu( array(
 'theme_location' => 'primary',
 'depth' => 2,
 'container' => false,
 'menu_class' => 'nav navbar-nav',
 'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
 'walker' => new wp_bootstrap_navwalker())
 );

6. 回到 functions.php文件，在 theme_setup() 函数中添加代码注册导航菜单

// Nav Menus
    register_nav_menus(array(
    'primary' => __('Primary Menu')
    ));
}

add_action('after_setup_theme', 'theme_setup');

我们在 register_nav_menus() 中传入一个数组，然后将primary设置为__（），然后可读名称是Primary Menu。

7. 回到站点后台，外观功能下多了菜单选项

菜单

8. 现在创建一个名为“关于”的额外页面，然后单击发布。 让我们再创造一个名为“团队”的页面：

新页面

9. 打开菜单功能，点击“创建菜单”，确保 Primary Menu选项被勾选

创建菜单

10. 回到前端刷新页面，就可以看到刚刚添加的导航菜单了

导航菜单

11. 现在让我们测试一下“下拉菜单”功能。 我们把“示例页面”和“团队”放在“关于”页面的下级：

设置层级

回到前端页面刷新，现在下拉菜单就出现了

下拉菜单

学到这里你会发现实现导航栏非常容易。