如何在 WordPress 中使用 wp_get_nav_menu_items 生成自定义菜单/子菜单系统？
Posted
技术标签:
【中文标题】如何在 WordPress 中使用 wp_get_nav_menu_items 生成自定义菜单/子菜单系统？【英文标题】：How do I generate a custom menu/sub-menu system using wp_get_nav_menu_items in WordPress? 【发布时间】：2012-08-09 17:57:45 【问题描述】：我有一个需要自定义 wp_nav_menu 代码的 html 结构。
这是我需要生成的html：
<ul class="main-nav">
<li class="item">
<a href="http://example.com/?p=123" class="title">Title</a>
<a href="http://example.com/?p=123" class="desc">Description</a>
<ul class="sub-menu">
<li class="item">
<a href="http://example.com/?p=123" class="title">Title</a>
<a href="http://example.com/?p=123" class="desc">Description</a>
</li>
</ul>
</li>
<li class="item">
<a href="http://example.com/?p=123" class="title">Title</a>
<a href="http://example.com/?p=123" class="desc">Description</a>
</li>
</ul>
我目前正在使用wp_get_nav_menu_items 以数组形式从我的菜单中获取所有项目。
现在我可以使用以下代码生成上述 html没有子菜单：
<?php
$menu_name = 'main-nav';
$locations = get_nav_menu_locations()
$menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
$menuitems = wp_get_nav_menu_items( $menu->term_id, array( 'order' => 'DESC' ) );
foreach ( $menuitems as $item ):
$id = get_post_meta( $item->ID, '_menu_item_object_id', true );
$page = get_page( $id );
$link = get_page_link( $id ); ?>
<li class="item">
<a href="<?php echo $link; ?>" class="title">
<?php echo $page->post_title; ?>
</a>
<a href="<?php echo $link; ?>" class="desc">
<?php echo $page->post_excerpt; ?>
</a>
</li>
<?php endforeach; ?>
我会使用wp_nav_menu 函数生成菜单，但我仍然需要使用$page->post_excerpt 显示的描述。
我发现每个项目都有一个名为 $item->menu_item_parent 的属性，它给出了父菜单项的 ID。
如何在foreach 循环中生成子菜单？
或者有没有一种非常简单的使用wp_nav_menu 的方法，Google 忘了提到？
【问题讨论】：
您可能希望在 WordPress Stack Exchange 上发布此内容：wordpress.stackexchange.com @dnagirl 我认为这更像是一个编程问题。我不确定有多少人能够在 wp stackexchange 上回答这个问题。 【参考方案1】：如果您的主题在header 或footer.php（例如）中使用has_nav_menu('<menu-name>')，您可以转到 Appearance > Menus 并选择menu 或sub-menu 进行配置。
【讨论】：
【参考方案2】：请试试这个。它对我有用。
<?php
$menuLocations = get_nav_menu_locations();
$menuID = $menuLocations['primary'];
$menu = wp_get_nav_menu_object($menuLocations['primary']);
$menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
$ParentArray = array();
$count = 0;
$submenu = false;
foreach ($menuitems as $menu_item)
$link = $menu_item->url;
$title = $menu_item->title;
if ($menu_item->menu_item_parent == 0 )
$parent_id = $menu_item->ID;
echo '<li class="main-li dropmenu"><a href="' .$menu_item->url . '">'.$menu_item->title .'</a>';
if ($parent_id == $menu_item->menu_item_parent )
if (!$submenu )
$submenu = true;
echo '<ul class="level1">';
echo '<li><a href="'.$link.'">'.$title.'</a></li>';
if ($menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu )
echo '</ul>';
$submenu = false;
if ($menuitems[ $count + 1 ]->menu_item_parent != $parent_id )
echo '</li>';
$submenu = false;
$count++;
?>
【讨论】：
【参考方案3】：完整的代码说明.....
首先在functions.php文件中创建两个下面两个函数
function get_menu_id( $location )
//get all the location....
$locations =get_nav_menu_locations();
//get object id by location.....
$menu_id = $locations[$location];
return !empty($menu_id) ? $menu_id : '';
function get_child_menu_items($menu_array , $parent_id)
$child_menu = [];
if(!empty($menu_array) && is_array($menu_array))
foreach($menu_array as $menu)
if( intval($menu->menu_item_parent) === $parent_id)
array_push($child_menu , $menu);
return $child_menu;
然后
$menu_name = 'menu_name';
$location = get_nav_menu_locations();
$menu = wp_get_nav_menu_object($location[$menu_name]);
$menuitems = wp_get_nav_menu_items( $menu->term_id);
$header_menu_id = get_menu_id('primary-menu');
$header_menus = wp_get_nav_menu_items($header_menu_id);
现在这是我的 html 和 php 代码....
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<?php
if(!empty($header_menus) && is_array($header_menus))
?>
<ul class="navbar-nav ml-auto">
<?php
foreach($header_menus as $menu_item)
if(!$menu_item->menu_item_parent) //checking the item are parent?
$child_menu_items = get_child_menu_items($header_menus, $menu_item->ID);
$has_children = !empty($child_menu_items) && is_array($child_menu_items);
if(! $has_children)
?>
<li class="nav-item">
<a class="nav-link" href="<?php echo esc_url($menu_item -> url); ?>"> <?php echo esc_html($menu_item->title); ?></a>
</li>
<?php
else
?>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="<?php echo esc_url($menu_item -> url); ?>" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<?php echo esc_html($menu_item->title); ?>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<?php
foreach($child_menu_items as $child)
?>
<a class="dropdown-item" href="<?php echo esc_url($child->url); ?>" > <?php echo esc_html($child->title); ?></a>
<?php
?>
</div>
</li>
<?php
?>
</ul>
<?php
?>
【讨论】：
【参考方案4】： //Just set your variable and apply.. for sub menu
<ul>
<?php
$activeclass = '';
$activeclass1='';
$count=0;
$submenu = FALSE;
foreach ( $primaryNav as $navItem )
$activeclass = '';
if($navItem->object_id == $getid)
$activeclass = 'class="live-act"';
if (!$navItem->menu_item_parent )
$parent_id = $navItem->ID;
echo '<li><a href="'.$navItem->url.'" '.$activeclass.' title="'.$navItem->title.'">'.$navItem->title.'</a>';
?>
<?php if ( $parent_id == $navItem->menu_item_parent ) ?>
<?php if ( !$submenu ): $submenu = true; ?>
<ul>
<?php endif; ?>
<li>
<a href="<?php echo $navItem->url; ?>" class="title"><?php echo $navItem->title; ?></a>
</li>
<?php if ( $primaryNav[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ) ?>
</ul>
<?php $submenu = false;
?>
<?php
if ( $primaryNav[ $count + 1 ]->menu_item_parent != $parent_id ) ?>
</li>
<?php $submenu = false; ?>
<?php $count++; ?>
<?php ?>
</ul>
【讨论】：
【参考方案5】：对于任何处理类似问题的人，这是我的解决方案：
关于要点的快速代码示例
Here's the code github gist 上的任何想要参与复制粘贴操作的人。
TL;DR
TL;DR 循环遍历列表，如果有子菜单则向下钻取，如果到达子菜单和菜单的末尾则关闭。
完整的代码说明
首先将菜单项作为平面数组获取：
<?php
$menu_name = 'main_nav';
$locations = get_nav_menu_locations();
$menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
$menuitems = wp_get_nav_menu_items( $menu->term_id, array( 'order' => 'DESC' ) );
?>
然后遍历菜单项数组：
<nav>
<ul class="main-nav">
<?php
$count = 0;
$submenu = false;
foreach( $menuitems as $item ):
// set up title and url
$title = $item->title;
$link = $item->url;
// item does not have a parent so menu_item_parent equals 0 (false)
if ( !$item->menu_item_parent ):
// save this id for later comparison with sub-menu items
$parent_id = $item->ID;
?>
写第一个父项<li>：
<li class="item">
<a href="<?php echo $link; ?>" class="title">
<?php echo $title; ?>
</a>
<?php endif; ?>
检查此项目的父 ID 是否与存储的父 ID 匹配：
<?php if ( $parent_id == $item->menu_item_parent ): ?>
启动子菜单 <ul> 并将 $submenu 标志设置为 true 以供以后参考：
<?php if ( !$submenu ): $submenu = true; ?>
<ul class="sub-menu">
<?php endif; ?>
编写子菜单项：
<li class="item">
<a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a>
</li>
如果下一项没有相同的父 id 并且我们声明了子菜单，则关闭子菜单<ul>
<?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ): ?>
</ul>
<?php $submenu = false; endif; ?>
<?php endif; ?>
同样，如果数组中的下一项没有相同的父 ID，则关闭 <li>
<?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id ): ?>
</li>
<?php $submenu = false; endif; ?>
<?php $count++; endforeach; ?>
</ul>
</nav>
【讨论】：
第一部分代码缺少分号。此外，复制和粘贴您的解决方案真的很困难。我更喜欢带有代码内 cmets 的单个代码块。不过，谢谢你的回答。来自我的 +1 @matt 感谢您的评论，我添加了一个要点并添加了缺少的分号。 我认为前两行的结束标签 @matt 它们在标记中但被隐藏了。我也更新了要点。干杯！ 在foreach( (array) $menuitems as $item ) 中添加(array)。【参考方案6】：
最好的办法是制作自己的 Walker 类，以根据您的需要定制输出。像这样的：
class Excerpt_Walker extends Walker_Nav_Menu
function start_el(&$output, $item, $depth, $args)
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = ' class="' . esc_attr( $class_names ) . '"';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $value . $class_names .'>';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
/*GET THE EXCERPT*/
$q = new WP_Query(array('post__in'=>$item->object_id));
if($q->have_posts()) : while($q->have_posts()) : $q->the_post();
$item_output .= '<span class="menu-excerpt">'.get_the_excerpt().'</span>';
endwhile;endif;
/*****************/
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
然后这样称呼它：
<?php
wp_nav_menu(array('walker' => new Excerpt_Walker()));
?>
在我的示例中，GET THE EXCEPT 标记之前和之后的所有内容都是 wp-includes/nav-menu-template.php 中 start_el 函数的直接副本。我的示例使用 WP_Query 来确定帖子/页面是否有摘录，并将摘录放在链接标题之后的 span 标签之间。
一个想法是让 span 标签仅在悬停时出现，这可以使用 CSS 来完成。
更多关于步行者的信息在这里：
WP Nav Menu Codex
Using The Walker Class
Another Decent Example Using the Walker Class
【讨论】：
我查看了步行者，它们对于我微薄的需求来说太复杂了。我最终得到了一个更简单的解决方案。 很高兴这一切都为你解决了。尽管如此，请不要忘记 Walkers，因为他们帮助我解决了一些非常......有趣的客户请求。 不尊重父结构，可以看这里：i.imgur.com/jIOXu4e.png @FranciscoCorralesMorales 这并没有告诉我任何东西。你在使用菜单吗？您是否在仪表板中定义了菜单？您是否在模板中调用了相应的菜单？你确定你的菜单没有退回到wp_page_menu吗？如果你做的一切都正确，那么这个将尊重父结构，因为这几乎是 Wordpress 内部使用的原始 Walker 类的精确复制品。以上是关于如何在 WordPress 中使用 wp_get_nav_menu_items 生成自定义菜单/子菜单系统？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 javascript 在 wordpress 中自动选择一个类别？