wp_nav_menu更改子菜单类名称?


67

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

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

我找不到答案。念了'submenu_class' => 'customname'。在我看来,这是合乎逻辑的,但显然那不是正确的选择。

有任何想法吗?

Answers:


100

没有选项,但是您可以扩展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()

2
我会先检查$ depth是否正确。如果某些广告将自定义菜单的广告提升到了一个新水平,那么您就不会希望菜单变得混乱
Martin Schaer 2012年

我认为我正在成为一种工具,但似乎无法使它正常工作!我已经classfunctions.php文件中插入了代码部分,第二部分被引用为$defaults数组中的一部分wp_nav_menu()。这个对吗?
Sheixt

@Richard M您知道此调试错误是否可修复吗?我尝试使用下面的字符串,它引起了问题。我如何编辑以上答案以符合此标准?PHP严格标准:My_Walker_Nav_Menu :: start_lvl()的声明应与Walker_Nav_Menu :: start_lvl(&$ output,$ depth = 0,$ args = Array)
兼容

8
@Drai我也得到了警告,并通过此小调整解决了。class My_Walker_Nav_Menu extends Walker_Nav_Menu { function start_lvl(&$output, $depth = 0, $args = Array() ) { $indent = str_repeat("\t", $depth); $output .= "\n$indent<ul class=\"mp-level\">\n"; } }
kcssm 2014年

1
请查看我的答案:stackoverflow.com/a/44666092/1694902。也许在编写最佳答案时尚无此资源,但我认为这是实现要求的更干净的方法。
FlavioEscobar

20

替换类:

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

没用 它仍然只是“子菜单”。没变化。
简丹

'echo'=> false,这很重要!
简丹

轻松地是最优雅的解决方案。
Alex Steinberg,

14

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

谢谢!我认为这种方法要容易得多
moonvader

13

这是一个古老的问题,我不确定您要问的时候我要提到的解决方案是否可用,但我认为值得一提。您可以通过向添加过滤器来实现所需的功能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' );

11

这是Richard所做的更新,增加了“深度”指标。输出为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";
  }
}

有没有办法向此嵌套UL的子级添加类名?
桃子2014年

当然!您要添加的类名的例子是什么?
乔纳森·沃尔德2014年

除了上面显示的内容(向嵌套UL的类添加一个类)之外,我还要向嵌套LI的类添加“ nav-main-sub-item”类。我已经弄清楚了如何在主层LI和第二层UL中添加类“ nav-main-sub-item”。但是不能将它们与嵌套LI上的类联系在一起。如果你想偷看在它其实我有一个开放的问题在这里:stackoverflow.com/questions/23941129/...
桃色

这是我需要的答案。通过增加深度,可以独立设置不同级别的样式。关于助行器菜单的很多复杂代码都在其中,但这使Underscores导航样式的设计变得容易。对于像我一样感到困惑的其他人-这可能就是您所需要的。要了解更多信息,请阅读以下内容:code.tutsplus.com/tutorials/…–
OctaviaLo,

6

像往常一样,经过很长一段时间才向网站写点东西之后,我在这里发布后仅一分钟,我就找到了解决方案。

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

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

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


6

您无需扩展Walker。这样可以:

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

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

这对我来说很棒。请记住,此函数将替换所有当前类,因此,如果您已经在使用一个类,请不要忘记将其包含在数组中。
杰克

1
@Jake好点,我已经对其进行了更新,以追加新类,而不是替换现有类。
Lucas Bustamante

4

我不得不改变:

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)


2

这可能对您有用

如何为菜单项添加父类

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

供参考:点击我


1

你可以只用一个挂钩

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.

Artemiy Egorov请您在function.php内编写所有代码,谢谢!
Mary Pieroszkiewicz

1
当然。如果您只想将类添加到子菜单中,则可以使用: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; }
Artemiy Egorov

0

在上面我需要一个小的更改,我试图将其放置,但我无法做到这一点,您的输出将如下所示

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


0

我建议将您的cutomclass CSS类名称替换为子菜单。使用查找和替换:即。找到:.customclass用.sub-menu替换,对我有用。


-5

要更改默认的“子菜单”类名称,有一种简单的方法。您可以在wordpress文件中进行更改。

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

打开此文件,然后在第49行,用您的自定义类更改子菜单类的名称。

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

做完了

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


4
您的答案将一直有效,直到WordPress更新其核心文件。如果WordPress发布的更新会更改您操作的文件,则您的更改将被删除。最好按照上面的建议创建Walker Nav。最好永远不要修改核心文件,因为它们可以随核心更新而更改。
我是Mac怪胎
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.