【WordPress菜单-将类别添加到锚点】尝试将标准的引导程序”
nav-link”
类添加到由Wordpress菜单呈现的锚点。至今 …
1 /我可以将变量传递给wp_nav_menu()
<
?php wp_nav_menu(array(
'theme_location' =>
'header-menu', 'menu_class' =>
'navbar-nav', 'container' =>
'false'
) );
?>
并以这种方式将一个类应用于菜单, 然后删除包含的div。
2 /然后, 我使用Wordpress Appearances> Menu UI将” nav-item” 类应用于li标签。
问:如何将一个类应用于wordpress菜单锚的
#1你可以使用WP nav_menu_link_attributes挂钩执行所需的操作:
add_filter( 'nav_menu_link_attributes', function($atts) {
$atts['class'] = "nav-link";
return $atts;
}, 100, 1 );
… 或者如果你不喜欢闭包:
function add_link_atts($atts) {
$atts['class'] = "nav-link";
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_link_atts');
筛选菜单列表项为避免使用WordPress菜单UI将类添加到菜单列表项, 你可以利用” nav_menu_css_class” 过滤器:
add_filter( 'nav_menu_css_class', function($classes) {
$classes[] = 'nav-item';
return $classes;
}, 10, 1 );
#2wp_nav_menu()的参数不允许你使用默认功能将类添加到链接中。它将允许你将< a href=http://www.srcmini.com/” #” > < /a> 括在< span class =” wrapped-anchor” > < a href=” #” > < /a> < / span> 这样的任何html中你用 :
<
?php
$parameters = TimothyAURA->
set_specific_parameters_you_want();
// i mean, realy fullfill the array with the options you want based on the docs.
$parameters['before'] = '<
span class="wrapped-anchor">
';
$parameters['after'] = '<
/span>
';
wp_nav_menu($parameters);
如果确实需要为锚设置一个类, 则必须传递一个Walker对象。不过, 你将需要阅读并了解此特定文档。
#3这使你只能将类添加到” 特殊菜单” 的锚点。只需将你的类添加到下面的$ menuClassMap值中即可。
function mytheme__menu_anchors_add_css( $atts, $item, $args ) {$menuClassMap = [
'navbar-menu' =>
'my-footer-menu-link-class', 'footer-menu' =>
'my-footer-menu-link-class', ];
$additionalClassName = $menuClassMap[$args->
menu->
slug] ?? '';
if($additionalClassName){
if(!array_key_exists('class', $atts)){
$atts['class'] = '';
}
$classList = explode (' ' , $atts['class']);
$classList[] = $additionalClassName;
$atts['class'] = implode (' ' , $classList);
}
return $atts;
}add_filter( 'nav_menu_link_attributes', 'mytheme__menu_anchors_add_css', 10, 3 );
推荐阅读
- WordPress菜单链接不适用于左键单击
- WordPress菜单未在网站上显示,但在控制台日志和移动设备中可见
- WordPress菜单在标签中添加类
- WordPress的主要类别与ghost类别
- 具有不同bootstrap列的WordPress循环
- WordPress –为不同页面加载不同的CSS无法正常工作
- WordPress(将function.php放入队列后无法加载javascript)
- ARouter 在多 module 项目中实战
- ZooKeeper分布式配置——看这篇就够了