如何显示不同的子菜单？

时间：2017-12-03 作者：DoUtDes

给出了以下主要结构：

<div id="et-top-navigation">
    <nav id="top-menu-nav">
        <ul id="top-menu" class="nav">
            <li id="menu-item-102" class="menu-item-type-post_type menu-item-object-page menu-item-102">
                <a href="URL">Über uns</a>
            </li>
            <li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103">
                <a href="URL">Abteilungen</a>
            </li>
            <li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104">
                <a href="URL">Sportpark</a>
            </li>
            <li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105">
                <a href="URL">News</a>
            </li>
            <li id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106">
                <a href="URL">Impressum</a>
            </li>
        </ul>
    </nav>
</div>
第一：最佳做法是将（mega）子菜单作为子元素插入，还是将其保留在ul顶部菜单之外？

第二：如何向其中添加两个具有不同html输出的子菜单（对应于“Über uns”和“Abteilungen”）？它们将包含链接，但也包含静态内容（如联系信息等）。过去我只是将其硬编码到标题中。php，但现在我希望能够动态更改后端子菜单的链接。我应该在函数中注册两个不同的菜单吗。php和扩展Walker\\u Nav\\u类？Walker\\u Nav\\u类可以扩展两次吗？如果将子菜单作为子元素插入是最佳做法，我不知道如何才能实现这一点，因为这些项是动态生成的。我的解释可能有点混乱，但在我尝试实施这样的事情之前，我正在寻找一个可靠的解决方案。

编辑：以下是不同子菜单作为子元素所请求的标记。

<div id="et-top-navigation">
    <nav id="top-menu-nav">
        <ul id="top-menu" class="nav">
            <li id="menu-item-102" class="menu-item-type-post_type menu-item-object-page menu-item-102">
                <a href="URL">Über uns</a>
                <!-- MEGA SUBMENU#1 -->
                <div class="tg-submenuWrapper über-uns">
                    <div class="tg-submenu">
                        <div class="container tg-submenu__content">
                            <div class="row">
                                <div class="col col--l-6">
                                    <div class="row">
                                        <div class="tg-submenu__pages tg-submenu__pages--main col col--l-4">
                                            <div class="col col--6 col--l-12">
                                                <ul class="tg-submenu__list">
                                                    -> DYNAMIC WORDPRESS LINKS HERE - FIRST ROW (UP TO 3 SIDE BY SIDE)
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="tg-submenu__pages tg-submenu__pages--sub col col--l-8">
                                            <div class="col col--6">
                                                <ul>
                                                -> DYNAMIC WORDPRESS LINKS HERE - SECOND ROW
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tg-submenu__contact col col--l-6">
                                    -> STATIC HTML MARKUP GOES HERE (= THIRD ROW)
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103">
                <a href="URL">Abteilungen</a>
                    <!-- MEGA SUBMENU#2 -->
                    <div class="tg-submenuWrapper abteilungen">
                        <div class="tg-submenu">
                            <div class="container tg-submenu__content">
                                <div class="row">
                                    <div class="col-lg-2">
                                        <div class="tg-submenu__item">
                                            <ul class="tg-submenu__list">
                                                -> DYNAMIC WORDPRESS LINKS GOES HERE - FIRST ROW (5 ROWS SIDE BY SIDE)
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="container">
                                -> SOME STATIC CONTENT BELOW
                            </div>
                        </div>
                    </div>
            </li>
            <li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104">
                <a href="URL">Sportpark</a>
            </li>
            <li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105">
                <a href="URL">News</a>
            </li>
            <li id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106">
                <a href="URL">Impressum</a>
            </li>
        </ul>
    </nav>
</div>

1 个回复
最合适的回答,由SO网友:kierzniak 整理而成

可以将其他元素作为子元素。我看这没什么问题。

要添加自定义元素，必须将自定义元数据库添加到菜单管理。WordPress将自动保存您的自定义元素，因此您无需担心这一点。要显示自定义元素，可以创建自定义walker类或挂接到walker_nav_menu_start_el 滤器取决于type 对于当前项，您可以以不同方式显示菜单项。

/**
 * Add meta box to admin menu view
 */
function wpse_287629_add_nav_menu_meta_boxes() {
    add_meta_box( \'wpse_287629_custom\', \'Custom boxes\' , \'wpse_287629_nav_menu_links\', \'nav-menus\', \'side\', \'low\' );
}

add_action( \'admin_head-nav-menus.php\', \'wpse_287629_add_nav_menu_meta_boxes\' );

/**
 * Output custom boxes nav menu items
 */
function wpse_287629_nav_menu_links() {

    ?>
        <div id="posttype-wpse_287629" class="posttypediv">
            <div id="tabs-panel-wpse_287629" class="tabs-panel tabs-panel-active">
                <ul id ="wpse_287629-checklist" class="categorychecklist form-no-clear">
                    <li>
                        <label class="menu-item-title">
                            <input type="checkbox" class="menu-item-checkbox" name="menu-item[-1][menu-item-object-id]" value="-1"> Contact box
                        </label>
                        <input type="hidden" class="menu-item-type" name="menu-item[-1][menu-item-type]" value="wpse_287629_contact">
                        <input type="hidden" class="menu-item-title" name="menu-item[-1][menu-item-title]" value="Contact box">
                        <input type="hidden" class="menu-item-url" name="menu-item[-1][menu-item-url]" value="#">
                        <input type="hidden" class="menu-item-classes" name="menu-item[-1][menu-item-classes]" value="wpse_287629_contact-box">
                    </li>
                    <li>
                        <label class="menu-item-title">
                            <input type="checkbox" class="menu-item-checkbox" name="menu-item[-1][menu-item-object-id]" value="-1"> HTML box
                        </label>
                        <input type="hidden" class="menu-item-type" name="menu-item[-1][menu-item-type]" value="wpse_287629_html">
                        <input type="hidden" class="menu-item-title" name="menu-item[-1][menu-item-title]" value="HTML box">
                        <input type="hidden" class="menu-item-url" name="menu-item[-1][menu-item-url]" value="#">
                        <input type="hidden" class="menu-item-classes" name="menu-item[-1][menu-item-classes]" value="wpse_287629_html-box">
                    </li>
                </ul>
            </div>
            <p class="button-controls">
                <span class="add-to-menu">
                    <input type="submit" class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e( \'Add to menu\', \'wpse_287629\' ); ?>" name="add-post-type-menu-item" id="submit-posttype-wpse_287629">
                    <span class="spinner"></span>
                </span>
            </p>
        </div>
    <?php
}

function wpse_287629_display_custom_nav_items($item_output, $item, $depth, $args) {

    if( $item->type === \'wpse_287629_contact\' ) {
        // Return contact box
    }

    if( $item->type === \'wpse_287629_html\' ) {
        // Return html box
    }

    return $item_output;
}

add_filter(\'walker_nav_menu_start_el\', \'wpse_287629_display_custom_nav_items\', 10, 4);

结束
标签： php   menus   walker   小码农  

相关推荐

预期来自使用ACF插件的php循环的语句错误

我觉得我已经多次检查我的php循环结构，但我不知道我做错了什么。该文件被PHPstorm视为无效，无法正常运行。代码如下：while ( have_posts() ) : the_post(); $initialCardLoad = 5; $loopLazyLoad = 0; $galleryType = get_field(\'gallery_type\'); ?> <section class=\"grid-content\"&g