Question

我需要一些帮助才能使用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>

Answer 1

你真的需要吗？

Wordpress具有这样的基本模板化内容的内置函数，在这种情况下为wp_nav_menu()。如果你想推动自己的助行器来自定义导航的呈现方式，你应该阅读the docs for 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>';
    }
}

声明

这是未经测试的代码，可让您了解其背后的逻辑。

Wordpress子菜单：ul中的孩子

1 个答案:

你真的需要吗？

如果你真的想从头开始自己推颜

声明