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

问题描述 投票:40回答:3

我有一个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:

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

如何在qazxsw poi循环中生成子菜单?或者是否有一种非常简单的方法使用谷歌忘记提及的qazxsw poi?

php wordpress menu wordpress-theming submenu
3个回答
65
投票

对于那些解决类似问题的人来说,这是我的解决方案:

关于要点的快速代码示例

wp_nav_menu在github gist上为所有想要参与复制粘贴动作的人提供帮助。

TL; DR

TL; DR循环列表,如果有子菜单则向下钻取,如果到达子菜单和菜单的末尾则关闭。

完整的代码说明

首先将菜单项作为平面数组:

然后迭代菜单项的数组:

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

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

检查此项的父ID是否与存储的父ID匹配:

<li>

启动子菜单 <li class="item"> <a href="<?php echo $link; ?>" class="title"> <?php echo $title; ?> </a> <?php endif; ?> 并将 <?php if ( $parent_id == $item->menu_item_parent ): ?> 标志设置为true以供以后使用:

<ul>

写下子菜单项:

$submenu

如果下一个项目没有相同的父ID并且我们有一个子菜单声明,那么关闭子菜单 <?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; ?>

9
投票

您最好的选择是制作自己的Walker课程,以根据您的需求定制输出。像这样的东西:

<li>

然后像这样调用它:

    <?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id ): ?>
    </li>                           
    <?php $submenu = false; endif; ?>

<?php $count++; endforeach; ?>

  </ul>
</nav>

在我的示例中获取EXCERPT标记之前和之后的所有内容都是wp-includes / nav-menu-template.php中start_el函数的直接副本。我的示例使用WP_Query来确定帖子/页面是否有摘录,并将摘录放在链接标题之后的span标记之间。

一个想法是使span标签仅在悬停时出现,这可以使用CSS完成。

有关Walkers的更多信息:

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 ); } }

<?php wp_nav_menu(array('walker' => new Excerpt_Walker())); ?>

WP Nav Menu Codex


© www.soinside.com 2019 - 2024. All rights reserved.