Как мне создать собственную систему меню / подменю с помощью wp_get_nav_menu_items в WordPress?

У меня есть 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, которое дает идентификатор родительского элемента меню.

Как мне создать подменю в моем foreach цикле? Или есть действительно простой способ использовать wp_nav_menu, о котором Google забыл упомянуть?


person hitautodestruct    schedule 13.08.2012    source источник
comment
вы можете разместить это в WordPress Stack Exchange: wordpress.stackexchange.com   -  person dnagirl    schedule 13.08.2012
comment
@dnagirl Я думаю, это скорее вопрос программирования. Я не уверен, сколько людей действительно смогут ответить на этот вопрос на wp stackexchange.   -  person hitautodestruct    schedule 13.08.2012


Ответы (2)


Для тех, кто занимается чем-то подобным, вот мое решение:

Краткий пример кода по сути

Вот код в 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; ?>

Убедитесь, что родительский идентификатор этого элемента соответствует сохраненному родительскому идентификатору:

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

Если следующий элемент не имеет того же родительского идентификатора и у нас объявлено подменю, закройте подменю <ul>

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

        <?php endif; ?>

Опять же, если следующий элемент в массиве не имеет того же родительского идентификатора, закройте <li>

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

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

  </ul>
</nav>
person hitautodestruct    schedule 14.08.2012
comment
В первом разделе кода отсутствует точка с запятой. Кроме того, очень сложно скопировать и вставить ваше решение. Я бы предпочел один блок кода с комментариями в коде. Тем не менее, спасибо за ваш ответ. +1 от меня - person Matt Sephton; 20.12.2012
comment
@matt Спасибо за комментарий, я добавил суть и добавил недостающую точку с запятой. - person hitautodestruct; 20.12.2012
comment
Я думаю, что закрывающие теги для первых двух строк, ‹nav› и ‹ul›, тоже отсутствуют? - person Matt Sephton; 20.12.2012
comment
@matt Они были в разметке, но были скрыты. Я также обновил суть. Ваше здоровье! - person hitautodestruct; 20.12.2012
comment
Добавьте (array) в foreach( (array) $menuitems as $item ). - person Binyamin; 05.03.2013
comment
@hitautodestruct, я только что обновил ваш ответ. Без (array) он вернет ошибку Invalid argument supplied for foreach(). - person Binyamin; 05.03.2013
comment
@Binyamin Может быть связано с версией php? - person hitautodestruct; 05.03.2013
comment
Проблема с этим решением заключается в том, что оно может отображать только подпункты уровня 1. Если у вас есть подпункты, у которых есть подпункты, он больше не работает должным образом. - person user3877230; 23.02.2018
comment
большое спасибо ... это действительно помогло - person deemi-D-nadeem; 15.05.2018

Лучше всего создать собственный класс 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 в моем примере было прямой копией функции start_el в wp-includes / nav-menu-template.php. В моем примере используется WP_Query, чтобы определить, есть ли отрывок в сообщении / странице, и помещается отрывок между тегами span после заголовка ссылки.

Идея заключалась бы в том, чтобы теги span появлялись только при наведении курсора, что можно сделать с помощью CSS.

Больше информации о ходунках здесь:

Кодекс меню WP Nav

Использование класса Walker

Еще один достойный пример использования класса Walker

person maiorano84    schedule 13.08.2012
comment
Я посмотрел на ходунки, и они слишком сложны для моих скудных потребностей. Я пришел к более простому решению. - person hitautodestruct; 14.08.2012
comment
Рад, что у тебя все получилось. Тем не менее, держите в уме Уокеров, поскольку они помогли мне в крайнем случае с некоторыми довольно… интересными запросами клиентов. - person maiorano84; 14.08.2012
comment
Он не уважает родительскую структуру, вы можете увидеть это здесь: i.imgur.com/jIOXu4e.png - person Francisco Corrales Morales; 06.05.2015
comment
@FranciscoCorralesMorales Это мне ничего не показывает. Вы пользуетесь меню? Вы определили свое меню на панели инструментов? Вы вызываете соответствующее меню в своем шаблоне? Вы уверены, что ваше меню не возвращается к wp_page_menu? Если вы все сделали правильно, то этот будет уважать родительскую структуру, поскольку это почти точная копия исходного класса Walker, который Wordpress использует для внутренних целей. - person maiorano84; 25.08.2015