您是否曾想加快主题开发过程？我认为答案是“是”，并且您已经了解 bootstrap 并在模型中使用它进行开发。这就提出了一个问题：“如何将 bootstrap 组件集成到 wordpress 主题中？”
本系列教程将介绍如何将最流行的 bootstrap 组件集成到 wordpress 主题中。让我们从 navbar 组件开始，它可以轻松创建响应式导航栏。为了使本教程易于理解，我将使用一个仅包含徽标和菜单的导航栏。
1. 使用 bootstrap 框架编写导航栏以下是 bootstrap 文档页面的源代码：
<nav class=navbar navbar-default role=navigation> <!-- brand and toggle get grouped for better mobile display --> <div class=navbar-header> <button type=button class=navbar-toggle data-toggle=collapse data-target=.navbar-ex1-collapse> <span class=sr-only>toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a class=navbar-brand href=#>brand</a> </div> <!-- collect the nav links, forms, and other content for toggling --> <div class=collapse navbar-collapse navbar-ex1-collapse> <ul class=nav navbar-nav> <li class=active><a href=#>link</a></li> <li><a href=#>link</a></li> <li class=dropdown> <a href=# class=dropdown-toggle data-toggle=dropdown>dropdown <b class=caret></b></a> <ul class=dropdown-menu> <li><a href=#>action</a></li> <li><a href=#>another action</a></li> <li><a href=#>something else here</a></li> <li><a href=#>separated link</a></li> <li><a href=#>one more separated link</a></li> </ul> </li> </ul> </div></nav>
让我们仔细看看代码并澄清一些事情，以便更好地理解本教程的下一部分。
<nav role=navigation>…</nav>
包装器 - 一个 <nav> 标签，其类为“navbar”，角色为“navigation”，包装了导航栏的全部内容。
<div class=navbar-header>…</div>
标题 – 一个 <div> ，其类为“navbar-header”，在任何尺寸的屏幕上都可见。
<button class=navbar-toggle type=button data-toggle=collapse data-target=.navbar-ex1-collapse>…</button>
切换按钮 - <button>，代表小屏幕上折叠的内容；此按钮是必须的，但您可以更改其中的内容。
<a class=navbar-brand href=#>brand</a>

品牌 – 带有徽标的链接；它是可选的，您可以在此处省略它并将其包含在其他地方。
<div class=collapse navbar-collapse navbar-ex1-collapse>…</div>
可折叠内容 - 具有“collapse”类和“navbar-collapse”类的 <div>；它包含应在小屏幕上折叠的所有内容。
<ul class=nav navbar-nav>…</ul>
菜单 – 一个 <ul> ，其类为“nav navbar-nav”，代表站点导航。
2.将模型集成到模板中此步骤假设您已安装 wordpress 并且您正在开发的主题已激活。
2.1。为菜单准备主题打开您的 functions.php 文件并注册您的导航（如果尚未注册）。
<?php/* theme setup */add_action( 'after_setup_theme', 'wpt_setup' ); if ( ! function_exists( 'wpt_setup' ) ): function wpt_setup() { register_nav_menu( 'primary', __( 'primary navigation', 'wptuts' ) ); } endif;?>
注册引导文件和 jquery：
function wpt_register_js() { wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery'); wp_enqueue_script('jquery.bootstrap.min');}add_action( 'init', 'wpt_register_js' );function wpt_register_css() { wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css' ); wp_enqueue_style( 'bootstrap.min' );}add_action( 'wp_enqueue_scripts', 'wpt_register_css' );
从 github 下载 edward mcintyre 的 wp-bootstrap-navwalker 类。将文件放入主题根文件夹中。返回到您的 functions.php 并粘贴以下代码：
<?php // register custom navigation walker require_once('wp_bootstrap_navwalker.php');?>
2.2。在后端创建菜单导航到您的 wordpress 网站后端appearance->menu。创建一个名为“primary”的新菜单并向其中添加项目。转到管理位置选项卡，并为名为“主要”的主题位置指定菜单“主要”。保存更改。
wordpress菜单管理页面2.3。将导航栏模型集成到模板中打开您的 header.php 并将导航栏模型复制并粘贴到您希望其显示的位置。现在我们用 wordpress 的模板功能替换部分模型。首先放置徽标的正确链接。更改此行：
<a class=navbar-brand href=#>brand</a>

至：
<a class=navbar-brand href=<?php bloginfo('url')?>><?php bloginfo('name')?></a>
下一步是从后端输出菜单而不是模型菜单。对于这些行：
<ul class=nav navbar-nav> <li class=active><a href=#>link</a></li> <li><a href=#>link</a></li> <li class=dropdown> <a href=# class=dropdown-toggle data-toggle=dropdown>dropdown <b class=caret></b></a> <ul class=dropdown-menu> <li><a href=#>action</a></li> <li><a href=#>another action</a></li> <li><a href=#>something else here</a></li> <li><a href=#>separated link</a></li> <li><a href=#>one more separated link</a></li> </ul> </li></ul>
与：
<?php /* primary navigation */ wp_nav_menu( array( 'menu' => 'top_menu', 'depth' => 2, 'container' => false, 'menu_class' => 'nav', //process nav menu using our custom nav walker 'walker' => new wp_bootstrap_navwalker()));?>
现在您已将引导导航栏组件集成到您的主题中。
结论在本教程中，我们研究了如何将使用 bootstrap css 框架创建的导航栏集成到 wordpress 主题中。要加快主题开发速度，您只需下载源文件并将其粘贴到您的主题中即可。
您还可以在 envato market 上找到一些很棒的 bootstrap 主题和模板，例如 neon bootstrap 管理模板或 selphy electronics 电子商务 boostrap 模板。
以上就是如何将bootstrap导航栏集成到wordpress主题中的详细内容。