wordpress wp_nav_menu 更改子菜单类名称？

wp_nav_menu change sub-menu class name?

提问by Cam

Is there a way to change the child <ul class="sub-menu">generated by WordPress itself to a custom class name?

有没有办法将<ul class="sub-menu">WordPress本身生成的子项更改为自定义类名？

I know the parent <ul>you can remove or change the name with 'menu_class' => 'newname'.

我知道<ul>您可以删除或更改名称的父级'menu_class' => 'newname'。

I couldn't find the answer. Itried 'submenu_class' => 'customname'. It seems logic to me, but obviously that is no the right one.

我找不到答案。试过了'submenu_class' => 'customname'。这对我来说似乎是合乎逻辑的，但显然这不是正确的。

any ideas?

有任何想法吗？

回答by Richard M

There is no option for this, but you can extend the 'walker' object that WordPress uses to create the menu HTML. Only one method needs to be overridden:

对此没有选项，但您可以扩展 WordPress 用于创建菜单 HTML 的“walker”对象。只需要覆盖一种方法：

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
  function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"my-sub-menu\">\n";
  }
}

Then you just pass an instance of your walker as an argument to wp_nav_menulike so:

然后你只需将你的 walker 实例作为参数传递给wp_nav_menu这样的：

'walker' => new My_Walker_Nav_Menu()

回答by vralle

replace class:

替换类：

echo str_replace('sub-menu', 'menu menu_sub', wp_nav_menu( array(
    'echo' => false,
    'theme_location' => 'sidebar-menu',
    'items_wrap' => '<ul class="menu menu_sidebar">%3$s</ul>' 
  ) )
);

回答by Pushpendu Mondal

You can use WordPress preg_replacefilter (in your theme functions.php file) example:

您可以使用 WordPress preg_replace过滤器（在您的主题 functions.php 文件中）示例：

function new_submenu_class($menu) {    
    $menu = preg_replace('/ class="sub-menu"/','/ class="yourclass" /',$menu);        
    return $menu;      
}

add_filter('wp_nav_menu','new_submenu_class'); 

回答by FlavioEscobar

This is an old question and I'm not sure if the solution I'm going to mention was available by the time you asked, but I think it's worth mentioning. You can achieve what you want by adding a filter to nav_menu_submenu_css_class. See the example below - you can replace my-new-submenu-classby the class(es) you want:

这是一个老问题，我不确定我要提到的解决方案在您提出问题时是否可用，但我认为值得一提。您可以通过向nav_menu_submenu_css_class. 请参阅下面的示例 - 您可以替换my-new-submenu-class为您想要的类：

function my_nav_menu_submenu_css_class( $classes ) {
    $classes[] = 'my-new-submenu-class';
    return $classes;
}
add_filter( 'nav_menu_submenu_css_class', 'my_nav_menu_submenu_css_class' );

回答by Jonathan Wold

Here's an update to what Richard did that adds a "depth" indicator. The output is level-0, level-1, level-2, etc.

这是理查德所做的更新，添加了“深度”指示器。输出为 0 级、1 级、2 级等。

class UL_Class_Walker extends Walker_Nav_Menu {
  function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"level-".$depth."\">\n";
  }
}

回答by zartgesotten

Like it always is, after having looked for a long time before writing something to the site, just a minute after I posted here I found my solution.

像往常一样，在向网站写东西之前寻找了很长时间之后，在我在这里发布后一分钟，我找到了我的解决方案。

It thought I'd share it here so someone else can find it.

它以为我会在这里分享它以便其他人可以找到它。

//Add "parent" class to pages with subpages, change submenu class name, add depth class

    class Prio_Walker extends Walker_Nav_Menu {
    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ){
        $GLOBALS['dd_children'] = ( isset($children_elements[$element->ID]) )? 1:0;
        $GLOBALS['dd_depth'] = (int) $depth;
        parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }

     function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"children level-".$depth."\">\n";
  }
}

add_filter('nav_menu_css_class','add_parent_css',10,2);
function  add_parent_css($classes, $item){
     global  $dd_depth, $dd_children;
     $classes[] = 'depth'.$dd_depth;
     if($dd_children)
         $classes[] = 'parent';
    return $classes;
}

//Add class to parent pages to show they have subpages (only for automatic wp_nav_menu)

function add_parent_class( $css_class, $page, $depth, $args )
{
   if ( ! empty( $args['has_children'] ) )
       $css_class[] = 'parent';
   return $css_class;
}
add_filter( 'page_css_class', 'add_parent_class', 10, 4 );

This is where I found the solution: Solution in WordPress support forum

这是我找到解决方案的地方：WordPress 支持论坛中的解决 方案

回答by Vinnie James

I had to change:

我不得不改变：

function start_lvl(&$output, $depth)

function start_lvl(&$output, $depth)

to:

到：

function start_lvl( &$output, $depth = 0, $args = array() )

function start_lvl( &$output, $depth = 0, $args = array() )

Because I was getting an incompatibility error:

因为我收到了不兼容错误：

Strict Standards: Declaration of My_Walker_Nav_Menu::start_lvl() should be compatible with Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = Array)

Strict Standards: Declaration of My_Walker_Nav_Menu::start_lvl() should be compatible with Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = Array)

回答by Lucas Bustamante

You don't need to extend the Walker. This will do:

您不需要扩展 Walker。这将：

function overrideSubmenuClasses() {
    return array('myclass1', 'myclass2');
}
add_action('nav_menu_submenu_css_class', 'overrideSubmenuClasses');

回答by naveenkumar.s

This may be useful to you

这可能对你有用

How to add a parent class for menu item

如何为菜单项添加父类

function wpdocs_add_menu_parent_class( $items ) {
$parents = array();

// Collect menu items with parents.
foreach ( $items as $item ) {
    if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
        $parents[] = $item->menu_item_parent;
    }
}

// Add class.
foreach ( $items as $item ) {
    if ( in_array( $item->ID, $parents ) ) {
        $item->classes[] = 'menu-parent-item';
    }
}
return $items;
 }
add_filter( 'wp_nav_menu_objects', 'wpdocs_add_menu_parent_class' );

/**
 * Add a parent CSS class for nav menu items.
 * @param array  $items The menu items, sorted by each menu item's menu order.
 * @return array (maybe) modified parent CSS class.
*/

Adding Conditional Classes to Menu Items

向菜单项添加条件类

function wpdocs_special_nav_class( $classes, $item ) {
    if ( is_single() && 'Blog' == $item->title ) {
    // Notice you can change the conditional from is_single() and $item->title
    $classes[] = "special-class";
}
return $classes;
}
add_filter( 'nav_menu_css_class' , 'wpdocs_special_nav_class' , 10, 2 );

For reference : click me

供参考：点我

回答by Artemiy Egorov

You can just use a Hook

你可以只使用一个钩子

add_filter( 'nav_menu_submenu_css_class', 'some_function', 10, 3 );
function some_function( $classes, $args, $depth ){
    foreach ( $classes as $key => $class ) {
    if ( $class == 'sub-menu' ) {
        $classes[ $key ] = 'my-sub-menu';
    }
}

return $classes;
}

where

在哪里

$classes(array) - The CSS classes that are applied to the menu <ul> element.
$args(stdClass) - An object of wp_nav_menu() arguments.
$depth(int) - Depth of menu item. Used for padding.