wp bootstrap navwalker下載 - wp bootstrap navwalker原始碼下載

WP Bootstrap 導航器

主倉庫分支中的這段程式碼正在經歷一次大的調整，以使其符合最新的標準，並合併和測試我積壓已久的 PR。在此過程發生時，請使用 v4.3.0 標籤以獲得穩定版本。 https://github.com/wp-bootstrap/wp-bootstrap-navwalker/releases/tag/v4.3.0

自訂 WordPress Nav Walker 類，使用 WordPress 內建選單管理器在自訂主題中完全實作 Bootstrap 4 導覽樣式。

筆記

這是一個實用程式類，旨在使用正確的語法和 CSS 類別來格式化您的 WordPress 主題選單，以利用 Bootstrap 下拉導覽。它不包含所需的 Bootstrap JS 和 CSS 檔案 - 您必須手動包含它們。

WordPress.org 主題合規性

此步行器完全符合 wordpress.org 主題提交的所有主題審查指南。它不需要修改即可相容，但您可以選擇將wp-bootstrap-navwalker文字域（在fallback函數中出現兩次）替換為主題的文字域。

升級注意事項

walker 的版本 3 和版本 4 之間的程式碼庫發生了重大變化。 walker 的版本4 是為與Bootstrap 4 配合使用而構建的，尚未測試與Bootstrap 3 的向後相容性。 - navwalker/樹/v3-分支

以下是最顯著變化的清單：

檔案名稱已更改並以class-為前綴，以更好地符合 PHP 編碼標準命名約定。
- 新名稱： class-wp-bootstrap-navwalker.php
- 舊名稱： wp-bootstrap-navwalker.php
圖示和連結修飾符處理現在透過CSS Classes選單項目輸入而不是Title輸入完成。
僅圖示項目可以使用圖示類別與sr-only類別名稱結合。

安裝

將class-wp-bootstrap-navwalker.php放入 WordPress 主題資料夾/wp-content/themes/your-theme/

開啟 WordPress 主題functions.php檔案 - /wp-content/themes/your-theme/functions.php - 並新增以下程式碼：

 /**
 * Register Custom Navigation Walker
 */
function register_navwalker (){
	require_once get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ;
}
add_action ( ' after_setup_theme ' , ' register_navwalker ' );

如果您在上述程式碼中遇到錯誤，請使用這樣的檢查來傳回乾淨的錯誤，以幫助診斷問題。

 if ( ! file_exists ( get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ) ) {
    // File does not exist... return an error.
    return new WP_Error ( ' class-wp-bootstrap-navwalker-missing ' , __ ( ' It appears the class-wp-bootstrap-navwalker.php file may be missing. ' , ' wp-bootstrap-navwalker ' ) );
} else {
    // File exists... require it.
    require_once get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ;
}

如果您的functions.php檔案尚不存在，您還需要聲明一個新選單。

 register_nav_menus ( array (
    ' primary ' => __ ( ' Primary Menu ' , ' THEMENAME ' ),
) );

用法

新增或更新主題中的任何wp_nav_menu()函數（通常在header.php中找到），以透過向 wp_nav_menu args 數組添加'walker'項目來使用新的 walker。

 wp_nav_menu ( array (
    ' theme_location '  => ' primary ' ,
    ' depth '           => 2 , // 1 = no dropdowns, 2 = with dropdowns.
    ' container '       => ' div ' ,
    ' container_class ' => ' collapse navbar-collapse ' ,
    ' container_id '    => ' bs-example-navbar-collapse-1 ' ,
    ' menu_class '      => ' navbar-nav mr-auto ' ,
    ' fallback_cb '     => ' WP_Bootstrap_Navwalker::fallback ' ,
    ' walker '          => new WP_Bootstrap_Navwalker (),
) );

您的選單現在將使用正確的語法和類別進行格式化，以實現 Bootstrap 下拉導覽。

通常，選單會以附加標記進行包裝，以下是fixed-top選單的範例，該選單會在 md 斷點處折疊以進行響應式導航。

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=" #bs - example - navbar - collapse - 1 " aria-controls= " bs - example - navbar - collapse - 1 " aria-expanded= " false " aria-label= " <? php esc_attr_e ( 'Toggle navigation' , 'your - theme - slug' ) ; ?> ">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
        <?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 (),
        ) );
        ?>
    </div>
</nav>

若要變更選單樣式，請將 Bootstrap 導覽類別名稱新增至menu_class聲明。

查看 Bootstrap 文件中的選項以取得有關導覽類別的詳細資訊。

顯示選單

若要顯示選單，您必須將選單與主題位置關聯。您可以透過在 WordPress 選單管理員中編輯選單時在主題位置清單中選擇主題位置來完成此操作。

使此 Walker 成為導航選單的預設 Walker

有人有興趣讓這個助行器成為所有選單的預設助行器。這可能會導致一些意外情況，但可以透過將此函數新增到您的functions.php 檔案中來實現。

 function prefix_modify_nav_menu_args ( $ args ) {
    return array_merge ( $ args , array (
        ' walker ' => new WP_Bootstrap_Navwalker (),
    ) );
}
add_filter ( ' wp_nav_menu_args ' , ' prefix_modify_nav_menu_args ' );

簡單地更新 walker 可能不足以讓選單正常工作，您可能需要添加包裝器或其他類，您也可以透過上述函數來做到這一點。

與 Bootstrap 5 一起使用

