接下来讲解如何使用wp-bootstrap navwalker实现带有WordPress主题的Bootstrap导航栏。 这个脚本非常流行，它可以整合你的导航栏，方便你创建子项目。
- 打开网址www.github.com/twittem/wp-bootstrap-navwalker ，选择V3-branch版本（适合bootstrap3.x），找到wp-bootstrap-navwalker.php文件，打开这个文件，将其内部代码全部复制（不要直接下载这个文件，下载的文件里包含一个网页脚本，会让站点后台定向到此文件的内部代码页）。
wp-bootstrap-navwalker.php
在主题目录下创建一个同名文件，打开它将刚刚复制的代码粘贴进去，保存代码。
项目文件夹
- 打开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');
- 回到GitHub页面，我们现在将处理这些Usage。 我们想用导航栏内部的wp_nav_menu（）函数。 我们复制突出显示的部分
Usage
- 进入导航栏所在的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 -->
- 这些代码定义了一系列基本选项。 我们不需要所有这些，我们删掉几项，保存代码。 这是更新后的代码：
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())
);
- 回到 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。
- 回到站点后台，外观功能下多了菜单选项
菜单
- 现在创建一个名为“关于”的额外页面，然后单击发布。 让我们再创造一个名为“团队”的页面：
新页面
- 打开菜单功能，点击“创建菜单”，确保 Primary Menu选项被勾选
创建菜单
- 回到前端刷新页面，就可以看到刚刚添加的导航菜单了
导航菜单
- 现在让我们测试一下“下拉菜单”功能。 我们把“示例页面”和“团队”放在“关于”页面的下级：
设置层级
回到前端页面刷新，现在下拉菜单就出现了
下拉菜单
学到这里你会发现实现导航栏非常容易。
网友评论