php - 如何在 wp_nav_menu 中添加类以链接？

Question

我正在尝试制作一个没有 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>

Answer 1

从 this answer 得到提示我发现这是最简洁的关于向菜单的列表项添加类的方法，我使用了 nav_menu_link_attributes适合添加类的过滤器。

在你的 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 );

可选地，您可能希望添加向列表项添加类的选项:

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

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