在 wordpress 中，如何使用 wp_get_nav_menu_items 生成自定義菜單/sub-menu 系統？

問題描述

我有一個 html 結構，需要定製 wp_nav_menu 代碼。

這是我需要生成的 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 而不用 sub-menus：

<?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%20echo%20$link;%20?>" class="title">
            <?php echo $page->post_title; ?>
        </a>
        <a href="<?php%20echo%20$link;%20?>" class="desc">
            <?php echo $page->post_excerpt; ?>
        </a>
    </li>

<?php endforeach; ?>

我將使用 wp_nav_menu 功能生成菜單，但我仍然需要使用 $page->post_excerpt 顯示的説明。

我發現每個名為 $item->menu_item_parent 的項目都有一個屬性，它給出了父菜單項的 ID 。

如何在 foreach 循環中生成 sub-menu？還是有一個非常簡單的方法使用 wp_nav_menu 哪個 Google 忘記提到？

最佳解決方案

對於任何人來解決類似的事情，我的解決方案是：

要點上的快速代碼示例

Here’s the code 在任何想要進入複製粘貼操作的人的 github 要點上。

長話短説

長話短説循環列表，如果有子菜單，請向下鑽取，如果我們到達子菜單和菜單的末尾，請關閉。

完整代碼説明

首先將菜單項作為平面數組：

<?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%20echo%20$link;%20?>" class="title">
            <?php echo $title; ?>
        </a>
    <?php endif; ?>

檢查此項目的父 ID 與存儲的父 ID 是否匹配：

        <?php if ( $parent_id == $item->menu_item_parent ): ?>

啓動 sub-menu <ul> 並將 $submenu 標誌設置為 true 供以後參考：

            <?php if ( !$submenu ): $submenu = true; ?>
            <ul class="sub-menu">
            <?php endif; ?>

編寫 sub-menu 項目：

                <li class="item">
                    <a href="<?php%20echo%20$link;%20?>" class="title"><?php echo $title; ?></a>
                </li>

如果下一個項目沒有相同的父 ID，並且我們已經聲明瞭一個 sub-menu，然後關閉 sub-menu <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>

次佳解決方案

您最好的辦法是讓自己的沃克課程根據您的需求量身定製產品。這樣的事情

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="'%20%20%20.%20esc_attr(%20$item->url%20%20%20%20%20%20%20%20)%20.'"' : '';

        $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 示例之前和之後的所有內容我的示例中的 EXCERPT 標記是在 wp-includes /nav-menu-template.php 中的 start_el 函數的直接副本。我的示例使用 WP_Query 來確定帖子/頁面是否有摘錄，並且在鏈接標題之後將摘錄放在跨標籤之間。

一個想法是使 span 標籤僅在懸停時顯示，這可以使用 CSS 完成。

有關 Walkers 的更多信息，請訪問：

WP Nav Menu Codex

Using The Walker Class

Another Decent Example Using the Walker Class

參考文獻

How do I generate a custom menu/sub-menu system using wp_get_nav_menu_items in wordpress?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

在 wordpress 中，如何使用 wp_get_nav_menu_items 生成自定義菜單/sub-menu 系統？