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

3

ACTUALIZACIÓN ************ Bueno, tengo una solución de trabajo, aunque no ideal.

Al usar el tema secundario de la caja de arena de Genesis, que tiene un botón de navegación móvil integrado, pude configurarlo para usar el menú de navegación principal, de modo que se ocupe de los escritorios minimizados.

Luego agregué el complemento de menú receptivo que me permitió elegir mi menú móvil personalizado para la fuente. Luego escondí el complemento para uso de escritorio y oculté el botón de menú de Genesis para móviles.

Lo dejará unos días y luego elegirá quién obtiene los 50 puntos, gracias a todos por sus contribuciones ...

(PREGUNTA RE-FRASADA) Tratando de construir una versión móvil de mi sitio.

2 temas, 1 para escritorio y otro solo para visitantes móviles (tema móvil seleccionado automáticamente para visitantes móviles con "cualquier complemento de tema móvil").

He creado un menú personalizado para cada tema en wp admin / menus - menú de escritorio y menú móvil.

Con el tema de escritorio activado, selecciono el menú de escritorio para la navegación principal. Con el tema móvil activado, configuro la navegación principal en el menú móvil.

El problema es que tengo que tener el tema del escritorio activo para el funcionamiento normal. Los visitantes móviles ven el tema móvil alternativo, pero la navegación siempre sigue lo que está configurada para la navegación principal del escritorio.

¿Cómo puedo evitar que esto suceda y obligar al tema móvil a usar siempre / solo la navegación móvil?

    
pregunta speedypancake 29.07.2014 - 23:31

5 respuestas

2

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.

    
respondido por el speedypancake 03.08.2014 - 17:31
6

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

    
respondido por el Pieter Goosen 01.08.2014 - 08:09
4

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;
}
    
respondido por el Brad Dalton 01.08.2014 - 01:47
1

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!

    
respondido por el The Maniac 01.08.2014 - 00:55
0

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; } }
    
respondido por el Jordan 23.02.2018 - 17:02

Lea otras preguntas en las etiquetas