鏈接:https://github.com/wp-bootstrap/wp-bootstrap-navwalker
概述
This code in the main repo branch is undergoing a big shakeup to bring it in line with recent standards and to merge and test the backlog of PRs I have left for too long. Please use the v4.3.0 tag for stable version while this process happens. https://github.com/wp-bootstrap/wp-bootstrap-navwalker/releases/tag/v4.3.0
主repo分支中的此代碼正在進行重大調整,以使其與最新標準保持一致,併合並和測試我留了太長時間的PR的積壓。在此過程中,請使用v4.3.0標記獲取穩定版本。https://github.com/wp-bootstrap/wp-bootstrap-navwalker/releases/tag/v4.3.0
A custom WordPress Nav Walker Class to fully implement the Bootstrap 4 navigation style in a custom theme using the WordPress built in menu manager.
自定義WordPress Nav Walker類,可使用內置的WordPress菜單管理器在自定義主題中完全實現Bootstrap 4導航樣式。
注意
This is a utility class that is intended to format your WordPress theme menu with the correct syntax and CSS classes to utilize the Bootstrap dropdown navigation. It does not include the required Bootstrap JS and CSS files – you will have to include them manually.
這是一個實用程序類,旨在使用正確的語法和CSS類來格式化WordPress主題菜單,以利用Bootstrap下拉導航。它不包含必需的Bootstrap JS和CSS文件-您將必須手動添加它們。
WordPress.org主題合規性
This walker is fully compliant with all Theme Review guidelines for wordpress.org theme submission. It requires no modification to be compliant but you can optionally replace the wp-bootstrap-navwalker
text domain (which appears twice in the fallback
function) with the text domain of your theme.
這個walker完全符合wordpress.org主題提交的所有主題審查指南。它不需要進行修改就可以兼容,但是您可以選擇用主題的wp-bootstrap-navwalker
文本域替換文本域(在fallback
函數中出現兩次)。
Upgrade Notes升級注意
Between version 3 and version 4 of the walker there have been significant changes to the codebase. Version 4 of the walker is built to work with Bootstrap 4 and has not been tested for backwards compatibility with Bootstrap 3. A separate branch for Bootstrap 3 is maintained here: https://github.com/wp-bootstrap/wp-bootstrap-navwalker/tree/v3-branch
在Walker的版本3和版本4之間,對代碼庫進行了重大更改。Walker的版本4構建為可與Bootstrap 4一起使用,尚未經過測試以與Bootstrap 3向後兼容。在此處維護了Bootstrap 3的單獨分支:https : //github.com/wp-bootstrap/wp-bootstrap- navwalker / tree / v3-branch
Here is a list of the most notable changes:
- The filename has been changed and prefixed with
class-
to better fit PHP coding standards naming conventions.- New Name:
class-wp-bootstrap-navwalker.php
- Old Name:
wp-bootstrap-navwalker.php
- New Name:
- Icon and link modifier handling is now done through the
CSS Classes
menu item input instead of theTitle
input. - Icon only items are possible using icon classes in combination with the
sr-only
classname.
這是最顯着的變化的列表:
- 文件名已更改並帶有前綴,
class-
以更好地適應PHP編碼標準的命名約定。- 新名字:
class-wp-bootstrap-navwalker.php
- 舊名稱:
wp-bootstrap-navwalker.php
- 新名字:
- 現在,通過
CSS Classes
菜單項輸入而不是輸入來完成圖標和鏈接修飾符的處理Title
。 - 僅圖標項可以通過將圖標類與
sr-only
類名結合使用來實現。
安裝
Place class-wp-bootstrap-navwalker.php in your WordPress theme folder /wp-content/themes/your-theme/
Open your WordPress themes functions.php file – /wp-content/themes/your-theme/functions.php
– and add the following code:
將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 you encounter errors with the above code use a check like this to return clean errors to help diagnose the problem.
如果您在上述代碼中遇到錯誤,請使用類似的檢查來返回乾淨錯誤,以幫助診斷問題。
if(!file_exists(get_template_directory()。'/class-wp-bootstrap-navwalker.php')){
//文件不存在...返回錯誤。
返回 新的 WP_Error('class-wp-bootstrap-navwalker-missing',__('看來class-wp-bootstrap-navwalker.php文件可能丟失。','wp-bootstrap-navwalker'));
} else {
//文件存在...需要它。
require_once get_template_directory()。'/class-wp-bootstrap-navwalker.php' ;
}
You will also need to declare a new menu in your functions.php
file if one doesn』t already exist.
functions.php
如果還沒有文件,則還需要在文件中聲明一個新菜單。
register_nav_menus( array( 'primary' => __( 'Primary Menu', 'THEMENAME' ), ) );
使用
Add or update any wp_nav_menu()
functions in your theme (often found in header.php
) to use the new walker by adding a 'walker'
item to the wp_nav_menu args array.
通過在wp_nav_menu args數組中添加一項,添加或更新wp_nav_menu()
主題中的任何函數(通常在中找到header.php
)以使用新的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(),
) );
Your menu will now be formatted with the correct syntax and classes to implement Bootstrap dropdown navigation.
Typically the menu is wrapped with additional markup, here is an example of a fixed-top
menu that collapse for responsive navigation at the md breakpoint.
現在,您的菜單將使用正確的語法和類進行格式化,以實現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>
To change your menu style add Bootstrap nav class names to the menu_class
declaration.
Review options in the Bootstrap docs for more information on nav classes.
要更改菜單樣式,請在menu_class
聲明中添加Bootstrap導航類名稱。
查看Bootstrap文檔中的選項,以獲取有關nav類的更多信息。
顯示菜單
To display the menu you must associate your menu with your theme location. You can do this by selecting your theme location in the Theme Locations list while editing a menu in the WordPress menu manager.
要顯示菜單,您必須將菜單與主題位置相關聯。您可以通過在WordPress菜單管理器中編輯菜單時在「主題位置」列表中選擇主題位置來實現。
There has been some interest in making this walker the default walker for all menus. That could result in some unexpected situations but it can be achieved by adding this function to your functions.php file.
使此助步器成為所有菜單的默認助步器引起了人們的興趣。這可能會導致某些意外情況,但是可以通過將此函數添加到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' );
Simply updating the walker may not be enough to get menus working right, you may need to add wrappers or additional classes, you can do that via the above function as well.
僅僅更新walker可能不足以使菜單正常工作,您可能需要添加包裝器或其他類,也可以通過上述功能來實現。
Menu Caching 菜單緩存
On some sites generating a large menu that rarely ever changes on every page request is an overhead that you may want to avoid. In those cases I can suggest you look at storing menu results in a transient.
The biggest drawback to caching nav menus with this method is that it cannot easily apply the .current-menu-item
or the .active
class to the currently active item as WP decides what is currently active on page load – and since the menu is cached it only knows the active page that it was cached on originally.
You can decide yourself if you want to put up with those drawbacks for the benefit of removing the menu generation time on most page loads. You can follow this article by Dave Clements to see how we cached nav menus that were generated by this walker: https://www.doitwithwp.com/use-transients-speed-wordpress-menus/
Be sure to set the echo
argument to FALSE in the wp_nav_menu()
call when doing this so that the results can be stored instead of echoed to the page.
在某些站點上,生成一個大菜單而很少在每個頁面請求上進行更改的站點是您可能需要避免的開銷。在這些情況下,我建議您以暫態方式存儲菜單結果。
使用此方法緩存導航菜單的最大缺點是,由於WP決定了頁面加載時當前活動的內容,因此無法輕鬆地將.current-menu-item
或.active
類應用於當前活動的項目-並且由於已緩存菜單,因此它僅知道活動頁面原本已緩存。
您可以決定自己是否要忍受這些缺點,以省去大多數頁面加載時的菜單生成時間。您可以閱讀Dave Clements的這篇文章,以了解我們如何緩存由該行者生成的導航菜單:https : //www.doitwithwp.com/use-transients-speed-wordpress-menus/
執行此操作時,請確保echo
在the wp_nav_menu()
調用中將參數設置為FALSE,以便可以存儲結果,而不是將其回顯到頁面。
See also:
- 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
更多
This script included the ability to use Bootstrap nav link mods in your menus through the WordPress menu UI. Disabled links, dropdown headers and dropdown dividers are supported. Additionally icon support is built-in for Glyphicons and Font Awesome (note: you will need to include the icon stylesheets or assets separately).
該腳本包括通過WordPress菜單UI在菜單中使用Bootstrap導航鏈接mod的功能。支持禁用的鏈接,下拉標題和下拉分隔符。此外,Glyphicons和Font Awesome內置了圖標支持(注意:您將需要單獨包括圖標樣式表或素材資源)。
Icons 圖標
To add an Icon to your link simply enter Glyphicons or Font Awesome class names in the links CSS Classes field in the Menu UI and the walker class will do the rest. IE glyphicons glyphicons-bullhorn
or fa fa-arrow-left
or fas fa-arrow-left
.
要將圖標添加到鏈接,只需在菜單UI的「鏈接CSS類」字段中輸入Glyphicons或Font Awesome類名稱,其餘的將由walker類完成。IEglyphicons glyphicons-bullhorn
或fa fa-arrow-left
或fas fa-arrow-left
。
Icon-Only Items 僅圖標項
To make an item appear with the icon only apply the bootstrap screen reader class sr-only
to the item alongside any icon classnames. This will then hide only the text that would appear as the link text.
要使項目與圖標一起顯示,請僅將引導屏幕閱讀器類sr-only
與任何圖標類名一起應用於該項目。然後,這將僅隱藏將顯示為鏈接文本的文本。
Disabled Links 禁用鏈接
To set a disabled link simply add disabled
to the CSS Classes field in the Menu UI and the walker class will do the rest. Note: In addition to adding the .disabled class this will change the link href
to #
as well so that it is not a follow-able link.
要設置禁用的鏈接,只需將其添加disabled
到Menu UI中的CSS Classes字段,其餘的將由walker class完成。注意:除了添加.disableed類之外,這還將更改鏈接href
,#
以使其不是可跟隨的鏈接。
下拉標題,下拉分隔線和下拉項文本
Headers, dividers and text only items can be added within dropdowns by adding a Custom Link and adding either dropdown-header
, dropdown-divider
or dropdown-item-text
into the CSS Classes input. Note: This will remove the href
on the item and change it to either a <span>
for headers or a <div>
for dividers.
通過添加自定義鏈接並添加或到CSS類輸入中dropdown-header
,可以在下拉列表中添加標題,分隔符和純文本項。注意:這將刪除項目上的,並將其更改為for標題或for分隔符。dropdown-dividerdropdown-item-text
href<span><div>