如何在 WordPress 中使用 wp_get_nav_menu_items 生成自定义菜单/子菜单系统? [英] How do I generate a custom menu/sub-menu system using wp_get_nav_menu_items in WordPress?
问题描述
我有一个需要自定义 wp_nav_menu
代码的 html 结构.
I have an html structure that requires customization of the wp_nav_menu
code.
这是我需要生成的html:
This is the html I need to generate:
<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
将菜单中的所有项目作为数组获取.
I am currently using wp_get_nav_menu_items
to get all the items from my menu as an array.
现在我可以使用以下代码生成上面的 html 没有子菜单:
Right now I am able to generate the above html without the sub-menus using the following code:
<?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
显示的描述.
I would have generated the menu using the wp_nav_menu
function but I still need the description shown using $page->post_excerpt
.
我发现每个项目都有一个名为 $item->menu_item_parent
的属性,它给出了父菜单项的 ID.
I've found that there is a property for each item called $item->menu_item_parent
which gives the ID of the parent menu item.
如何在我的 foreach
循环中生成子菜单?或者是否有使用 Google 忘记提及的 wp_nav_menu
的非常简单的方法?
How would I generate the sub-menu in my foreach
loop?
Or is there a really simple way using wp_nav_menu
which Google forgot to mention?
推荐答案
对于任何解决类似问题的人,这里是我的解决方案:
For anyone who tackles something similar here's my solution:
这是 github gist 上的代码,供任何想要参与复制粘贴操作的人使用.
Here's the code on a github gist for anyone who wants to get in on the copy paste action.
TL;DR 循环遍历列表,如果有子菜单则向下钻取,如果到达子菜单和菜单的末尾则关闭.
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.
首先将菜单项作为一个平面数组:
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' ) );
?>
然后遍历菜单项数组:
<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 class="item">
<a href="<?php echo $link; ?>" class="title">
<?php echo $title; ?>
</a>
<?php endif; ?>
检查此项目的父 ID 是否与存储的父 ID 匹配:
Check that this items' parent id matches the stored parent id:
<?php if ( $parent_id == $item->menu_item_parent ): ?>
启动子菜单
并将 $submenu
标志设置为 true 以供以后参考:
Start sub-menu <ul>
and set $submenu
flag to true for later referance:
<?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 并且我们声明了一个子菜单,则关闭子菜单
If the next item does not have the same parent id and we have a sub-menu declared then close the sub-menu <ul>
<?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ): ?>
</ul>
<?php $submenu = false; endif; ?>
<?php endif; ?>
同样,如果数组中的下一项没有相同的父ID,则关闭
Again, if the next item in the array does not have the same parent id close the <li>
<?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id ): ?>
</li>
<?php $submenu = false; endif; ?>
<?php $count++; endforeach; ?>
</ul>
</nav>
这篇关于如何在 WordPress 中使用 wp_get_nav_menu_items 生成自定义菜单/子菜单系统?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!