链接: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>