Подменю WordPress: children in ul

Мне нужна помощь, чтобы создать подменю с WordPress.
Для этого я попытался использовать функцию Wp_get_nav_menu_items WordPress.

Я написал эту функцию PHP. Все работает хорошо, но мой второй уровень так же, как и мой первый уровень :

<?php

function fp_menu($menu) {
    global $post;

    $last = '';
    $args = array(
        'order'                  => 'ASC',
        'orderby'                => 'menu_order',
        'post_type'              => 'nav_menu_item',
        'post_status'            => 'publish',
        'output'                 => ARRAY_A,
        'output_key'             => 'menu_order',
        'nopaging'               => true,
        'update_post_term_cache' => false 
    );

    $items = wp_get_nav_menu_items( $menu, $args );
    if ($items != '') {
        $nav = '';
        for ($i=0; $i < count($items); $i++) {
            if ($items[$i]->object_id == $post->ID) {
                $activeClass = 'active';} else {$activeClass = '';
            }
            if ($items[$i]->type !== 'custom') {
                $nav.= '<li class="'.$activeClass.'"><a href="'.get_permalink($items[$i]->object_id).'" target="'.$items[$i]->target.'">'.$items[$i]->title.'</a></li>';
            } else {
                $nav.= '<li><a href="'.$items[$i]->url.'" target="'.$items[$i]->target.'">'.$items[$i]->title.'</a></li>';
            }
        }

        return '<ul>'.$nav.'</ul>';
    }
}

в HTML :

<?php echo fp_menu('main_menu'); ?>

К сожалению, все мои liнаходятся на одном уровне, как я могу поместить мои элементы подменю в ul > li

Такая структура :

<nav class="header--nav">
    <ul class="header--menu">
        <li>
            <a href="#">Item level 1</a>
            <ul>
                <li><a href="#">Item level 2</a></li>
                <li><a href="#">Item level 2</a></li>
                <li><a href="#">Item level 2</a></li>
            </ul>
        </li>
        <li><a href="#">Item level 1</a></li>
        <li><a href="#">Item level 1</a></li>
    </ul>
</nav>

1 ответ

  1. Вам действительно это нужно?

    WordPress имеет встроенные функции для базовых шаблонов, таких как это, а именно wp_nav_menu()в этом случае. Если вы хотите свернуть свой собственный ходок, чтобы настроить способ отображения nav, вы должны прочитать документы для wp_nav_menu, как это подробно обсуждается там.

    Если вы действительно хотите свернуть свой собственный с нуля

    Самый простой способ, я бы предложил разделить вашу логику построения HTML в отдельную функцию, которую можно вызвать рекурсивно, если данный элемент навигации является подменю. Кроме того, так как неконтролируемая Рекурсия-это довольно зло, вы должны добавить ограничение в свою функцию, чтобы избежать бесконечных петель и определить максимальную глубину навигации. Здание на где вы остановились, что-то по линии:

    function fp_menu($menu) {
        global $post;
    
        $last = '';
        $args = array(
            'order'                  => 'ASC',
            'orderby'                => 'menu_order',
            'post_type'              => 'nav_menu_item',
            'post_status'            => 'publish',
            'output'                 => ARRAY_A,
            'output_key'             => 'menu_order',
            'nopaging'               => true,
            'update_post_term_cache' => false );
    
        $items = wp_get_nav_menu_items( $menu, $args );
    
        return build_menu($items, $post, 2);
    }
    
    function build_menu($items, $currentPage, $depth) {
        if($items != '') {
            $nav = '';
            for ($i=0; $i < count($items); $i++) {
                // add active class if applicable
                if ($items[$i]->object_id == $post->ID) {
                    $activeClass = 'active';
                } else {
                    $activeClass = '';
                }
                // trigger recursion if submenu
                if (($depth !== 0) && $items[$i]->children /*or whatever you call it in your data*/) {
    
                    $nav .= build_menu($items[$i]->children, $currentPage, $depth--);
    
                } else {
                    // regular menu item
                    if ($items[$i]->type !== 'custom') {
                        $nav.= '<li class="'.$activeClass.'"><a href="'.get_permalink($items[$i]->object_id).'" target="'.$items[$i]->target.'">'.$items[$i]->title.'</a></li>';
                    } else {
                        $nav.= '<li><a href="'.$items[$i]->url.'" target="'.$items[$i]->target.'">'.$items[$i]->title.'</a></li>';
                    }
                }
            }
            return '<ul>'.$nav.'</ul>';
        }
    }
    

    Оговорка

    Это непроверенный код, чтобы дать вам представление о логике за ним.