Cómo obtener un menú móvil diferente al menú de escritorio en el tema hijo twentytwelve

Question

Cómo obtener un menú móvil diferente al menú de escritorio en el tema hijo twentytwelve

26 abr 2015, 16:56:32

Vistas: 48.5K

Votos: 4

Me gustaría usar un menú diferente para mi sitio web móvil que para mi sitio web de escritorio. Con diferente me refiero al contenido, no al diseño. Solo quiero usar el menú móvil del tema twentytwelve.

Lo que he hecho hasta ahora:

En el archivo functions.php de mi tema hijo he agregado el siguiente código:

     register_nav_menus( array(
     'primary' => __( 'Primary Navigation', 'twentytwelve' ),
     'mobile' => __( 'Mobile Navigation', 'mobile'),
     ) );

Ahora puedo crear dos menús en mi panel de control. (panel de control>menú>ubicaciones)

En el header.php no sé exactamente qué cambiar para que se cargue mi menú móvil en lugar de mi menú principal.

    <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( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    </nav><!-- #site-navigation -->

He intentado cambiar el <?php _e( 'Menu', 'twentytwelve' ); ?> a <?php _e( 'Menu', 'mobile' ); ?>, pero esto no cambió el contenido del menú a mi menú móvil.

No estoy muy familiarizado con este código, así que espero que alguien pueda orientarme en la dirección correcta.

¡Gracias por tu ayuda!

patrick

141

menús navegación mobile tema twenty twelve

Todas las respuestas a la pregunta

Comentarios

wp_is_mobile no se recomienda para cambios en el tema y la capacidad de respuesta

Chris Pink

21 feb 2025 16:33:05

Comentarios

Estaba teniendo el mismo problema ‍♀️ Debí haber pensado en esto... ¡gracias por compartir!

ea0723

21 feb 2022 20:21:18

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

Como se recomienda en una publicación similar: https://wordpress.stackexchange.com/a/156494/74343

1.) Crea los menús como desees y nómbralos como prefieras, por ejemplo "menú-móvil" y "menú-escritorio".

2.) En tu tema hijo, en el archivo header.php, puedes cambiar según la condición wp_is_mobile() de la siguiente manera:

if ( wp_is_mobile() ) {
     wp_nav_menu( array( 'menu' => 'menú-móvil' ) );
} else {
     wp_nav_menu( array( 'menu' => 'menú-escritorio' ) );
}

Sin embargo, yo utilicé el plugin "WP Responsive Menu", que me permitió seleccionar un menú para móviles también. En la configuración de "WP Responsive Menu" hay que seleccionar el elemento que NO se debe mostrar en móviles, que en el caso del tema Twenty Twelve es: "#site-navigation".

¡Feliz codificación!

Nikolai

69

8 jun 2015 16:07:12

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

Si alguien todavía sigue este hilo, he estado luchando con esto por un tiempo, nada de esto funcionó... ¡Pude hacerlo con CSS!

Básicamente, crea un menú gigante con todos los elementos que quieras en móvil y escritorio. Luego, añade las clases: "hide-mobile" y "hide-desktop" en sus respectivos elementos del menú.

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

Además del comentario de Jordan, es importante saber cómo añadir una clase a un elemento del menú en WordPress:

Para agregar clases CSS a un menú de WordPress, primero ve a Apariencia > Menús en tu tema de WordPress. A continuación, encuentra la pestaña "Opciones de pantalla" en la parte superior derecha de la pantalla. Haz clic para abrir el panel y marca la casilla etiquetada como "Clases CSS". Selecciona el menú que deseas editar y haz clic en el enlace al que quieras añadir una clase CSS.

Jeroen Onstenk

1

4 ago 2018 15:39:02

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

Otro enfoque que no implica sobrescribir archivos/plantillas del tema:

En el archivo functions.php del tema hijo agrega:

/**
 * Registra la ubicación del menú 'mobile' en WordPress para que pueda configurarse en la interfaz de administración.
 */
register_nav_menus( array(
    'mobile' => 'Reemplazo Móvil del Menú Principal',
) );

/**
 * Al construir menús, si se está usando la ubicación 'primary' y estamos en móvil,
 * la reemplazamos por la ubicación '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;
} );

Luego configura tu menú móvil en wp-admin / Apariencia / Menús.

BrianHenryIE

117

7 sept 2019 01:44:12