php 如何在 WordPress 中使用 wp_get_nav_menu_items 生成自定义菜单/子菜单系统?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11935423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I generate a custom menu/sub-menu system using wp_get_nav_menu_items in WordPress?
提问by hitautodestruct
I have an html structure that requires customization of the wp_nav_menucode.
我有一个需要自定义wp_nav_menu代码的 html 结构。
This is the html I need to generate:
这是我需要生成的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>
I am currently using wp_get_nav_menu_itemsto get all the items from my menu as an array.
我目前正在使用wp_get_nav_menu_items从我的菜单中获取所有项目作为一个数组。
Right now I am able to generate the above html without the sub-menususing the following code:
现在我可以使用以下代码在没有子菜单的情况下生成上述 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; ?>
I would have generated the menu using the wp_nav_menufunction but I still need the description shown using $page->post_excerpt.
我会使用该wp_nav_menu函数生成菜单,但我仍然需要使用$page->post_excerpt.
I've found that there is a property for each item called $item->menu_item_parentwhich gives the ID of the parent menu item.
我发现每个被调用的项目都有一个属性,$item->menu_item_parent它给出了父菜单项的 ID。
How would I generate the sub-menu in my foreachloop?
Or is there a really simple way using wp_nav_menuwhich Google forgot to mention?
我将如何在foreach循环中生成子菜单?或者有没有一种非常简单的方法使用wp_nav_menu谷歌忘记提到的?
回答by hitautodestruct
For anyone who tackles something similar here's my solution:
对于任何解决类似问题的人,这是我的解决方案:
Quick code example on a gist
要点上的快速代码示例
Here's the codeon a github gist for anyone who wants to get in on the copy paste action.
这是 github gist上的代码,供想要参与复制粘贴操作的任何人使用。
TL;DR
TL; 博士
TL;DR Loop over list, drill down if there's a sub menu, close if we reach the end of the sub menu and menu.
TL;DR 循环遍历列表,如果有子菜单则向下钻取,如果到达子菜单和菜单的末尾则关闭。
Complete Code explanation
完整的代码解释
Firstly get the menu items as a flat array:
首先将菜单项作为一个平面数组:
<?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' ) );
?>
Then iterate over the array of the menu items:
然后迭代菜单项的数组:
<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;
?>
Write the first parent item <li>:
编写第一个父项<li>:
<li class="item">
<a href="<?php echo $link; ?>" class="title">
<?php echo $title; ?>
</a>
<?php endif; ?>
Check that this items' parent id matches the stored parent id:
检查此项目的父 ID 是否与存储的父 ID 匹配:
<?php if ( $parent_id == $item->menu_item_parent ): ?>
Start sub-menu <ul>and set $submenuflag to true for later referance:
启动子菜单<ul>并将$submenu标志设置为 true 以供以后参考:
<?php if ( !$submenu ): $submenu = true; ?>
<ul class="sub-menu">
<?php endif; ?>
Write the sub-menu item:
编写子菜单项:
<li class="item">
<a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a>
</li>
If the next item does not have the same parent id and we have a sub-menu declared then close the sub-menu <ul>
如果下一项没有相同的父 id 并且我们声明了一个子菜单,则关闭子菜单 <ul>
<?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ): ?>
</ul>
<?php $submenu = false; endif; ?>
<?php endif; ?>
Again, if the next item in the array does not have the same parent id close the <li>
同样,如果数组中的下一项没有相同的父 ID,则关闭 <li>
<?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id ): ?>
</li>
<?php $submenu = false; endif; ?>
<?php $count++; endforeach; ?>
</ul>
</nav>
回答by maiorano84
Your best bet is to make your own Walker class to tailor the output to your needs. Something like this:
您最好的办法是制作您自己的 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 );
}
}
And then call it like so:
然后像这样调用它:
<?php
wp_nav_menu(array('walker' => new Excerpt_Walker()));
?>
Everything before and after the GET THE EXCERPT marker in my example was a direct copy of the start_el function in wp-includes/nav-menu-template.php. My example uses WP_Query to determine if the post/page has an excerpt, and places the excerpt in between span tags after the link title.
在我的示例中,GET THE EXCEPT 标记之前和之后的所有内容都是 wp-includes/nav-menu-template.php 中 start_el 函数的直接副本。我的示例使用 WP_Query 来确定帖子/页面是否有摘录,并将摘录放在链接标题之后的跨度标签之间。
An idea would be to make the span tags appear only upon hover, which can be done using CSS.
一个想法是让 span 标签仅在悬停时出现,这可以使用 CSS 来完成。
More information on Walkers here:
关于步行者的更多信息在这里:
回答by GAJENDRA patel
//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>

