Cum să obții un meniu mobil diferit față de meniul desktop în tema copil twentytwelve

Question

Cum să obții un meniu mobil diferit față de meniul desktop în tema copil twentytwelve

26 apr. 2015, 16:56:32

Vizualizări: 48.5K

Voturi: 4

Aș dori să folosesc un meniu diferit pentru site-ul mobil față de cel pentru desktop. Prin diferit mă refer la conținut, nu la aspect. Vreau doar să folosesc meniul mobil al temei twentytwelve.

Ce am făcut până acum:

În fișierul functions.php al temei copil am adăugat următorul cod:

     register_nav_menus( array(
     'primary' => __( 'Navigare Principală', 'twentytwelve' ),
     'mobile' => __( 'Navigare Mobilă', 'mobile'),
     ) );

Acum pot crea două meniuri în panoul de administrare. (dashboard>meniu>locații)

În header.php nu știu exact ce să modific pentru ca meniul mobil să fie încărcat în locul meniului principal.

    <nav id="site-navigation" class="main-navigation" role="navigation">
        <button class="menu-toggle"><?php _e( 'Meniu', 'twentytwelve' ); ?></button>
        <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Sari la conținut', 'twentytwelve' ); ?>"><?php _e( 'Sari la conținut', 'twentytwelve' ); ?></a>
        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    </nav><!-- #site-navigation -->

Am încercat să schimb <?php _e( 'Meniu', 'twentytwelve' ); ?> în <?php _e( 'Meniu', 'mobile' ); ?>, dar acest lucru nu a schimbat conținutul meniului în meniul meu mobil.

Nu sunt foarte familiarizat cu acest cod, așa că sper că cineva mă poate îndruma în direcția corectă.

Mulțumesc pentru ajutor!

patrick

141

meniuri navigare mobil tema twenty twelve

Toate răspunsurile la întrebare

Comentarii

wp_is_mobile este contraindicat pentru modificări de temă și responsivitate

Chris Pink

21 feb. 2025 16:33:05

Comentarii

Am avut aceeași problemă ‍♀️ Trebuia să mă gândesc la asta... mulțumesc pentru împărtășire!

ea0723

21 feb. 2022 20:21:18

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

După cum este recomandat într-un post similar: https://wordpress.stackexchange.com/a/156494/74343

1.) Creează meniurile așa cum dorești și denumește-le după preferință, de exemplu "meniu-mobil" și "meniu-desktop".

2.) În tema ta child, în fișierul header.php, poți comuta între meniuri în funcție de flag-ul wp_is_mobile() astfel:

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

Totuși, eu am folosit plugin-ul "WP Responsive Menu", care mi-a permis să selectez un meniu și pentru versiunea mobilă. În configurația "WP Responsive Menu" trebuie selectat elementul care NU trebuie afișat pe mobil, care în cazul temei twenty twelve este: "#site-navigation".

Codare plăcută!

Nikolai

69

8 iun. 2015 16:07:12

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

Dacă cineva mai urmărește acest thread, eu m-am luptat cu asta ceva timp, niciuna dintre aceste soluții nu a funcționat... Am reușit să o rezolv cu CSS!

Practic, creează un meniu mare care să conțină toate elementele pe care le dorești atât pe mobil cât și pe desktop. Apoi, adaugă clasele: "hide-mobile" și "hide-desktop" pe elementele respective din meniu.

Folosește acest 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

În plus față de comentariul lui Jordan, este important să știi cum să adaugi o clasă la un element de meniu în WordPress:

Pentru a adăuga clase CSS la un meniu WordPress, mai întâi mergi la Aspect > Meniuri în tema ta WordPress. Apoi, găsește fila Opțiuni Ecran în partea dreaptă sus a ecranului. Apasă pentru a deschide panoul și bifează caseta numită Clase CSS. Selectează meniul pe care dorești să-l editezi și apasă pe linkul căruia vrei să-i adaugi o clasă CSS.

Jeroen Onstenk

1

4 aug. 2018 15:39:02

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

O altă abordare care nu implică suprascrierea fișierelor/șabloanelor de temă:

În fișierul functions.php al temei child adăugați:

/**
 * Înregistrează locația de meniu 'mobile' în WordPress pentru a putea fi configurată în interfața de administrare.
 */
register_nav_menus( array(
    'mobile' => 'Mobile Replace Primary',
) );

/**
 * La construirea meniurilor, dacă se utilizează locația 'primary' și suntem pe dispozitiv mobil,
 * se va înlocui cu locația de meniu '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;
} );

Apoi configurați meniul mobil în wp-admin / Aspect / Meniuri.

BrianHenryIE

117

7 sept. 2019 01:44:12