我正在使用wp_nav_menu($args)，我想将my_own_class CSS 类名添加到<li> 元素。
我想得到以下结果：
<li class='my_own_class'><a href=''>Link</a>
怎么做？
【问题讨论】：
wp_nav_menu() 函数中使用它..
标签： wordpress wordpress-theming wp-nav-walker wp-nav-menu-item
无需创建自定义walker。只需使用附加参数并为 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);
【讨论】：
isset($args->add_li_class)，我不得不添加array_key_exists('add_li_class', $args)。对于$classes[] = $args->add_li_class;，我必须添加$classes[] = $args['add_li_class'];。
您可以在您的functions.php 文件中为nav_menu_css_class 操作添加过滤器。
例子：
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/
【讨论】：
register_nav_menus(array( 'primary' => __( 'Primary Menu' ), 'secondary' => __( 'Secondary Menu' ) ) );
这里WordPress add custom class in wp_nav_menu links
或
您可以从管理面板添加课程<li class='my_own_class'><a href=''>Link</a></li>：
转到YOURSITEURL/wp-admin/nav-menus.php
打开SCREEN OPTIONS
CSS CLASSES，然后你会看到CSS Classes (optional)
每个菜单链接中的字段。【讨论】：
如下图使用这个过滤器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);
更新
将此过滤器与特定菜单一起使用
if ( 'main-menu' === $args->theme_location ) { //replace main-menu with your menu
$classes[] = "nav-item";
}
【讨论】：
if ( 'main-menu' === $args->theme_location ) { $classes[] = "nav-item"; }包裹$classes[] = "nav-item";
如果你只想“添加类”，那么只使用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> 元素添加类的菜单是一种快速修复，不建议用于更复杂的菜单
【讨论】：
这些回答似乎都没有真正回答这个问题。这与我在我的网站上使用的类似，通过标题/名称定位菜单项：
function add_class_to_menu_item($sorted_menu_objects, $args) {
$theme_location = 'primary_menu'; // Name, ID, or Slug of the target menu location
$target_menu_title = 'Link'; // Name/Title of the menu item you want to target
$class_to_add = 'my_own_class'; // Class you want to add
if ($args->theme_location == $theme_location) {
foreach ($sorted_menu_objects as $key => $menu_object) {
if ($menu_object->title == $target_menu_title) {
$menu_object->classes[] = $class_to_add;
break; // Optional. Leave if you're only targeting one specific menu item
}
}
}
return $sorted_menu_objects;
}
add_filter('wp_nav_menu_objects', 'add_class_to_menu_item', 10, 2);
【讨论】：
我添加了一个类来轻松实现菜单参数。因此，您可以像这样自定义并包含在您的函数中：
include_once get_template_directory() . DIRECTORY_SEPARATOR . "your-directory" . DIRECTORY_SEPARATOR . "Menu.php";
<?php $menu = (new Menu('your-theme-location'))
->setMenuClass('your-menu')
->setMenuID('your-menu-id')
->setListClass('your-menu-class')
->setLinkClass('your-menu-link anchor') ?>
// Print your menu
<?php $menu->showMenu() ?>
<?php
class Menu
{
private $args = [
'theme_location' => '',
'container' => '',
'menu_id' => '',
'menu_class' => '',
'add_li_class' => '',
'link_class' => ''
];
public function __construct($themeLocation)
{
add_filter('nav_menu_css_class', [$this,'add_additional_class_on_li'], 1, 3);
add_filter( 'nav_menu_link_attributes', [$this,'add_menu_link_class'], 1, 3 );
$this->args['theme_location'] = $themeLocation;
}
public function wrapWithTag($tagName){
$this->args['container'] = $tagName;
return $this;
}
public function setMenuID($id)
{
$this->args['menu_id'] = $id;
return $this;
}
public function setMenuClass($class)
{
$this->args['menu_class'] = $class;
return $this;
}
public function setListClass($class)
{
$this->args['add_li_class'] = $class;
return $this;
}
public function setLinkClass($class)
{
$this->args['link_class'] = $class;
return $this;
}
public function showMenu()
{
return wp_nav_menu($this->args);
}
function add_additional_class_on_li($classes, $item, $args) {
if(isset($args->add_li_class)) {
$classes[] = $args->add_li_class;
}
return $classes;
}
function add_menu_link_class( $atts, $item, $args ) {
if (property_exists($args, 'link_class')) {
$atts['class'] = $args->link_class;
}
return $atts;
}
}
【讨论】：
<?php
echo preg_replace( '#<li[^>]+>#', '<li class="col-sm-4">',
wp_nav_menu(
array(
'menu' => $nav_menu,
'container' => false,
'container_class' => false,
'menu_class' => false,
'items_wrap' => '%3$s',
'depth' => 1,
'echo' => false
)
)
);
?>
【讨论】：
对我来说正确的是 Zuan 解决方案。请注意将 isset 添加到 $args->add_li_class ，但是如果您尚未在所有 wp_nav_menu() 函数中设置属性，则会得到 Notice: Undefined property: stdClass::$add_li_class 。
这是对我有用的功能：
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);
【讨论】：
// 从主菜单中删除翻译
function wpdocs_channel_nav_class($classes, $item, $args){
{
if ('primary' === $args->theme_location) {
$classes[] = "notranslate";
}
return $classes;
}
add_filter('nav_menu_css_class', 'wpdocs_channel_nav_class', 10, 4);
这是您轻松将新类添加到菜单包装的现有类数组的方法
【讨论】：
这就是我将 WordPress 的 MainMenu 和类添加到 li 的方式。
<?php
$defaults = array( 'menu' => 'mainmenu',
'container' => false,
'fallback_cb' => 'wp_page_menu',
'items_wrap' => '<ul class="navbar-nav" id="myTab">%3$s</ul>',
'add_li_class' => 'nav-item',
'theme_location' => 'mainmenu' );
wp_nav_menu( $defaults ); ?>
在functions.php中使用这段代码
function li_new_class($classes, $item, $args) {
if(isset($args->add_li_class)) {
$classes[] = $args->add_li_class;
}
return $classes;
}
add_filter('nav_menu_li_class', 'li_new_class', 1, 3);
【讨论】：
【讨论】：
如果没有walker menu，则无法直接添加它。但是，您可以通过 javascript 添加它。
$('#menu > li').addClass('class_name');
【讨论】：
您不能很容易地将类直接添加到 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 类的功能。有关详细信息，请参阅更多最新答案。
【讨论】：