您是否曾想加快主題開發過程？我認為答案是“是”，并且您已經了解 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>
包裝器 – 一個
<div class="navbar-header">…</div>
標題 – 一個
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">…</button>
切換按鈕 –
<a class="navbar-brand" href="#">Brand</a>
品牌 – 帶有徽標的鏈接；它是可選的，您可以在此處省略它并將其包含在其他地方。
<div class="collapse navbar-collapse navbar-ex1-collapse">…</div>
可折疊內容 – 具有“collapse”類和“navbar-collapse”類的
- …
菜單 – 一個
- ，其類為“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 并將導航欄模型復制并粘貼到您希望其顯示的位置?，F在我們用 WordPress 的模板功能替換部分模型。首先放置徽標的正確鏈接。更改此行：
<a class="navbar-brand" href="#">Brand</a>
至：
<a class="navbar-brand" href="<?php%20bloginfo('url')?>"><?php bloginfo('name')?></a>
下一步是從后端輸出菜單而不是模型菜單。對于這些行：
與：
<?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 模板。
