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

Question

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

phpwordpressmenuwordpress-themingsubmenu

45

我有一个需要定制wp_nav_menu代码的HTML结构。

这是我需要生成的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完成，只是谷歌忘了提到它？

- hitautodestruct

1

你可以考虑在WordPress Stack Exchange上发布这篇文章：http://wordpress.stackexchange.com/ - dnagirl

1

@dnagirl 我认为这更像是一个编程问题。我不确定有多少人能够在wp stackexchange上回答这个问题。 - hitautodestruct

6个回答

12

您最好自己创建一个Walker类以根据您的需求定制输出。可以像这样编写代码：

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

在我的例子中，GET THE EXCERPT标记之前和之后的所有内容都是wp-includes/nav-menu-template.php中start_el函数的直接副本。我的例子使用WP_Query来确定文章/页面是否有摘要，并将摘要放置在链接标题后的span标签之间。

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

关于Walkers的更多信息：

WP Nav Menu Codex

Using The Walker Class

Another Decent Example Using the Walker Class

- maiorano84

6

我看了一下步行器，它们对我的需求来说过于复杂。最终我采用了一种更简单的解决方案。 - hitautodestruct

2

很高兴你的事情都解决了。不过，记得把Walkers放在脑后，因为他们曾经帮助我处理一些相当有趣的客户请求。 - maiorano84

它不尊重父结构，您可以在此处查看：http://i.imgur.com/jIOXu4e.png - Francisco Corrales Morales

@FranciscoCorralesMorales 这并没有给我展示任何东西。你是否使用了菜单？你是否在仪表板中定义了你的菜单？你是否在你的模板中调用了适当的菜单？你确定你的菜单没有回退到 wp_page_menu 吗？如果你做了一切正确的事情，那么这个程序将会尊重父级结构，因为这几乎是 Wordpress 内部使用的原始 Walker 类的精确副本。 - maiorano84

0

完整的代码解释.....

首先在functions.php文件中创建以下两个函数：

 function get_menu_id( $location ){
                //get all the location....
                $locations =get_nav_menu_locations();
    
                //get object id by location.....
                $menu_id = $locations[$location];
                
                return !empty($menu_id) ? $menu_id : '';
            }


            function get_child_menu_items($menu_array , $parent_id){
                $child_menu = [];
                if(!empty($menu_array) && is_array($menu_array)){
                    foreach($menu_array as $menu){
                        if( intval($menu->menu_item_parent) === $parent_id){
                            array_push($child_menu , $menu);
                        }
                    }
                }
                return $child_menu;
            }

那么

$menu_name = 'menu_name';
                $location = get_nav_menu_locations();
                $menu = wp_get_nav_menu_object($location[$menu_name]);
                $menuitems = wp_get_nav_menu_items( $menu->term_id);
                $header_menu_id = get_menu_id('primary-menu');
                
                $header_menus = wp_get_nav_menu_items($header_menu_id);

现在这是我的HTML和PHP代码...

<div class="collapse navbar-collapse" id="navbarSupportedContent">


                    <?php
                        if(!empty($header_menus)  && is_array($header_menus)){
                            ?>
                            <ul class="navbar-nav ml-auto">
                                <?php
                                    foreach($header_menus as $menu_item){
                                        if(!$menu_item->menu_item_parent){ //checking the item are parent?
                                            $child_menu_items = get_child_menu_items($header_menus, $menu_item->ID);
                                            $has_children = !empty($child_menu_items) && is_array($child_menu_items);

                                            if(! $has_children){
                                                ?>
                                                <li class="nav-item">
                                                    <a class="nav-link" href="<?php echo esc_url($menu_item -> url); ?>"> <?php echo esc_html($menu_item->title); ?></a> 
                                                </li>
                                                <?php
                                            }else{
                                                ?>
                                            <li class="nav-item dropdown">
                                                <a class="nav-link dropdown-toggle" href="<?php echo esc_url($menu_item -> url); ?>" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <?php echo esc_html($menu_item->title); ?>
                                                </a>
                                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                                    <?php
                                                        foreach($child_menu_items as $child){
                                                            ?>
                                                            <a class="dropdown-item" href="<?php echo esc_url($child->url); ?>" > <?php echo esc_html($child->title); ?></a> 
                                                            <?php
                                                        }
                                                    ?>        
                                                </div>
                                            </li>
                                                <?php
                                            }
                                        }
                                    }
                                ?>
                            </ul>
                            <?php
                        }
                    ?>

- Haroon Hayat

0

请尝试这个。对我有效。

<?php
        $menuLocations = get_nav_menu_locations();
        $menuID = $menuLocations['primary'];
        $menu = wp_get_nav_menu_object($menuLocations['primary']);
        $menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
        $ParentArray = array();
        $count = 0;
        $submenu = false;

    foreach ($menuitems as $menu_item) {
        $link = $menu_item->url;
        $title = $menu_item->title;
        if ($menu_item->menu_item_parent == 0   ) {
            $parent_id = $menu_item->ID;
            echo  '<li class="main-li dropmenu"><a href="' .$menu_item->url . '">'.$menu_item->title .'</a>';
        }
        if ($parent_id == $menu_item->menu_item_parent ) {
            if (!$submenu ) {
                $submenu = true;
                echo '<ul class="level1">';
            }
             echo '<li><a href="'.$link.'">'.$title.'</a></li>';
            if ($menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ) {
                echo '</ul>';
                $submenu = false;
            }
        }
        if ($menuitems[ $count + 1 ]->menu_item_parent != $parent_id ) {
            echo '</li>';
            $submenu = false;
        }
        $count++;
    }
    ?>

- Anish Rai

0

      //Just set your variable and apply.. for sub menu
     <ul>
     <?php

     $activeclass = '';
    $activeclass1='';
     $count=0;
    $submenu = FALSE;
    foreach ( $primaryNav as $navItem ) {
            $activeclass = '';  
         if($navItem->object_id == $getid){
            $activeclass = 'class="live-act"';
         }
         if (!$navItem->menu_item_parent ){
            $parent_id = $navItem->ID;
        echo '<li><a href="'.$navItem->url.'" '.$activeclass.'   title="'.$navItem->title.'">'.$navItem->title.'</a>';
         }
         ?>
        <?php if ( $parent_id == $navItem->menu_item_parent ) { ?>
      <?php if ( !$submenu ): $submenu = true; ?>
        <ul>
        <?php endif; ?>
             <li>
                <a href="<?php echo $navItem->url; ?>" class="title"><?php echo $navItem->title; ?></a>
            </li>
       <?php if ( $primaryNav[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ){ ?>
        </ul>
        <?php $submenu = false; 
       }
        ?>
        <?php }
         if ( $primaryNav[ $count + 1 ]->menu_item_parent != $parent_id ){ ?>
        </li>                            
            <?php $submenu = false; } ?>

        <?php $count++;   ?>


        <?php } ?>
         </ul>

- GAJENDRA patel

0

如果您的主题在 header 或 footer.php（例如）中使用了 has_nav_menu('<menu-name>')，则可以前往外观 > 菜单并选择要配置的菜单或子菜单。

- Marsellus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- hitautodestruct · Accepted Answer

如果有人面对类似问题，这是我的解决方案：

在gist上的快速代码示例

这里是代码，任何想要复制粘贴的人都可以在 github 的 gist 上找到。

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>