如何在wp_nav_menu中添加要链接的类?

2022-08-30 15:04:26

我正在尝试在没有ul和li的情况下推出一个wp菜单,并在元素中添加一个类。

我已尝试在我的函数中添加它.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>' );
?>

但输出仅将类应用于第一项,而不是按预期将所有 s。<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>

答案 1

这个答案中得到提示,我发现这是关于将类添加到菜单列表项的最简洁的答案,我使用了nav_menu_link_attributes过滤器,它对于添加类确实很有效。

在函数.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 );

(可选)您可能希望添加将类添加到列表项的选项:

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

现在,在您的模板中,要构建菜单,您只需添加两个新参数,例如:

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

适用于具有多个具有不同外观的菜单的主题。


答案 2

感谢Sergiu Paraschiv的评论,问题是关于限制在1。

因此,它应该处于功能状态.php:

function add_menuclass($ulclass) {
   return preg_replace('/<a /', '<a class="list-group-item"', $ulclass);
}
add_filter('wp_nav_menu','add_menuclass');

更新

实际上有一种更好的方法,它给了我们更多的控制权,这段代码是由杰夫·斯塔尔(Jeff Starr)在这篇文章中提供的

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

在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

另一种解决方案是(也许是最好的):

页眉.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
      ) );
    ?>

功能.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');

推荐