接下來講解如何使用wp-bootstrap navwalker實現(xiàn)帶有WordPress主題的Bootstrap導(dǎo)航欄。 這個腳本非常流行劫樟，它可以整合你的導(dǎo)航欄，方便你創(chuàng)建子項目。
- 打開網(wǎng)址www.github.com/twittem/wp-bootstrap-navwalker ，選擇V3-branch版本（適合bootstrap3.x）抹估，找到wp-bootstrap-navwalker.php文件缠黍，打開這個文件弄兜，將其內(nèi)部代碼全部復(fù)制（不要直接下載這個文件，下載的文件里包含一個網(wǎng)頁腳本瓷式，會讓站點后臺定向到此文件的內(nèi)部代碼頁）替饿。
wp-bootstrap-navwalker.php
在主題目錄下創(chuàng)建一個同名文件，打開它將剛剛復(fù)制的代碼粘貼進去贸典，保存代碼视卢。
項目文件夾
- 打開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頁面廊驼，我們現(xiàn)在將處理這些Usage据过。 我們想用導(dǎo)航欄內(nèi)部的wp_nav_menu（）函數(shù)。 我們復(fù)制突出顯示的部分
Usage
- 進入導(dǎo)航欄所在的header文件妒挎，找到collapse類div绳锅，將剛剛復(fù)制的代碼粘貼進去，如下所示：
<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() 函數(shù)中添加代碼注冊導(dǎo)航菜單
// Nav Menus
register_nav_menus(array(
'primary' => __('Primary Menu')
));
}
add_action('after_setup_theme', 'theme_setup');
我們在 register_nav_menus() 中傳入一個數(shù)組驯嘱，然后將primary設(shè)置為__（），然后可讀名稱是Primary Menu喳坠。
- 回到站點后臺鞠评，外觀功能下多了菜單選項
菜單
- 現(xiàn)在創(chuàng)建一個名為“關(guān)于”的額外頁面，然后單擊發(fā)布丙笋。 讓我們再創(chuàng)造一個名為“團隊”的頁面：
新頁面
- 打開菜單功能谢澈，點擊“創(chuàng)建菜單”，確保 Primary Menu選項被勾選
創(chuàng)建菜單
- 回到前端刷新頁面御板，就可以看到剛剛添加的導(dǎo)航菜單了
導(dǎo)航菜單
- 現(xiàn)在讓我們測試一下“下拉菜單”功能锥忿。 我們把“示例頁面”和“團隊”放在“關(guān)于”頁面的下級：
設(shè)置層級
回到前端頁面刷新，現(xiàn)在下拉菜單就出現(xiàn)了
下拉菜單
學到這里你會發(fā)現(xiàn)實現(xiàn)導(dǎo)航欄非常容易怠肋。
