如何在 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>s。

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

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

Answer 2

感谢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 在this post 上提供

注意：这并没有添加当前类

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

Answer 3

我有解决方案将类添加到锚标记。

1：步骤：在functions.php中添加这个

function add_additional_class_on_a($classes, $item, $args)
{
    if (isset($args->add_a_class)) {
        $classes['class'] = $args->add_a_class;
    }
    return $classes;
}

add_filter('nav_menu_link_attributes', 'add_additional_class_on_a', 1, 3);

2：然后在你的主题中像这样使用它

<?php
        // Show Menu here
        wp_nav_menu(array(
            'theme_location' => 'my-footer-menu',
            'container_id'    => '',
            'menu_class'      => 'footer-top list-unstyled',
            'menu_id'         => '',
            'add_a_class'     => 'box-link text-dark',
        ));
?>

Answer 4

我想给 li 添加 'item' 类应该写下这段代码：

add_filter('nav_menu_css_class' , 'nav_class' , 10 , 2);
function nav_class($classes, $item){
    $classes[] = 'item';
    return $classes;
}

Answer 5

我在上面添加了我的解决方案。或者，您可以使用您的 wordpress 仪表板向菜单项 li 添加一个类。

让我们开始吧：

步骤：1： 在Menus 页面上Appearance 类别下。点击右上角的Screen Options。

步骤：2： 然后检查CSS classes复选框， 您将在导航菜单选项中看到CSS classes 输入框。

步骤：3： 在此处添加您的自定义类，它将显示在前端。

谢谢你:)