如何在 WordPress 中使用 wp_get_nav_menu_items 生成自定义菜单/子菜单系统?

2024-04-16

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

这是我需要生成的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哪个谷歌忘了提及?


对于任何解决类似问题的人,这是我的解决方案:

要点快速代码示例

这是代码 https://gist.github.com/4345363在 github 要点上,适合任何想要参与复制粘贴操作的人。

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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 WordPress 中使用 wp_get_nav_menu_items 生成自定义菜单/子菜单系统? 的相关文章

随机推荐