wordpress - 如何添加类
在 Wordpress 中使用 wp_nav_menu()？

Question

我正在使用wp_nav_menu($args)并且我想将my_own_classCSS 类名添加到<li>元素中。

我想得到以下结果：

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

怎么做？

score 137 · Accepted Answer

无需创建自定义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);

score 74 · Accepted Answer

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/

score 68 · Accepted Answer

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

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

去YOURSITEURL/wp-admin/nav-menus.php
打开 SCREEN OPTIONS
make check CSS CLASSES，然后您将CSS Classes (optional) 在每个菜单链接中看到字段。

score 16 · Accepted Answer

将类添加到<li>标签而不编辑functions.php文件：

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

score 15 · Accepted Answer

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

score 4 · Accepted Answer

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

Tough 它是单级菜单或要为所有<li>元素添加类的菜单的快速修复，不建议用于更复杂的菜单

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

这是一种非常简单的调用“li”类和“任何类”替换的方法。只需按照说明进行操作。

在导航区域中使用此代码。

<?php
            $consult_menu = wp_nav_menu(array(
                    'theme_location' => 'topmenu',
                    'menu_id' => 'menu',
                    'menu_class' => 'navbar-nav m-auto',
                    'echo' => false
                )
            );
            $consult_menu = str_replace('menu-item', 'nav-item', $consult_menu);
            echo $consult_menu;
            ?>

然后在浏览器上检查您的代码。找到 wp 默认类，然后替换"str_replace( "default_class_here" , "new_li_class_here" ,$consult_menu); |注意：这里的 $consult_menu是我的主题名称，你可以在这里使用任何名称。

score 0 · Accepted Answer

对我来说正确的是 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);

score 0 · Accepted Answer

// 从主菜单中删除翻译

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

这是您轻松将新类添加到菜单包装的现有类数组的方法

score 0 · Accepted Answer

这就是我如何将 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);

score -1 · Accepted Answer

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

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

谢谢

score -3 · Accepted Answer

没有walker menu它是不可能直接添加它的。但是，您可以通过 javascript 添加它。

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

score -24 · Accepted Answer

您不能很容易地将类直接添加到 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 - 如何添加类在 Wordpress 中使用 wp_nav_menu()？

16 回答 16

Related

Reference

wordpress - 如何添加类
在 Wordpress 中使用 wp_nav_menu()？