WordPress菜单如何只给父元素添加一个class?
WordPress menu how to add a class to only the parent a element?
我只想将 class 下拉列表添加到父元素。我尝试向 functions.php 添加一些代码,但这并没有解决我的问题。 jquery/js 可以做到这一点吗?
<nav class="container_menu">
<ul class="reset">
<li class="active "><a title="Home" href="/" class="class here">Home</a></li>
<li class="menu "><a title="parent" href="/parent" class="class here">parent</a>
<ul class="reset">
<li class=""><a title="child1" href="/child/child1">child 1</a></li>
<li class=""><a title=child2" href="/child/child2">Child 2</a></li>
</ul>
</li>
</ul>
</nav>
不使用 jquery 或 javascript 或其他框架客户端。
您可以创建一个函数并向 wp_nav_menu_objects 添加过滤器,如下所示:
/**
* 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_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[] = 'dropdown'; //here attach the class
}
}
return $items;
}
add_filter( 'wp_nav_menu_objects', 'wpdocs_add_menu_parent_class' );
你可以做这样的事情来实现你想要的。这会将 class "someclass" 添加到给定结构中包含 "ul"-元素的任何 "li"-元素。
var menu = document.querySelector('nav.container_menu > ul');
menu.childNodes.forEach((node,idx)=>{
// find child-nodes of the ul
if(node.tagName == 'LI'){
var hasSubMenu = false;
node.childNodes.forEach( (subnode,idx)=>{
if(subnode.tagName == 'UL'){
hasSubMenu = true;
}
});
if(hasSubMenu){
node.classList+=" someclass";
}
}
});
但是,当您使用 wordpress 时,我建议您按照应该创建菜单的方式进行操作,即使用 Walker_Nav_Menu / Walker_Page(参见 https://codex.wordpress.org/Class_Reference/Walker_Page ) and wp_nav_menu() (see https://developer.wordpress.org/reference/functions/wp_nav_menu/)。
经过快速搜索,我认为这解释得足够详细了:
https://www.ibenic.com/how-to-create-wordpress-custom-menu-walker-nav-menu-class/
您可以使用 nav_menu_link_attributes
过滤器修改 <a>
属性。
对于您的情况,您可以使用以下代码:
function add_classname_to_parent_nav_link($atts, $item) {
// add class only on parent
if($item->menu_item_parent == 0) {
$atts['class'] = 'your-class-name';
}
return $atts;
}
add_filter('nav_menu_link_attributes', 'add_classname_to_parent_nav_link', 10, 2);
我只想将 class 下拉列表添加到父元素。我尝试向 functions.php 添加一些代码,但这并没有解决我的问题。 jquery/js 可以做到这一点吗?
<nav class="container_menu">
<ul class="reset">
<li class="active "><a title="Home" href="/" class="class here">Home</a></li>
<li class="menu "><a title="parent" href="/parent" class="class here">parent</a>
<ul class="reset">
<li class=""><a title="child1" href="/child/child1">child 1</a></li>
<li class=""><a title=child2" href="/child/child2">Child 2</a></li>
</ul>
</li>
</ul>
</nav>
不使用 jquery 或 javascript 或其他框架客户端。
您可以创建一个函数并向 wp_nav_menu_objects 添加过滤器,如下所示:
/**
* 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_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[] = 'dropdown'; //here attach the class
}
}
return $items;
}
add_filter( 'wp_nav_menu_objects', 'wpdocs_add_menu_parent_class' );
你可以做这样的事情来实现你想要的。这会将 class "someclass" 添加到给定结构中包含 "ul"-元素的任何 "li"-元素。
var menu = document.querySelector('nav.container_menu > ul');
menu.childNodes.forEach((node,idx)=>{
// find child-nodes of the ul
if(node.tagName == 'LI'){
var hasSubMenu = false;
node.childNodes.forEach( (subnode,idx)=>{
if(subnode.tagName == 'UL'){
hasSubMenu = true;
}
});
if(hasSubMenu){
node.classList+=" someclass";
}
}
});
但是,当您使用 wordpress 时,我建议您按照应该创建菜单的方式进行操作,即使用 Walker_Nav_Menu / Walker_Page(参见 https://codex.wordpress.org/Class_Reference/Walker_Page ) and wp_nav_menu() (see https://developer.wordpress.org/reference/functions/wp_nav_menu/)。
经过快速搜索,我认为这解释得足够详细了:
https://www.ibenic.com/how-to-create-wordpress-custom-menu-walker-nav-menu-class/
您可以使用 nav_menu_link_attributes
过滤器修改 <a>
属性。
对于您的情况,您可以使用以下代码:
function add_classname_to_parent_nav_link($atts, $item) {
// add class only on parent
if($item->menu_item_parent == 0) {
$atts['class'] = 'your-class-name';
}
return $atts;
}
add_filter('nav_menu_link_attributes', 'add_classname_to_parent_nav_link', 10, 2);