it-swarm.com.de

Füge zwei separate zusammen WP Menüs in einer in der mobilen Ansicht

Ich habe eine Weile lang versucht, eine anständige Lösung für ein Problem zu finden. In dem Thema, das ich gerade baue, habe ich ein oberes "Admin Bar" -Menü mit einigen Kontaktlinks und darunter meinen "Logobereich" und ein Hauptmenü.

Ich möchte diese Menüs in der mobilen Ansicht zu einem einzigen Menü zusammenführen, habe aber dennoch eine gewisse Kontrolle über jedes einzelne Menü, wenn es zusammengeführt wird (unterschiedliche Schriftgröße in jedem Menü usw.).

Natürlich könnte ich ein viertes Menü mit allen Links erstellen, die ich brauche, um meine normalen Menüs nur in der mobilen Ansicht anzuzeigen und auszublenden. Aber ist das wirklich der beste Weg, um dieses Szenario zu durchlaufen?

Dies ist mein komplettes Header-Markup:

<header id="masthead" class="site-header" role="banner">

    <?php if ( has_nav_menu( 'admin' ) ) : ?>
        <nav id="top-nav" class="top-bar menues" role="navigation"> 
                <?php wp_nav_menu( array( 'theme_location' => 'admin' ) ); ?>
        </nav><!-- #top-nav -->
    <?php endif; ?>

    <div class="site-branding wrap">
        <figure class="site-logo">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                <img class="inject-me" src="<?php echo esc_url( get_template_directory_uri() ); ?>/icons/logo.svg" alt="logo">
            </a>
        </figure><!-- .site-logo -->    
    </div><!-- .site-branding -->

    <?php if ( has_nav_menu( 'primary' ) ) : ?>
        <nav id="site-navigation" class="main-navigation menues" role="navigation">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Menu', 'testsite' ); ?></button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu', 'menu_class' => 'nav-menu' ) ); ?>
        </nav><!-- #site-navigation -->
    <?php endif; ?>


</header><!-- #masthead -->

Ich habe einige Codetipps gesehen, die jquery verwenden. ein Menü in ein anderes klonen, aber niemals irgendetwas WordPress-spezifisches. Das Ergebnis, das ich erreichen möchte, ist das Markieren in der "Admin-Leiste" unter dem Hauptmenü in der Mobilansicht, sodass Sie eine lange Liste von Links erhalten.

Arbeitet jemand mit einem ähnlichen Problem?

2

Ich hatte das gleiche problem Die von mir gewählte Lösung bestand darin, die Menüs zu "verschmelzen", indem sie unter einem einzigen Div-Wrapper platziert wurden, sie aber in einer separaten Div-Klasse gespeichert wurden.

Etwas wie das:

<div class="menu-wrapper">
   <div class="menu1">
     <?php
            wp_nav_menu( array(
                'theme_location'  => 'menu-1',
                'menu_id'         => 'top-menu',
            ) );
        ?>
   </div>
   <div class="menu2">
     <?php
            wp_nav_menu( array(
                'theme_location'  => 'menu-2',
                'menu_id'         => 'main-menu',
            ) );
        ?>
   </div>
</div>

Wenn Sie die eigentlichen Menüobjekte "zusammenführen" möchten, platzieren Sie den Menüeintrag über wp_get_nav_menu_items() und dann über array_merge($menu1, $menu2) auf Variablen. In Bezug auf die Steuerung der Elemente können Sie möglicherweise eine Kennung hinzufügen, während Sie den neuen Menü-HTML-Code mit der Zusammenführungsliste erstellen.

Ich bin mir nicht sicher, ob dies die Antwort ist, nach der Sie suchen, oder ob es der beste Ansatz ist. Ich hoffe es hilft.

3