如何为WordPress菜单小工具提供自定义类

时间:2017-05-01 作者:The WP Intermediate

我创建了一个自定义菜单小部件,它实际上是核心WordPress文件提供的默认小部件的副本。

但我面临的挑战很少,因为它无法容纳我的自定义菜单、课程。

我将页面签入浏览器,它正在呈现这种HTML→

我收到了一些即将解决我问题的答案。所以,简而言之,我现在比以前受过一些教育。问题是→如果我用这个→\'menu_class\' => \'footer-menu\' 然后在<ul></ul> 标签,但这不是我们想要的。我想把我的班级注入div 标签

目前,这种结构即将出现→<div class="menu-menu-1-container"><ul id="menu-menu-3" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4"><a href="http://codepen.trafficopedia.com/site01/">Home</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-26"><a href="http://codepen.trafficopedia.com/site01/">Menu 1</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="http://codepen.trafficopedia.com/site01/">Menu 2</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-28"><a href="http://codepen.trafficopedia.com/site01/">Menu 3</a></li> </ul></div>

但我想要这样→

<nav class="footer-menu"> <ul id="menu-menu-3" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4"> <a href="http://codepen.trafficopedia.com/site01/">Home</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-26"><a href="http://codepen.trafficopedia.com/site01/">Menu 1</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="http://codepen.trafficopedia.com/site01/">Menu 2</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-28"><a href="http://codepen.trafficopedia.com/site01/">Menu 3</a></li> </ul> </nav>

所以我想如果我能注射new class 在container参数中,将其结构从div更改为nav,那么一切似乎都是固定的。

The Live WP Link

1 个回复
最合适的回答,由SO网友:WebElaine 整理而成

(根据以下评论更新。)

<div class="menu-menu-1-container"> 来自WP的默认菜单容器。您可以自定义使用的标签(div、ul等)或告诉WP不要使用容器,还可以使用container, container_classcontainer_id 调用时的参数wp_nav_menu.

<ul id="menu-menu-4" class="menu"> - 您可以通过包括menu_classmenu_id 调用菜单时,在“前端显示”块的末尾:

$nav_menu_args = array(
    \'fallback_cb\' => \'\',
    \'container\' => \'ul\',
    \'container_class\' => \'my_custom_container_class\',
    \'container_id\' => \'my_custom_container_id\',
    \'menu\' => $nav_menu,
    \'menu_class\' => \'my_custom_css_class\',
    \'menu_id\' => \'my_custom_css_id\'
);
将类和ID更改为您喜欢的任何内容,变量或任何内容。如果要在单个URL上显示多个菜单,请确保将ID设置为动态变量,这样就不会有多个具有相同ID的菜单。

如果需要进一步定制,WP\'s code reference on wp_nav_menu 列出您可以调整的所有内容。如果这还不够的话,可以考虑找一个定制步行器。

相关推荐

My widgets do not save

每次我保存我的小部件并离开页面时,我的小部件都会消失。侧边栏已完全清空,不会保存任何更改。控制台或PHP日志中没有任何错误。如果我将小部件直接复制并保存在数据库中widgets_text, 它们将被显示,但我仍然无法在侧边栏中添加或删除任何内容。这只发生在我的右侧边栏上,左侧边栏工作正常,但它们都以相同的方式注册。这是我注册侧边栏的方式:function my_widgets_init() { register_sidebar( array ( \'name\'