如何將Bootstrap導覽列整合到WordPress主題中

您是否曾想加速主題開發流程？我認為答案是“是”，並且您已經了解 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></nav> 標籤，其類別為“navbar”，角色為“navigation”，包裝了導覽列的全部內容。

<div class="navbar-header">…</div>

標題 – 一個 <div> ，其類別為“navbar-header”，在任何尺寸的螢幕上都可見。 <pre class='brush:php;toolbar:false;'>&lt;button class=&quot;navbar-toggle&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-ex1-collapse&quot;&gt;…&lt;/button&gt; </pre> <p><em>切換按鈕</em> - <code><button></button>，代表小螢幕上折疊的內容；此按鈕是必須的，但您可以更改其中的內容。

<a class="navbar-brand" href="#">Brand</a>

品牌 – 帶有徽標的連結；它是可選的，您可以在此處省略它並將其包含在其他地方。

<div class="collapse navbar-collapse navbar-ex1-collapse">…</div>

可折疊內容 - 具有「collapse」類別和「navbar-collapse」類別的 <div>；它包含所有應在小螢幕上折疊的內容。 <pre class='brush:php;toolbar:false;'>&lt;ul class=&quot;nav navbar-nav&quot;&gt;…&lt;/ul&gt; </pre> <p><em>選單</em> – 一個 <code><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 模板。

#