如何在 wp_nav_menu 中添加要链接的类? [英] How to add class to link in wp_nav_menu?
问题描述
我正在尝试创建一个没有 ul 和 li 的 wp 菜单，并在元素中添加了一个类.
我已经尝试在我的 function.php 中添加这个
function add_menuclass($ulclass) {return preg_replace('/<a/', '<a class="list-group-item"', $ulclass, 1);}add_filter('wp_nav_menu','add_menuclass');在我的模板中，我有:
'视频','容器' =>错误的，'回声' =>错误的，'items_wrap' =>'%3$s','深度' =>0,);echo strip_tags(wp_nav_menu( $menuParameters ), '' );?><a class="list-group-item" href="#">第一项</a><a href="#">第二项</a>我正在努力实现这一目标，基本上是将该类应用于我的所有项目(不知道为什么它只应用于一个项目)-请不要使用 jQuery.
<a class="list-group-item" href="#">第一项</a><a class="list-group-item" href="#">第二项</a>感谢 Sergiu Paraschiv 评论这个问题是关于限制为 1.
因此它应该在function.php中:
function add_menuclass($ulclass) {return preg_replace('/<a/', '<a class="list-group-item"', $ulclass);}add_filter('wp_nav_menu','add_menuclass');更新
实际上有一种更好的方法可以给我们更多的控制权，这段代码由 Jeff Starr 在 这篇文章
<块引用>注意:这不是添加当前类
在 wp 上创建您的菜单，然后记得在菜单编辑器中单击该位置，然后在您的功能中单击:
//自定义菜单示例@ https://digwp.com/2011/11/html-formatting-custom-menus/函数 clean_custom_menus() {$menu_name = 'nav-primary';//指定自定义菜单名称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 = '<导航>'."
";$menu_list .= " ".''."
";foreach ((array) $menu_items as $key => $menu_item) {$title = $menu_item->title;$url = $menu_item->url;$menu_list .= " ".'<li><a href="'.$url .'">'.$title .'</a></li>'."
";}$menu_list .= " ".'</ul>'."
";$menu_list .= " ".'</nav>'."
";} 别的 {//$menu_list = '<!-- 未定义列表-->';}回声 $menu_list;}
终于可以调用我们的菜单了:
<?php if (function_exists(clean_custom_menus())) clean_custom_menus();?>上面的代码取自上面链接的帖子，我想包括这个答案，因为看起来这个问题有很多访问.
更新 2
另一种解决方案是(可能是最好的):
header.php:
'顶部导航','菜单' => 'topnav','容器' =>'div','container_class' =>'折叠导航栏折叠'，'container_id' =>'导航栏折叠','menu_class' =>'菜单'，'回声' =>真的，'fallback_cb' =>'wp_page_menu','items_wrap' =>'<ul class="nav justify-content-end w-100 %2$s">%3$s</ul>','深度' =>0) );?>function.php:
//注册导航函数 register_my_menu() {register_nav_menu('topnav',__('topnav'));}add_action('init', 'register_my_menu');//让我们将*active*"作为类添加到 liadd_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);功能 special_nav_class($classes, $item){if( in_array('current-menu-item', $classes) ){$classes[] = '活动';}返回 $classes;}//让我们将自定义类添加到实际的链接标签函数 atg_menu_classes($classes, $item, $args) {if($args->theme_location == 'topnav') {$classes[] = '导航链接';}返回 $classes;}add_filter('nav_menu_css_class', 'atg_menu_classes', 1, 3);函数 add_menuclass($ulclass) {return preg_replace('/<a/', '<a class="nav-link"', $ulclass);}add_filter('wp_nav_menu','add_menuclass');I am trying to out a wp menu without ul and li and have a class added to the element.
I have tried adding this in my 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.
<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.
<div class="list-group">
<a class="list-group-item" href="#">First item</a>
<a class="list-group-item" href="#">Second item</a>
</div>
Thanks to Sergiu Paraschiv comment the issue was in regards of limiting to 1.
Therefore it should be in 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
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:
// 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>' ."
";
$menu_list .= " ". '<ul>' ."
";
foreach ((array) $menu_items as $key => $menu_item) {
$title = $menu_item->title;
$url = $menu_item->url;
$menu_list .= " ". '<li><a href="'. $url .'">'. $title .'</a></li>' ."
";
}
$menu_list .= " ". '</ul>' ."
";
$menu_list .= " ". '</nav>' ."
";
} 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
Another solution would be (maybe the best):
header.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:
// 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');
这篇关于如何在 wp_nav_menu 中添加要链接的类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
