wp_nav_menu 更改子菜单类名？

Question

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

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

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

有什么想法吗？

Answer 1

对此没有选项，但您可以扩展 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";
  }
}

然后，您只需将 walker 的实例作为参数传递给 wp_nav_menu，如下所示：

'walker' => new My_Walker_Nav_Menu()

Answer 2

这是 Richard 所做的更新，它添加了“深度”指示器。输出为level-0、level-1、level-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";
  }
}

Answer 3

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

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

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

这是我找到解决方案的地方： Solution in WordPress support forum

Answer 4

在上面我需要一个小改动，但我无法做到这一点， 您的输出将如下所示

<ul>
<li id="menu-item-13" class="depth0 parent"><a href="#">About Us</a>
<ul class="children level-0">
    <li id="menu-item-17" class="depth1"><a href="#">Sample Page</a></li>
    <li id="menu-item-16" class="depth1"><a href="#">About Us</a></li>
</ul>
</li>
</ul> 

我在找什么

<ul>
<li id="menu-item-13" class="depth0"><a class="parent" href="#">About Us</a>
<ul class="children level-0">
    <li id="menu-item-17" class="depth1"><a href="#">Sample Page</a></li>
    <li id="menu-item-16" class="depth1"><a href="#">About Us</a></li>
</ul>
</li>
</ul> 

在上面我已经将父类放在<li id="menu-item-13" class="depth0"><a class="parent" href="#">About Us</a>的父锚链接中

Answer 5

选项的选择。

1. 将“echo”参数切换为 false，您可以替换类名。

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

1. 从 WP 4.8 开始，我们可以使用 nav_menu_submenu_css_class 过滤器。

add_filter( 'nav_menu_submenu_css_class', 'my_custom_submenu_classnames', 10, 3 );
/**
 * Filters the CSS class(es) applied to a menu list element.
 *
 * @param string[] $classes Array of the CSS classes that are applied to the menu `<ul>` element.
 * @param stdClass $args    An object of `wp_nav_menu()` arguments.
 * @param int      $depth   Depth of menu item. Used for padding.
 * @return string[]
 */
function my_custom_submenu_classnames( $classes, $args, $depth ) {
    // Here we can additionally use menu arguments.
    if ( 'header-menu' === $args->theme_location ) {
        $default_class_name_key = array_search( 'sub-menu', $classes );
        if ( false !== $default_class_name_key ) {
            unset( $classes[ $default_class_name_key ] );
        }
        $classes[] = 'header-submenu';
        $classes[] = "depth-{$depth}";
    }

    return $classes;
}

1. 自定义菜单漫游器：

class My_Nav_Menu_Walker extends Walker_Nav_Menu {
    /**
     * Starts the list before the elements are added.
     *
     * @see Walker::start_lvl()
     *
     * @param string   $output Used to append additional content (passed by reference).
     * @param int      $depth  Depth of menu item. Used for padding.
     * @param stdClass $args   An object of wp_nav_menu() arguments.
     */
    public function start_lvl( &$output, $depth = 0, $args = null ) {
        if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
            $t = '';
            $n = '';
        } else {
            $t = "\t";
            $n = "\n";
        }
        $indent = str_repeat( $t, $depth );

        // ! You default class names.
        $classes = array( 'sub-menu', 'my-class' );
        // ! Example of using arguments.
        if ( 'header-menu' === $args->theme_location ) {
            $default_class_name_key = array_search( 'sub-menu', $classes );
            if ( false !== $default_class_name_key ) {
                unset( $classes[ $default_class_name_key ] );
            }
            $classes[] = 'header-submenu';
            $classes[] = "depth-{$depth}";
        }

        /**
         * Filters the CSS class(es) applied to a menu list element.
         *
         * @since 4.8.0
         *
         * @param string[] $classes Array of the CSS classes that are applied to the menu `<ul>` element.
         * @param stdClass $args    An object of `wp_nav_menu()` arguments.
         * @param int      $depth   Depth of menu item. Used for padding.
         */
        $class_names = implode( ' ', apply_filters( 'nav_menu_submenu_css_class', $classes, $args, $depth ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        $output .= "{$n}{$indent}<ul{$class_names}>{$n}";
    }
}

仍然需要使用自定义 walker 包含文件并将其指向菜单：

wp_nav_menu(
    array(
        'theme_location' => 'header-menu',
        'walker'         => new My_Nav_Menu_Walker()
    )
);

Answer 6

我建议将您的 cutomclass css 类名替换为子菜单。 使用查找和替换：即。查找：.customclass 替换为 .sub-menu， 对我有用。

Answer 7

我不得不改变：

function start_lvl(&$output, $depth)

到：

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

Answer 8

要更改默认的“子菜单”类名，有一个简单的方法。 您可以在 wordpress 文件中更改它。

位置：www/project_name/wp-includes/nav-menu-template.php。

打开这个文件，在第 49 行，用您的自定义类更改子菜单类的名称。

或者您也可以在子菜单旁边添加自定义类。

完成。

它对我有用。我使用了 wordpress-4.4.1。

Answer 9

这可能对你有用

如何为菜单项添加父类

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.
*/

向菜单项添加条件类

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

供参考：click me

Answer 10

您可以使用 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'); 

Answer 11

这是一个老问题，我不确定我要提到的解决方案在你问的时候是否可用，但我认为值得一提。您可以通过向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' );

Answer 12

你可以只用一个钩子

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

在哪里

$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.

Answer 13

您不需要扩展 Walker。这样就可以了：

function overrideSubmenuClasses( $classes ) {
    $classes[] = 'myclass1';
    $classes[] = 'myclass2';

    return $classes;
}
add_action('nav_menu_submenu_css_class', 'overrideSubmenuClasses');