Bootstrap 5 使用命名空間資料屬性。所有data屬性現在都包含bs作為中綴。新屬性的工作方式與舊屬性一樣。這是上面範例中的選單切換按鈕，其中包含重新命名的資料屬性。

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=" #bs - example - navbar - collapse - 1 " aria-controls= " bs - example - navbar - collapse - 1 " aria-expanded= " false " aria-label= " <? php esc_attr_e ( 'Toggle navigation' , 'your - theme - slug' ) ; ?> ">
    <span class="navbar-toggler-icon"></span>
</button>

walker 也透過start_el()方法加入用於下拉切換的資料屬性。將其貼到您的functions.php中以使walker使用固定資料屬性。

 add_filter ( ' nav_menu_link_attributes ' , ' prefix_bs5_dropdown_data_attribute ' , 20 , 3 );
/**
 * Use namespaced data attribute for Bootstrap's dropdown toggles.
 *
 * @param array    $atts HTML attributes applied to the item's `<a>` element.
 * @param WP_Post  $item The current menu item.
 * @param stdClass $args An object of wp_nav_menu() arguments.
 * @return array
 */
function prefix_bs5_dropdown_data_attribute ( $ atts , $ item , $ args ) {
    if ( is_a ( $ args -> walker , ' WP_Bootstrap_Navwalker ' ) ) {
        if ( array_key_exists ( ' data-toggle ' , $ atts ) ) {
            unset( $ atts [ ' data-toggle ' ] );
            $ atts [ ' data-bs-toggle ' ] = ' dropdown ' ;
        }
    }
    return $ atts ;
}

選單快取

在某些網站上，產生一個大選單，而該選單很少在每個頁面請求上發生變化，這是您可能想要避免的開銷。在這些情況下，我建議您考慮將選單結果儲存在瞬態中。

使用此方法快取導航選單的最大缺點是，它無法輕鬆地將.current-menu-item或.active類別應用於當前活動項目，因為 WP 決定頁面加載時當前活動的內容 - 並且由於選單已快取它只知道最初緩存它的活動頁面。

您可以自行決定是否要忍受這些缺點，以消除大多數頁面載入時的選單產生時間。您可以關注 Dave Clements 的這篇文章，以了解我們如何快取此步行器產生的導航選單：https://www.doitwithwp.com/use-transients-speed-wordpress-menus/

執行此操作時，請務必在the wp_nav_menu()呼叫中將echo參數設為 FALSE，以便可以儲存結果而不是回顯到頁面。

參見：

https://generatewp.com/how-to-use-transients-to-speed-up-wordpress-menus/
https://vip-svn.wordpress.com/plugins/cache-nav-menu/cache-nav-menu.php

附加功能

該腳本包括透過 WordPress 選單 UI 在選單中使用 Bootstrap 導航連結模組的功能。支援停用連結、下拉標題和下拉分隔線。此外，Glyphicons 和 Font Awesome 內建了圖示支援（注意：您需要單獨包含圖示樣式表或資源）。

圖示

要將圖示新增至鏈接，只需在選單 UI 的連結CSS 類別欄位中輸入 Glyphicons 或 Font Awesome 類別名稱，walker 類別將完成剩下的工作。 IE glyphicons glyphicons-bullhorn或fa fa-arrow-left或fas fa-arrow-left 。

僅圖示項目

要使項目與圖示一起顯示，只需將引導螢幕閱讀器類別sr-only套用至該項目以及任何圖示類別名稱。這將僅隱藏顯示為連結文字的文字。

停用連結

要設定禁用鏈接，只需將disabled添加到菜單 UI 中的CSS 類字段，walker 類將完成剩下的工作。注意：除了新增 .disabled 類別之外，這還會將連結href變更為# ，以便它不是可追蹤的連結。

下拉標題、下拉分隔線和下拉項目文本

透過新增自訂連結並將dropdown-header 、 dropdown-divider或dropdown-item-text新增至CSS 類別輸入中，可以在下拉清單中新增標題、分隔線和純文字項目。注意：這將刪除項目上的href並將其變更為用於標題的<span>或用於分隔符號的<div> 。

定制器預覽中缺少編輯快捷方式

根據wp_nav_menu()的文檔，必須提供自訂 walker 類別的實例才能將自訂 walker 套用到選單。由於實例不可 JSON 序列化，這將導致選單編輯捷徑不會出現在自訂器預覽中。若要解決此問題，請執行以下操作：

提供類別名稱字串而不是類別實例作為 wp_nav_menu 參數數組中“walker”鍵的值，

wp_nav_menu( array(
    'theme_location'  => 'primary',
    'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id'    => 'bs-example-navbar-collapse-1',
    'menu_class'      => 'navbar-nav mr-auto',
    'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
-    'walker'          => new WP_Bootstrap_Navwalker(),
+    'walker'          => 'WP_Bootstrap_Navwalker',
) );

透過將此篩選器新增至您的functions.php來重新新增類別實例

 function slug_provide_walker_instance ( $ args ) {
    if ( isset ( $ args [ ' walker ' ] ) && is_string ( $ args [ ' walker ' ] ) && class_exists ( $ args [ ' walker ' ] ) ) {
        $ args [ ' walker ' ] = new $ args [ ' walker ' ];
    }
    return $ args ;
}
add_filter ( ' wp_nav_menu_args ' , ' slug_provide_walker_instance ' , 1001 );