您是否曾想加速主題開發流程？我認為答案是“是”，並且您已經了解 Bootstrap 並在模型中使用它進行開發。這就提出了一個問題：「如何將 Bootstrap 元件整合到 WordPress 主題中？」
本系列教學將介紹如何將最受歡迎的 Bootstrap 元件整合到 WordPress 主題中。讓我們從 Navbar 元件開始，它可以輕鬆建立響應式導覽列。為了使本教學易於理解，我將使用僅包含徽標和功能表的導覽列。
以下是 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”，代表網站導覽。
此步驟假設您已安裝 WordPress 並且您正在開發的主題已啟動。
開啟您的 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');
?>
導覽至您的 WordPress 網站後端Appearance->Menu。建立一個名為「Primary」的新選單並向其中新增項目。前往管理位置選項卡，並為名為「主要」的主題位置指定選單「主要」。儲存更改。
打開您的 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主題中的詳細內容。更多資訊請關注PHP中文網其他相關文章！
