web-dev-qa-db-fra.com

Fusionner deux séparés WP menus en un dans la vue Mobile

J'essaie de trouver une solution décente à un problème depuis un moment maintenant. Dans le thème que je construis, j'ai un menu "barre d'admin" avec quelques liens de contact et au-dessous, ma "zone de logo" et un menu principal.

Je souhaite fusionner ces menus en un seul menu dans la vue mobile, tout en maintenant une certaine forme de contrôle sur chaque menu séparé lors de la fusion (taille de police différente dans chaque menu, etc.).

Bien sûr, je pourrais construire un quatrième menu avec tous les liens dont je n'ai besoin que d'afficher en mode mobile et de masquer mes menus habituels, mais est-ce vraiment la meilleure façon de procéder dans ce scénario?

Ceci est mon balisage d'en-tête complet:

<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 -->

J'ai vu des astuces de code utilisant jquery? cloner un menu dans un autre, mais jamais rien de spécifique à WordPress. Le résultat que j'essaie d'obtenir est de baliser le long de la "barre d'administration" sous le menu principal dans la vue mobile afin d'obtenir une longue liste de liens.

Quelqu'un travaille avec un problème similaire?

menusjqueryjavascript
2
nicklas bryntesson

J'ai eu le même problème. La solution que j'ai choisie a été de "fusionner" les menus en les plaçant sous un seul wrapper div mais en les plaçant dans une classe div séparée.

Quelque chose comme ça:

<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>

Si vous souhaitez "fusionner" les objets de menu réels, essayez de placer un élément de menu sur des variables via wp_get_nav_menu_items() puis array_merge($menu1, $menu2). En ce qui concerne le contrôle des éléments, vous pouvez peut-être ajouter un identifiant lors de la création du nouveau menu HTML avec la liste de fusion.

Je ne sais pas si c'est la réponse que vous recherchez, ni si c'est la meilleure approche. J'espère que ça aide.

3
AstralProgrammer