WordPress自定义3级超级菜单

我在没有插件的情况下在Wordpress中执行3级自定义超级菜单时遇到问题。现在它是静态HTML, 但我希望它在PHP中动态。我的header.php代码如下所示：

<!-- START offcanvas -->
<div class="offcanvas visible-xs-block visible-sm-block">
    <a href="#" class="mobile-nav-toggle"></a>
    <nav>
        <li><a href="#dropdown-angebote" data-toggle="collapse" class="has-dropdown">Unser Angebot</a></li>
        <li><a href="/das-magazin">Das Magazin</a></li>
        <li><a href="/reservisten-vor-ort">Reservisten vor Ort</a></li>
        <li><a href="/der-verband">Der Verband</a></li>
        <li><a href="#">Mitgliedschaft</a></li>
    </nav>

    <nav class="visible-xs-block">
        <?php wp_header_meta_nav(); ?>
        <li>
            <a href="#" class="icon-search">
                <svg width="18" height="18">
                    <image xlink:href="<?php echo get_template_directory_uri(); ?>/dist/img/icon-search.svg" src="<?php echo get_template_directory_uri(); ?>/dist/img/icon-search.png" width="18" height="18"/>
                </svg>
                <?php _e( 'Suche', 'reservistenverband' ) ?>
            </a>
        </li>
        <li><a href="#" class="btn btn--yellow text-uppercase"><?php _e( 'Mitglied werden', 'reservistenverband' ) ?></a></li>
        <li><a href="#" class="text-uppercase"><?php _e( 'Login', 'reservistenverband' ) ?></a></li>
    </nav>
</div>
<!-- END offcanvas -->

<!-- START Header-Dropdowns -->
<div class="header-dropdowns">
    <div class="header-dropdown collapse" id="dropdown-angebote">
        <a href="#" class="dropdown-close visible-xs-block visible-sm-block"></a>
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-left">
                    <ul>
                        <li><a href="/veranstaltungen">Veranstaltungen</a></li>
                        <li><a data-toggle="collapse" href="#dropdown-truppe" class="has-dropdown">Reservisten in der Truppe</a></li>
                        <li><a href="#">Internationale Arbeit</a></li>
                        <li><a data-toggle="collapse" href="#dropdown-ausbildung" class="has-dropdown">Militärische Aus-und Weiterbildung</a></li>
                        <li><a href="#">Öffentlichkeitsarbeit</a></li>
                        <li><a data-toggle="collapse" href="#dropdown-sicherheitspolitisch" class="has-dropdown">Sicherheitspolitische Arbeit</a></li>
                        <li><a href="#">Verbandsarbeit</a></li>
                    </ul>
                </div>
                <div class="col-md-4 col-right">
                    <div class="header-sub-dropdown collapse" id="dropdown-ausbildung">
                        <a href="#" class="dropdown-close visible-xs-block visible-sm-block"></a>
                        <ul>
                            <li><a href="/unser-angebot/militaerische-aus-und-weiterbildung/taktik">Taktik</a></li>
                            <li><a href="/unser-angebot/militaerische-aus-und-weiterbildung/fernmeldeausbildung">Fernmeldeausbildung</a></li>
                            <li><a href="/unser-angebot/militaerische-aus-und-weiterbildung/schiessen">Schießen</a></li>
                            <li><a href="/unser-angebot/militaerische-aus-und-weiterbildung/agshp">AGSHP</a></li>
                            <li><a href="/unser-angebot/militaerische-aus-und-weiterbildung/sanitaerausbildung">Sanitärausbildung</a></li>
                            <li><a href="/unser-angebot/militaerische-aus-und-weiterbildung/gefechtdienst">Gefechtsdienst</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4 col-teaser">
                    <div class="tt tt--black">
                        <div class="tt__content">
                            <span class="tt__title text-uppercase">Unser Angebot</span>
                            <p class="tt__text">Pro Hauptnavigationspunkt kann hier<br/> ein besonderes Thema hervorgehoben und angeteasert werden.</p>
                            <a href="#" class="btn btn--dark-blue btn--big text-uppercase tt__btn--bottom">Mehr dazu</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END Header-Dropdowns -->

<!-- START Search -->
<div class="fullscreen-search search">
    <div class="search__overlay"></div>
    <div class="search__form">
        <div class="container">
            <a href="#" class="search__close"></a>
            <!--<h3 class="text-uppercase">Suche</h3>-->
            <form action="">
                <input type="text" class="search__input" placeholder="Schlagwort hier eingeben..."/>
            </form>
        </div>
    </div>
</div>
<!-- END Search -->

<div class="page-wrapper">

    <!-- START main-header -->
    <header class="main-header">
        <div class="pre-nav hidden-xs">
            <div class="container">
                <nav>
                    <?php wp_header_meta_nav(); ?>
                    <li>
                        <button class="icon-search">
                            <svg width="18" height="18">
                                <image xlink:href="<?php echo get_template_directory_uri(); ?>/dist/img/icon-search.svg" src="<?php echo get_template_directory_uri(); ?>/dist/img/icon-search.png" width="18" height="18"/>
                            </svg>
                        </button>
                    </li>
                    <li><a href="#" class="btn btn--yellow text-uppercase"><?php _e( 'Mitglied werden', 'reservistenverband' ) ?></a></li>
                    <li><a href="#" class="text-uppercase"><?php _e( 'Login', 'reservistenverband' ) ?></a></li>
                </nav>
            </div>
        </div>
        <div class="main-nav">
            <div class="container">
                <a href="#" class="mobile-nav-toggle visible-xs-block visible-sm-block">
                    <span></span>
                    <span></span>
                    <span></span>
                </a>
                <div class="row">
                    <div class="col-md-3">
                        <a href="<?php bloginfo( 'url' ); ?>">
                            <object type="image/svg+xml" data="<?php echo get_template_directory_uri(); ?>/dist/img/logo.svg">
                                <img src="<?php echo get_template_directory_uri(); ?>/dist/img/logo.png" alt="No SVG support">
                            </object>
                        </a>
                    </div>
                    <div class="col-md-9">
                        <nav class="hidden-sm hidden-xs">
                            <li><a href="#dropdown-angebote" data-toggle="collapse" class="text-uppercase has-dropdown">Unser Angebot</a></li>
                            <li><a href="#" class="text-uppercase">Das Magazin</a></li>
                            <li><a href="#" class="text-uppercase">Reservisten vor Ort</a></li>
                            <li><a href="#" class="text-uppercase">Der Verband</a></li>
                            <li><a href="#" class="text-uppercase">Mitgliedschaft</a></li>
                            <?php //wp_header_main_nav() ?>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </header>
</div>
<!-- END main-header -->

我只想让WP-Backend中的菜单与PHP一起使用。我不知道如何用PHP编写自定义WP nav walker。感谢你的任何建议。

#1

检查这个例子,

• 修改wp_bootstrap_navwalker以用作大型菜单
• 如何创建完全自定义的WordPress Mega菜单-未连接任何插件
• Mega Menu Walker
• 如何在WordPress主题中创建超级菜单
• 创建驱动的Wordpress超级菜单

希望这对你有帮助。