php 如何在 wp_nav_menu 中添加要链接的类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26180688/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add class to link in wp_nav_menu?
提问by rob.m
I am trying to out a wp menu without ul and li and have a class added to the element.
我正在尝试创建一个没有 ul 和 li 的 wp 菜单，并将一个类添加到元素中。
I have tried adding this in my function.php
我试过在我的 function.php 中添加这个
function add_menuclass($ulclass) {
return preg_replace('/<a /', '<a class="list-group-item"', $ulclass, 1);
}
add_filter('wp_nav_menu','add_menuclass');
And in my template I have:
在我的模板中，我有：
<?php
$menuParameters = array(
'menu' => 'Videos',
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>
But the output only applies the class to the first item and not all of the <a>s as expected.
但是输出仅将类应用于第一项，而不是<a>预期的所有s。
<div class="list-group">
<a class="list-group-item" href="#">First item</a>
<a href="#">Second item</a>
</div>
I am trying to achieve this, basically to apply that class to ALL my item (not sure why it applies it to only one) - No jQuery please.
我正在努力实现这一目标，基本上是将该类应用于我的所有项目（不知道为什么它只应用于一个项目）-请不要使用 jQuery。
<div class="list-group">
<a class="list-group-item" href="#">First item</a>
<a class="list-group-item" href="#">Second item</a>
</div>
回答by rob.m
Thanks to Sergiu Paraschivcomment the issue was in regards of limiting to 1.
感谢Sergiu Paraschiv 的评论，问题在于限制为 1。
Therefore it should be in function.php:
因此它应该在function.php中：
function add_menuclass($ulclass) {
return preg_replace('/<a /', '<a class="list-group-item"', $ulclass);
}
add_filter('wp_nav_menu','add_menuclass');
UPDATE
更新
There is a better way actually which gives us much more control and the piece of code is provided by Jeff Starr on this post
实际上有一种更好的方法可以给我们更多的控制权，并且这段代码由 Jeff Starr 在这篇文章中提供
NOTE: this isn't adding the current class tho
注意：这不是添加当前类
Create your menu on wp, then remember to click the location in the menu editor then in your function you'd do:
在 wp 上创建菜单，然后记得在菜单编辑器中单击该位置，然后在您的函数中单击：
// custom menu example @ https://digwp.com/2011/11/html-formatting-custom-menus/
function clean_custom_menus() {
$menu_name = 'nav-primary'; // specify custom menu name
if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {
$menu = wp_get_nav_menu_object($locations[$menu_name]);
$menu_items = wp_get_nav_menu_items($menu->term_id);
$menu_list = '<nav>' ."\n";
$menu_list .= "\t\t\t\t". '<ul>' ."\n";
foreach ((array) $menu_items as $key => $menu_item) {
$title = $menu_item->title;
$url = $menu_item->url;
$menu_list .= "\t\t\t\t\t". '<li><a href="'. $url .'">'. $title .'</a></li>' ."\n";
}
$menu_list .= "\t\t\t\t". '</ul>' ."\n";
$menu_list .= "\t\t\t". '</nav>' ."\n";
} else {
// $menu_list = '<!-- no list defined -->';
}
echo $menu_list;
}
Finally we can call our menu:
最后我们可以调用我们的菜单：
<?php if (function_exists(clean_custom_menus())) clean_custom_menus(); ?>
The code above is taken from the post linked above, I thought to include this answer as it appears this question has many visits.
上面的代码取自上面链接的帖子，我想包含这个答案，因为这个问题似乎有很多访问量。
UPDATE 2
更新 2
Another solution would be (maybe the best):
另一种解决方案是（可能是最好的）：
header.php:
头文件.php：
<?php
wp_nav_menu( array(
'theme_location' => 'topnav',
'menu' =>'topnav',
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarCollapse',
'menu_class' => 'menu',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'items_wrap' => '<ul class="nav justify-content-end w-100 %2$s">%3$s</ul>',
'depth' => 0
) );
?>
function.php:
函数.php：
// register the nav
function register_my_menu() {
register_nav_menu('topnav',__( 'topnav' ));
}
add_action( 'init', 'register_my_menu' );
// let's add "*active*" as a class to the li
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
if( in_array('current-menu-item', $classes) ){
$classes[] = 'active ';
}
return $classes;
}
// let's add our custom class to the actual link tag
function atg_menu_classes($classes, $item, $args) {
if($args->theme_location == 'topnav') {
$classes[] = 'nav-link';
}
return $classes;
}
add_filter('nav_menu_css_class', 'atg_menu_classes', 1, 3);
function add_menuclass($ulclass) {
return preg_replace('/<a /', '<a class="nav-link"', $ulclass);
}
add_filter('wp_nav_menu','add_menuclass');
回答by stol
Taking a hint from this answerwhich I found was the most concise about adding classes to the list items of the menus, I used nav_menu_link_attributesfilter which does work well for adding classes.
从我发现的这个答案中得到一个提示，这是关于将类添加到菜单列表项的最简洁的方法，我使用了nav_menu_link_attributes过滤器，它在添加类时效果很好。
In your functions.php, add:
在您的functions.php 中，添加：
function add_menu_link_class( $atts, $item, $args ) {
if (property_exists($args, 'link_class')) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
Optionally, you may want to add the option to add classes to list items:
或者，您可能希望添加选项以将类添加到列表项：
function add_menu_list_item_class($classes, $item, $args) {
if (property_exists($args, 'list_item_class')) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);
Now, in your template, to build a menu you just add two new arguments, e.g.:
现在，在您的模板中，要构建菜单，您只需添加两个新参数，例如：
wp_nav_menu([
'theme_location'=> 'primary_navigation',
'menu_class' => 'navbar-nav ml-auto flex-nowrap',
'list_item_class' => 'nav-item',
'link_class' => 'nav-link m-2 menu-item nav-active'
]);
Works well with themes with multiple menus which have different appearance.
适用于具有不同外观的多个菜单的主题。
回答by Omid Ahmadyani
I want add 'item' class to li should write this code:
我想向 li 添加 'item' 类应该编写以下代码：
add_filter('nav_menu_css_class' , 'nav_class' , 10 , 2);
function nav_class($classes, $item){
$classes[] = 'item';
return $classes;
}
回答by Emily Gagnon
My solution is simple, use our friend jquery
我的解决方案很简单，使用我们的朋友 jquery
in the menu inject a custom menu_id
在菜单中注入自定义 menu_id
<?php
wp_nav_menu(array(
'theme_location'=>'primary',
'container'=>false,
'menu_class'=>'navbar-nav mr-auto',
'menu_id'=>'customAclassInWp_nav_menu'
)
);
?>
then use jquery to inject the missing class.
然后使用 jquery 注入缺失的类。
$( "#customAclassInWp_nav_menu li a" ).addClass( "nav-link" );
tadammmm :)
tadammmm :)
enjoy
请享用
