¿Cómo configurar una página de inicio estática diferente para la versión móvil? (WordPress)

4 minutos de lectura

avatar de usuario
Ronald Wildschut

Me gustaría tener una página de inicio estática diferente para mi versión móvil de mi sitio web. No es realmente una versión móvil adicional, pero responde.

Tengo un control deslizante de Imagen de pantalla completa en este momento configurado como la página de inicio estática. Esto se adapta al tamaño de la pantalla, debido a la construcción receptiva del sitio web, pero no se ve muy bien en un dispositivo móvil, como un iPhone. Así que tengo esta otra plantilla de página de inicio que me gustaría usar cuando el sitio web se ve en un dispositivo móvil.

¿Se puede hacer esto con algún complemento o se debe hacer mediante codificación? No quiero usar un selector de temas o algo por el estilo, solo quiero tener un conjunto de páginas estáticas diferente para dispositivos móviles.

¿Cómo puedo hacer esto?

podrías usar wp_is_mobile para comprobar el móvil y conectarse template_redirect para cargar una plantilla diferente si se detecta un móvil:

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

  • Podría estar equivocado (y espero estarlo, ya que también me gustaría usar esto), pero entiendo que wp_is_mobile también incluye tabletas en la lista de dispositivos a los que aplicará la redirección? ¿Has estado usando esto tú mismo y puedes confirmarlo? +1

    – McNab

    24 de abril de 2013 a las 9:10

  • El código no es perfecto, puede encontrar esta discusión interesante: wordpress.stackexchange.com/questions/73273/…

    – cavar

    24 de abril de 2013 a las 9:41

yo incluiría Detección móvil en el tema en su propia carpeta y agregue este código al comienzo de encabezado.php:

if( is_front_page() ){

    include_once('mobile-detect/Mobile_Detect.php');
    $detect = new Mobile_Detect(); 

    if ( $detect->isMobile() || $detect->isTablet() ) {
        $redirect_url="http://example.com/mobile_home";
        header('Location: ' . $redirect_url ); // Redirect the user
    }
}

Puede personalizar esta solución para que funcione como desee. He usado esto para varios proyectos para soluciones similares.

  • También lo he usado en algunos proyectos: funciona bastante bien y se personaliza fácilmente.

    – gscharles

    3 mayo 2013 a las 15:31

Esto debería funcionar: (insértelo en functions.php)

    //* Redirect homepage on mobile
add_action( 'wp_head', 'wps_params', 10 );
function wps_params() {
    ?>
    	<script>
	if (window.location.pathname == "https://stackoverflow.com/" && jQuery(window).width() <= 480) {
	   window.location = "/webshop/";
	}
	</script>

    <?php
}

Reemplace “/webshop/” con su enlace de la página de inicio móvil.

Podrías intentar usar detectar navegadores móviles guion.

Según recuerdo, es solo un archivo php y tiene una sola función que pregunta cómo tratar diferentes dispositivos móviles (iPhone, iPad, Android, Windows Phone, BlackBerry y Palm).

Puede obtener una mejor idea de cómo funciona el script yendo a este generador de funciones página.

Es fácil y no es necesario codificar todo. Instale el complemento “Redireccionamiento” desde el repositorio de wordpress. 1. Vaya a la página de configuración. 2. Ingrese la “URL de origen” con la página de inicio de su escritorio predeterminado 3. En la opción “Coincidir”, seleccione “URL y agente de usuario” y en la opción “Acción”, seleccione “Redirigir a URL”. Haga clic en “Agregar redirección”. 4. Aparecerá una nueva opción de configuración. Pon el título que quieras. La “URL de origen” debe estar en blanco (significa que es su página de inicio base). En la opción “Agente de usuario”, elige si iPhone o Android. En la opción “Coincidencia”, configure la redirección que desea para la página de inicio móvil.

¡Hecho!

Seguramente puede diferenciar la página de inicio en el escritorio y el dispositivo móvil en función de la redirección que haya configurado antes con ese complemento. Sin embargo, no puede tener el mismo nombre de URL (por ejemplo, www.abcde.com para escritorio y www.abcde.com/mobilehomepage para dispositivo móvil).

avatar de usuario
Everaldo Matías

Esto es muy bueno para mí:

function so16165211_mobile_home_redirect(){
    if( wp_is_mobile() && is_front_page() ){
        include( get_template_directory() . '/home-mobile.php' );
        exit;
    }
}

avatar de usuario
Yahya Hussein

Agregar lo siguiente a su functions.php debería hacer el truco:

//* Redirect homepage on mobile

add_action( 'wp_head', 'wps_params', 10 );

function wps_params() {
?>

<script>
if (window.location.pathname == "https://stackoverflow.com/" && jQuery(window).width() <= 480) {
   window.location = "/webshop/";
}
</script>

<?php
}

¿Ha sido útil esta solución?