Come ottenere un menu mobile diverso dal menu desktop nel tema child twentytwelve

Question

Come ottenere un menu mobile diverso dal menu desktop nel tema child twentytwelve

26 apr 2015, 16:56:32

Visualizzazioni: 48.5K

Voti: 4

Vorrei utilizzare un menu diverso per il mio sito mobile rispetto al sito desktop. Con diverso intendo il contenuto, non il layout. Voglio semplicemente utilizzare il menu mobile del tema twentytwelve.

Ecco cosa ho fatto finora:

Nel file functions.php del mio tema child ho aggiunto il seguente codice:

     register_nav_menus( array(
     'primary' => __( 'Navigazione Primaria', 'twentytwelve' ),
     'mobile' => __( 'Navigazione Mobile', 'mobile'),
     ) );

Ora sono in grado di creare due menu nel mio pannello di controllo. (dashboard>menu>posizioni)

Nel file header.php non so esattamente cosa modificare per far caricare il mio menu mobile invece del menu primario.

    <nav id="site-navigation" class="main-navigation" role="navigation">
        <button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
        <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Vai al contenuto', 'twentytwelve' ); ?>"><?php _e( 'Vai al contenuto', 'twentytwelve' ); ?></a>
        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    </nav><!-- #site-navigation -->

Ho provato a modificare il <?php _e( 'Menu', 'twentytwelve' ); ?> in <?php _e( 'Menu', 'mobile' ); ?>, ma questo non ha cambiato il contenuto del menu nel mio menu mobile.

Non ho molta familiarità con questo codice, quindi spero che qualcuno possa indicarmi la direzione giusta.

Grazie per il vostro aiuto!

patrick

141

menu navigazione mobile tema twenty twelve

Tutte le risposte alla domanda

Commenti

wp_is_mobile è sconsigliato per modifiche al tema e alla responsive design

Chris Pink

21 feb 2025 16:33:05

Commenti

Stavo avendo lo stesso problema ‍♀️ Avrei dovuto pensarci... grazie per averlo condiviso!

ea0723

21 feb 2022 20:21:18

Nikolai 69 · Answer 1 · 2015-06-08T16:07:12Z

Come consigliato in un post simile: https://wordpress.stackexchange.com/a/156494/74343

1.) Crea i menu come desideri e assegnagli i nomi che preferisci, ad esempio "menu-mobile" e "menu-desktop".

2.) Nel tuo child theme, nel file header.php, puoi alternare i menu utilizzando la funzione wp_is_mobile() in questo modo:

if ( wp_is_mobile() ) {
     wp_nav_menu( array( 'menu' => 'menu-mobile' ) );
} else {
     wp_nav_menu( array( 'menu' => 'menu-desktop' ) );
}

Tuttavia ho utilizzato il plugin "WP Responsive Menu", che mi ha permesso di selezionare un menu specifico per la versione mobile. Nella configurazione del plugin "WP Responsive Menu" bisogna selezionare l'elemento da NON mostrare nella versione mobile, che nel caso del tema Twenty Twelve è: "#site-navigation".

Buona programmazione!

Nikolai

69

8 giu 2015 16:07:12

Jordan 21 · Answer 2 · 2018-02-23T17:19:58Z

Se qualcuno sta ancora seguendo questa discussione, ho avuto problemi con questo per un po', nessuna di queste soluzioni ha funzionato... Alla fine ho risolto con il CSS!

In pratica, crea un menu gigante con tutti gli elementi che vuoi sia su mobile che su desktop. Poi, aggiungi le classi: "hide-mobile" e "hide-desktop" rispettivamente agli elementi del menu.

Usa questo CSS:

@media (min-width: 980px){

    .hide-desktop{
    display: none !important;
    }

}

    @media (max-width: 980px){
    .hide-mobile{
    display: none !important;
    }

}

Jordan

21

23 feb 2018 17:19:58

Jeroen Onstenk 1 · Answer 3 · 2018-08-04T15:39:02Z

Oltre al commento di Jordan, è importante sapere come aggiungere una classe a una voce di menu in WordPress:

Per aggiungere classi CSS a un menu di WordPress, per prima cosa vai su Aspetto > Menu nel tuo tema WordPress. Successivamente, trova la scheda Opzioni schermo in alto a destra dello schermo. Clicca per aprire il pannello e seleziona la casella etichettata Classi CSS. Seleziona il menu che desideri modificare e clicca sul link a cui vuoi aggiungere una classe CSS.

Jeroen Onstenk

1

4 ago 2018 15:39:02

BrianHenryIE 117 · Answer 4 · 2019-09-07T01:44:12Z

Un altro approccio che non richiede la sovrascrittura dei file/template del tema:

Nel file functions.php del child theme aggiungi:

/**
 * Registra la posizione del menu 'mobile' in WordPress così da poterla configurare nell'interfaccia di amministrazione.
 */
register_nav_menus( array(
    'mobile' => 'Mobile Sostituisce Primary',
) );

/**
 * Durante la costruzione dei menu, se viene utilizzata la posizione 'primary' e siamo su mobile,
 * sostituiscila con la posizione del menu 'mobile'.
 * 
 * @see wp_nav_menu()
 */
add_filter( 'wp_nav_menu_args', function( $args ) {

    if( 'primary' === $args['theme_location'] && wp_is_mobile() ) {
        $args['theme_location'] = 'mobile';
    }

    return $args;
} );

Quindi configura il tuo menu mobile in wp-admin / Aspetto / Menu.

BrianHenryIE

117

7 set 2019 01:44:12