如何將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>

包裝器 – 一個

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

標題 – 一個

,其類為“navbar-header”,在任何尺寸的屏幕上都可見。

<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”的新菜單并向其中添加項目。轉到管理位置選項卡,并為名為“主要”的主題位置指定菜單“主要”。保存更改。

如何將Bootstrap導航欄集成到WordPress主題中如何將Bootstrap導航欄集成到WordPress主題中如何將Bootstrap導航欄集成到WordPress主題中
WordPress菜單管理頁面

2.3。將導航欄模型集成到模板中

打開您的 header.php 并將導航欄模型復制并粘貼到您希望其顯示的位置?,F在我們用 WordPress 的模板功能替換部分模型。首先放置徽標的正確鏈接。更改此行:

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

至:

<a class="navbar-brand" href="&lt;?php%20bloginfo('url')?&gt;"><?php bloginfo('name')?></a> 

下一步是從后端輸出菜單而不是模型菜單。對于這些行:


與:

<?php /* Primary navigation */  wp_nav_menu( array(   'menu' => 'top_menu',   'depth' =&gt; 2,   'container' =&gt; false,   'menu_class' =&gt; 'nav',   //Process nav menu using our custom nav walker   'walker' =&gt; new wp_bootstrap_navwalker()) ); ?&gt; 

現在您已將引導導航欄組件集成到您的主題中。


結論

在本教程中,我們研究了如何將使用 Bootstrap CSS 框架創建的導航欄集成到 WordPress 主題中。要加快主題開發速度,您只需下載源文件并將其粘貼到您的主題中即可。

您還可以在 Envato Market 上找到一些很棒的 Bootstrap 主題和模板,例如 Neon Bootstrap 管理模板或 Selphy Electronics 電子商務 Boostrap 模板。

如何將Bootstrap導航欄集成到WordPress主題中

? 版權聲明
THE END
喜歡就支持一下吧
點贊9 分享