wp_nav_menu更改子菜单类名?

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

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

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

任何想法?

13 个答案:

答案 0 :(得分:90)

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

然后你只需将你的助行器实例作为参数传递给wp_nav_menu,如下所示:

'walker' => new My_Walker_Nav_Menu()

答案 1 :(得分:17)

替换课程:

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

答案 2 :(得分: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'); 

答案 3 :(得分:10)

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

答案 4 :(得分:8)

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

答案 5 :(得分:5)

就像它一直是这样,在我向网站写了一些东西之前已经找了很长时间,就在我发布这里一分钟之后,我找到了我的解决方案。

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

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

答案 6 :(得分:3)

我不得不改变:

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)

答案 7 :(得分: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 );

供参考:click me

答案 8 :(得分: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.

答案 9 :(得分:1)

您不需要扩展Walker。可以做到:

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

答案 10 :(得分:0)

在上面我需要一个小小的改变,我试图放置,但我无法做到这一点, 你的输出看起来像这样

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

我在寻找什么

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

在上面的一个中,我将父类放在<li id="menu-item-13" class="depth0"><a class="parent" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >About Us</a>

的父锚链接中

答案 11 :(得分:0)

我建议将cutomclass css类名替换为子菜单。 使用查找和替换:即。 find:.customclass替换为.sub-menu, 适合我。

答案 12 :(得分:-5)

更改默认&#34;子菜单&#34;班级名称,有简单的方法。 你可以在wordpress文件中更改它。

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

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

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

完成。

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

原文:https://www.thinbug.com/q/5034826

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有M币奖励和额外收入!

模板下载吧 WP技术 wp_nav_menu更改子菜单类名? https://www.mbxzb.com/blog/file/wordpress/24390.html

从明天起,做一个幸福的人,喂马、劈柴、周游世界…

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用
查看详情

相关文章

评论
暂无评论
点击按钮快速添加回复内容: 支持 高兴 激动 给力 加油 苦寻 生气 回帖 路过 威武 友军 顶贴
官方客服团队

为您解决烦忧 - 24小时在线 专业服务