问题 如何在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');

在我的模板中,我有:

<?php
 $menuParameters = array(
   'menu'  => 'Videos',
   'container'       => false,
   'echo'            => false,
   'items_wrap'      => '%3$s',
   'depth'           => 0,
);

  echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>

但是输出只将类应用于第一个项而不是全部 <a>如预期的那样。

<div class="list-group">
   <a class="list-group-item" href="#">First item</a>
   <a href="#">Second item</a>
</div>

我试图实现这一点,基本上将该类应用于我的所有项目(不确定为什么它只适用于一个) - 请不要jQuery。

<div class="list-group">
   <a class="list-group-item" href="#">First item</a>
   <a class="list-group-item" href="#">Second item</a>
</div>

10028
2017-10-03 14:17


起源

php.net/manual/en/function.preg-replace.php  - 第四个参数, $limit。你正在设置它 1。阅读文档。非常清楚 为什么 当您明确要求它像这样工作时,就会发生这种情况。 - Sergiu Paraschiv
为了澄清,您想为菜单中的每个<a>添加一个额外的类吗? - rob_was_taken
@rob_was_taken是的确切 - rob.m
@SergiuParaschiv确定不知道。请看看 - rob.m
@SergiuParaschiv感谢您的评论我提出了自己的答案解决方案 - rob.m


答案:


谢谢 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');

UPDATE

实际上有一种更好的方法可以让我们获得更多的控制权,而这段代码则由Jeff Starr提供 这个帖子 

注意:这不是添加当前类的

在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;
}

最后我们可以调用我们的菜单:

<?php if (function_exists(clean_custom_menus())) clean_custom_menus(); ?>

上面的代码取自上面链接的帖子,我想包括这个答案,因为看起来这个问题有很多访问。

更新2

另一个解决方案是(可能是最好的):

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');

13
2017-10-03 14:57



感谢您更新答案。 - rob_was_taken


我的解决方案很简单,使用我们的朋友jquery

在菜单中注入一个自定义menu_id

<?php 
   wp_nav_menu(array(
     'theme_location'=>'primary', 
     'container'=>false,
     'menu_class'=>'navbar-nav mr-auto',
     'menu_id'=>'customAclassInWp_nav_menu'
    )
  ); 
?>

然后使用jquery注入缺少的类。

$( "#customAclassInWp_nav_menu li a" ).addClass( "nav-link" );

tadammmm :)

请享用


-1
2018-06-29 17:58



问题具体说明 请不要jQuery。。 - Derek
@Derek正好 - rob.m