如何在WordPress中使用wp_get_nav_menu_items生成自定义菜单/子菜单系统? [英] How do I generate a custom menu/sub-menu system using wp_get_nav_menu_items in WordPress?

查看:101
本文介绍了如何在WordPress中使用wp_get_nav_menu_items生成自定义菜单/子菜单系统?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个html结构,需要自定义wp_nav_menu代码.

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' ) );
?>

然后遍历菜单项的数组:

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;
    ?>

写第一个父项<li>:

    <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 ): ?>

启动子菜单<ul>并将$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,并且声明了子菜单,请关闭子菜单<ul>

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,请关闭<li>

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