如何在Wordpress中使用wp_nav_menu()在<li>中添加Class？

Question

我正在使用wp_nav_menu($args),我想将my_own_classCSS类名添加到<li>元素中以获得以下结果:

<li class='my_own_class'><a href=''>Link</a>

怎么做？

Answer 1

这里WordPress在wp_nav_menu链接中添加自定义类

或者您可以<li class='my_own_class'><a href=''>Link</a></li> 从管理面板添加课程 :

1. 去 YOURSITEURL/wp-admin/nav-menus.php

2. 打开 SCREEN OPTIONS

3. 选中CSS CLASSES,然后您将CSS Classes (optional) 在每个菜单链接中看到字段.

Answer 2

您可以nav_menu_css_class在functions.php文件中为操作添加过滤器.

例:

function atg_menu_classes($classes, $item, $args) {
  if($args->theme_location == 'secondary') {
    $classes[] = 'list-inline-item';
  }
  return $classes;
}
add_filter('nav_menu_css_class', 'atg_menu_classes', 1, 3);

文档:https://developer.wordpress.org/reference/hooks/nav_menu_css_class/

Answer 3

无需创建自定义助行器.只需使用其他参数并为nav_menu_css_class设置过滤器.

例如:

$args = array(
    'container'     => '',
    'theme_location'=> 'your-theme-loc',
    'depth'         => 1,
    'fallback_cb'   => false,
    'add_li_class'  => 'your-class-name1 your-class-name-2'
    );
wp_nav_menu($args);

注意新的'add_li_class'参数.

并在functions.php上设置过滤器

function add_additional_class_on_li($classes, $item, $args) {
    if(isset($args->add_li_class)) {
        $classes[] = $args->add_li_class;
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);

Answer 4

使用此过滤器nav_menu_css_class如下所示

function add_classes_on_li($classes, $item, $args) {
    $classes[] = 'nav-item';
    return $classes;
}
add_filter('nav_menu_css_class','add_classes_on_li',1,3);

Answer 5

将Class添加到<li>标记而不编辑functions.php文件:

1. 转到外观 - >菜单 - >屏幕选项 - > CSS类
2. 您将在Menu ItemsWindow中启用CSS Class选项

Answer 6

str_replace如果您只想“添加类”，那么只使用函数怎么样：

<?php
    echo str_replace( '<li class="', '<li class="myclass ',
        wp_nav_menu(
            array(
                'theme_location'    => 'main_menu',
                'container'         => false,
                'items_wrap'        => '<ul>%3$s</ul>',
                'depth'             => 1,
                'echo'              => false
            )
        )
    );
?>

对于单级菜单或要向所有<li>元素添加类的菜单来说，这是一种快速修复，但不建议用于更复杂的菜单

Answer 7

您无法非常轻松地将类直接添加到 LI，但是有什么理由不以稍微不同但同样具体的方式（通过其父 ul）来定位它们？

您可以使用 menu_class 和 menu_id 参数（附加到 LI 的 UL 父级）设置菜单的类或 ID，然后通过 CSS 以这种方式定位 li，如下所示：

<?php wp_nav_menu('menu_id=mymenu'); ?>

对于CSS：

ul#mymenu li {
    /* your styles here */
}

编辑：在 2013 年撰写本文时，这是添加它的最简单方法，但此后的更新添加了直接在管理导航编辑器中添加 CSS 类的功能。有关详细信息，请参阅最近的答案。