如何在<；中添加类；李>；在Wordpress中使用wp_nav_menu（）？

我正在使用

wp\u nav\u菜单（$args）

，我想将

my\u own\u class

CSS类名添加到

元素中，以获得以下结果：

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

---

如何做到这一点？

您不能很容易地将类直接添加到LIs中，但是有没有理由不以稍微不同但同样具体的方式（通过它们的父ul）将它们作为目标

您可以使用menu_class和menu_ID参数（粘贴到LIs的UL父级）设置菜单的类或ID，然后通过CSS以li为目标，如下所示：

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

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

此处

或 您可以从管理面板添加类

：

转到

YOURSITEURL/wp admin/nav menus.php

打开

屏幕选项

选中

CSS类

，然后您将看到

CSS类（可选）

每个菜单链接中的字段

---

如果没有

walker菜单

，则无法直接添加它。但是，您可以通过javascript添加它

$('#menu > li').addClass('class_name');

---

您可以在functions.php文件中为

nav_menu\u css_类

操作添加过滤器

例如：

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

---

医生：

这些回答似乎都不能真正回答这个问题。这里有一些类似于我在我的网站上使用的东西，通过标题/名称来定位菜单项：

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

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

---

在不编辑
函数的情况下将类添加到
标记。php
文件：

转到外观->菜单->屏幕选项->CSS类
您将在
菜单项
窗口中启用CSS类选项
使用此过滤器
nav\u菜单\u css\u类
，如下所示

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"; 
}

无需创建自定义助行器。只需使用额外的参数并为nav_menu_css_类设置过滤器

例如：

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

对我来说，正确的方法是Zuan解决方案。请注意将isset添加到
$args->add_li_class
，但是您得到了
注意：未定义的属性：stdClass:：$add_li_class
，如果您没有在所有
wp_nav_menu（）
函数中设置该属性

这是对我有用的功能：

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

我添加了一个类来轻松实现菜单参数。因此，您可以自定义并在函数中包含以下内容：

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() ?>

包含一次获取模板目录（）。目录分隔符。“你的目录”。目录分隔符。“Menu.php”；
//打印菜单

一年前这里已经给出了答案。
你可以很好地解释这个答案


谢谢
//从主菜单中删除翻译

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

这就是如何轻松地将新类添加到菜单wrapp的现有类数组中的方法。
此函数有很好的文档记录，但添加一个类到ul或使用某些内容包装链接内容并相应地更改CSS似乎要容易得多（自定义walker是您的选择）：或者..您可以创建自己的菜单walker（）在你的
wp\u nav\u menu（）
函数中使用它。使用jquery绝对不是你应该能够在phpI中解决的问题的一个选项。Danny同意也不同意，我相信如果你对PHP感到满意，可以继续进行必要的更改，但是如果你缺乏知识，没有能力修改现有代码（无论出于何种原因）这是一个可以接受的方法。但是，如果可能的话——修改您的php代码以允许更改。如果不可能，请添加您的css hack。我知道这个答案发布的时间比所选答案晚得多，但我觉得应该将其标记为正确答案，因为它完全符合问题的要求。我无法实现这一点，直接复制到我的fu中nctions.php，它什么也不做。@SpencerShattuck您的主题中有菜单位置“secondary”吗？您可能还需要类似于
注册导航菜单（数组（'primary'=>\（'primary menu'），'secondary'=>导航菜单（'secondary menu'））
我在以下位置找到了一个适合我的解决方案：虽然我很感激尝试提出一个解决方案，但这并不能回答问题。例如，在我的情况下，我需要应用引导4“col”类。最简单的方法是使用JS。否则，您需要通过PHP添加一个过滤器，以修改核心函数，如其他答案中所述。我知道这很旧，但在我的情况下，它同样没有帮助，也没有解决最初的问题。在我的情况下，我尝试在网络安装中按名称定位菜单项不同站点的菜单列表项ID不同。这个答案是不正确的-请参阅其他经过投票的答案，以了解处理此问题的其他方法。这可能不是解决问题的最佳方法，但它是一个完全有效的答案。几乎总是有多种方法来解决任何问题，每个潜在的解决方案都有利弊。我不同意e为什么这个答案会受到如此多的憎恨。这是答案OP。这必须由最终用户完成。这不是一个在主题中实现的解决方案。对于开发人员来说，这是最好和简单的解决方案，就好像他们正在开发静态主题一样。但是如何用这种方法针对特定的菜单。我有一个名为main menu的菜单和另一个名为footer-menu的菜单。尝试包装
$classes[]=“nav item”
和
if（'main menu'===$args->theme\u location）{$classes[]=“nav item”}
很好的解决方案。如果我是OP，我会接受这个答案。最好的解决方案是IMO，通用的和干净的，最好的解决方案，但我需要修改
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);

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

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