如何将Bootstrap导航栏集成到WordPress主题中

<ul class="nav navbar-nav">…</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”的新菜单并向其中添加项目。转到管理位置选项卡，并为名为“主要”的主题位置指定菜单“主要”。保存更改。



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 模板。