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

问题描述 投票：0回答：16

我正在使用 

wp_nav_menu($args)
并且我想将 
my_own_class
CSS 类名添加到 
<li>
元素。

我想得到以下结果：

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

如何做到这一点？

wordpress wordpress-theming wp-nav-walker wp-nav-menu-item
16个回答
172
投票

无需创建自定义助行器。只需使用附加参数并为 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);
76
投票

您可以在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);
68
投票

此处 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)
    每个菜单链接中的字段。
17
投票

将类添加到 

<li>
标签而不编辑 
functions.php
文件：

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

15
投票

使用此过滤器

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"; 
}
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>
元素添加类的菜单来说，这是一种快速修复，不建议用于更复杂的菜单

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);
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;
    }
}
2
投票
<?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
                            )
                    )
            );
?>
2
投票

您可以简单地使用 

wp_nav_menu_items
来 过滤导航菜单的 HTML 列表内容。

显示导航菜单

wp_nav_menu( array(
   'theme_location' => 'parimary',
   'container' => 'ul',
   'menu_class'=> 'nav col-12 col-md-auto mb-2 justify-content-center mb-md-0',
   'add_li_class'  => 'your-class-name1 your-class-name-2',
) );

菜单注册

function thesportworship_register_menus(){
    register_nav_menus( array(
        'primary'  => __( 'Main Menu', 'thesportworship' ),
    ) );
}
add_action( 'after_setup_theme', 'thesportworship_register_menus', 0 );

应用过滤器

function add_additional_class($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', 1, 3);
0
投票

对我来说正确的解决方案是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);
0
投票

// 从主菜单中删除翻译

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

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

0
投票

这就是我将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);
0
投票

这是一种非常简单的方法，可以轻松调用 “li” calss 和“任何类”替换。只需按照说明操作即可。

在导航区域使用此代码。

<?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这是我的主题名称，您可以在这里使用任何名称。

0
投票

创建自定义步行者类

class Custom_Menu_Walker extends Walker_Nav_Menu {

    function start_lvl( &$output, $depth = 0, $args = null ) {
        // Add custom class to the <ul> at this level
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"sub-menu-level-$depth\">\n";
    }

    function start_el( &$output, $item, $depth = 0, $args = null ) {
        // Add custom class to each <li> item
        $indent = ($depth) ? str_repeat("\t", $depth) : '';
        $class_names = $value = '';

        $classes = empty($item->classes) ? array() : (array) $item->classes;

        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
        $class_names = ' class="'.esc_attr($class_names).'"';

        $output .= $indent.'<li id="menu-item-'.$item->ID.'"'.$value.$class_names.'>';

        $atts = array();
        $atts['title']  = ! empty( $item->title ) ? esc_attr( $item->title ) : '';
        $atts['target'] = ! empty( $item->target ) ? esc_attr( $item->target ) : '';
        $atts['rel']    = ! empty( $item->xfn ) ? esc_attr( $item->xfn ) : '';
        $atts['href']   = ! empty( $item->url ) ? esc_attr( $item->url ) : '';

        $atts = apply_filters('nav_menu_link_attributes', $atts, $item, $args);

        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ('href' === $attr) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        $item_output = $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);

        // You can add more customizations or classes as needed
    }

    function end_lvl( &$output, $depth = 0, $args = null ) {
        // Add custom closing tag for the <ul> at this level
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul>\n";
    }

    // Add this method to fix the compatibility issue
    function end_el( &$output, $item, $depth = 0, $args = null ) {
        // Add custom closing tag for the <li> item
        $output .= "</li>\n";
    }
}

然后使用它

 <?php wp_nav_menu(array('theme_location' => 'main-menu', 'walker' => new Custom_Menu_Walker())) ?>

此自定义步行器还指示菜单列表的深层，例如“子菜单级别 0”等等...

-26
投票

您无法非常轻松地将类直接添加到 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 类的功能。有关详细信息，请参阅更多最近的答案。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.