¿Cómo detener el tema móvil que hereda el menú de navegación del escritorio?

Después de 5 días de googlear, prueba y error e innumerables complementos, finalmente tengo una solución que funciona para mí.

He vuelto a usar un tema común para los visitantes de escritorio y móviles, pero cada uno con su propio menú personalizado. Esto fue más fácil para mí porque estoy experimentando con el framework Genesis y su "Sandbox" childtheme tiene una función de navegación móvil / minimizada incorporada. Así que simplemente configuro las opciones primaria y móvil en el menú del escritorio.

Para atender a los visitantes móviles, instalé el excelente complemento de "menú receptivo": enlace Esto le da la opción para seleccionar un menú personalizado diferente para su origen, así que lo configuro en mi menú móvil.

Añadir el complemento de respuesta significa que terminé mostrando 2 menús de navegación, así que usé un poco de CSS condicional para ocultar el menú de respuesta en el escritorio y ocultar el menú de Genesis para móviles.

<?php if (wp_is_mobile() ): ?>
<style type="text/css">
.desktop-nav{display: none;}
#click-menu{display:block;}
</style>
<?php endif; ?>

El menú de clic es el div para el menú de respuesta. La función "wp_is_mobile" puede orientarse de manera más precisa instalando el complemento de mobble si es necesario.

Incluso agregué un redireccionamiento de página para visitantes móviles que los lleva a mi versión editada de la página de inicio:

function so16165211_mobile_home_redirect(){
if( wp_is_mobile() && is_front_page() ){
   wp_redirect( '/mobile-home' ); 
    exit;
    }
}
add_action( 'template_redirect', 'so16165211_mobile_home_redirect' );

Así que ahí lo tienes! Es una solución aceptable para mí ahora mismo. Lo ideal sería poder ofrecer a los visitantes móviles la opción de elegir la experiencia móvil o de escritorio, pero eso parece implicar la configuración de cookies, lo que podría ser una pregunta para otro día.

Gracias nuevamente a TODOS los que se tomaron el tiempo para responder, especialmente aquellos que sugirieron que tener 2 temas diferentes no era el mejor enfoque.

Creo que los días de crear un tema separado para usuarios móviles se han ido. Con una planificación y diseño adecuados, puede utilizar un tema en computadoras de escritorio, computadoras portátiles, tabletas y dispositivos móviles

Me gustaría abordar esta es una manera muy diferente.

• Primero, crearía mi tema de tal manera que responda de acuerdo con el tamaño de pantalla requerido como normal. Para ver ejemplos, vea los temas incluidos, especialmente a partir de veinte y doce

• Use la etiqueta conditinal wp_is_mobile() para cargar funciones que solo serán específicas para teléfonos móviles. También crearía un archivo de funciones separadas solo para mis funciones móviles para mantenerlas organizadas. Ejemplo

  if(wp_is_mobile()) {
     //DO SOMETHING FOR MOBILE
  }else{
    //DO SOMETHING FOR EVERYTHING ELSE NOT MOBILE
  }
  

• Cree una hoja de estilo spearate solo para sus estilos móviles, luego encoque esta hoja de estilo condicionalmente usando la etiqueta condicional wp_is_mobile() . Solo recuerde agregar prioridad a su acción para que cada vez que esta hoja de estilo se cargue, se cargue al final.

Para el menú, también me gustaría ver los temas incluidos. Me gusta el menú de los veinticuatro y cómo responde. Todo es manejado por js simples desde adentro functions.js. Puedes hacer uso de esto y adaptarlo a tu propio tema. Nunca he trabajado con génesis, así que no sé qué ganchos ets están usando.

También viene una gran idea de este tutorial de wpmudev.org, que básicamente incorpora el complemento Sidr de Alberto Valero para jQuery. Lo he usado en uno de mis veinte y catorce temas infantiles, y funciona muy bien.

Estas son solo algunas de las alternativas que puede considerar. Espero que algo de esto ayude a resolver su problema

Crea 2 menús. Uno para mostrar en dispositivos móviles y otro como predeterminado para equipos de escritorio. Agregue este código en su header.php o podría usar un enlace en su archivo de funciones.

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

O puedes crear 2 menús personalizados y usar este código:

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

O puedes cambiar los temas condicionalmente:

add_filter( 'stylesheet', 'wpsites_change_themes' );
add_filter( 'template',   'wpsites_change_themes' );

function wpsites_change_themes( $theme ) {
    if ( wp_is_mobile() ) 
        $theme = 'my-mobile-theme';
    return $theme;
}

Es bastante extraño tener dos temas que se ejecutan como usted describe, pero creo que podemos resolver esto.

En ambos temas, donde sea que se imprima el menú (probablemente header.php ) necesitará un código como este que elija el menú correcto y luego lo imprima:

$desktop_theme_name = 'Desktop Theme Name'; // Replace this with the name of the desktop theme
$mobile_theme_name = 'Mobile Theme Name'; // Replace this with the name of the mobile theme

// Get the current theme's information
$current_theme = wp_get_theme();

if ( $current_theme->Name == $desktop_theme_name ) {

    // Print desktop menu
    // NOTE: Instead of using "theme_location" use "menu"

    wp_nav_menu( array(
        'menu' => 'Desktop Menu', // Replace this with the name, slug, or ID of your desktop menu
        // Rest of menu options if needed
    ) );

} else if ( $current_theme->Name == $mobile_theme_name ) {

    // Print mobile menu

    wp_nav_menu( array(
        'menu' => 'Mobile Menu', // Replace this with the name, slug, or ID of your mobile menu
        // Rest of menu options if needed
    ) );

} else {

    // Not using one of the special themes, so just print the menu!

    wp_nav_menu();

}

Espero que ayude, buena suerte!

0 voto negativo Si alguien sigue viendo este hilo, he estado luchando con esto por un tiempo, ninguno de estos funcionó ... ¡podría hacerlo con CSS!

Básicamente, cree un menú gigante con todos los elementos que desee en dispositivos móviles y de escritorio. Luego, agregue 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; } }