Question

我正在使用wp_nav_menu($args)，我想将my_own_class CSS类名添加到<li>元素，以获得以下结果：

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

怎么做？

Answer 1

HERE WordPress add custom class in wp_nav_menu links

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

转到YOURSITEURL/wp-admin/nav-menus.php
打开SCREEN OPTIONS
选中CSS CLASSES，然后您会看到CSS Classes (optional) 每个菜单链接中的字段。

Answer 2

您可以在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/

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

更新

要通过特定菜单使用此过滤器

if ( 'main-menu' === $args->theme_location ) { //replace main-menu with your menu
    $classes[] = "nav-item"; 
}

Answer 5

在不编辑<li>文件的情况下将类添加到functions.php代码：

转到外观 - ＆gt;菜单 - ＆gt;屏幕选项 - ＆gt; CSS类
您将在Menu Items窗口

Answer 6

这些回答似乎都没有回答这个问题。这是类似于我在我的网站上使用的东西，通过其标题/名称定位菜单项：

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

Answer 7

如果你只是想要“添加类”，那么如何使用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 8

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

Answer 9

对我来说正确的方法是Zuan解决方案。请注意，将isset添加到$args->add_li_class中，但是如果尚未在所有Notice: Undefined property: 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);

Answer 10

我添加了一个类来轻松实现菜单参数。因此，您可以像这样简单地汇总并包含在您的函数中：

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

Answer 11

// 从主菜单中删除翻译

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

这是您如何轻松地将新类添加到您的 Menu wrapp 的现有类数组中

Answer 12

如果没有walker menu，就无法直接添加它。但是，您可以通过javascript添加它。

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

Answer 13

一年前已经在这里给出了答案。你可以按照这个答案进行很好的解释。

https://stackoverflow.com/a/52688935/7162602

谢谢

Answer 14

你不能很容易地直接向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类的功能。有关详细信息，请参阅最近的答案。

如何在Wordpress中使用wp_nav_menu（）在<li>中添加Class？</li>

14 个答案: