Si tienes un theme con una barra lateral, probablemente esta barra y sus widgets se desplacen al final cuando el sitio se muestra en dispositivos móviles. En este artículo veremos cómo duplicar un widget de la barra lateral y mostrarlo al inicio en móviles.
1- Ubicamos el archivo javascript
El proceso de duplicación lo haremos usando código javascript, para esto ubicaremos algún archivo javascript que ya carga nuestro theme, usualmente los themes guardan estos archivos en la carpeta js. Una manera práctica de saber que archivos javascript carga nuestro theme es revisando el código html generado y buscando el texto “.js”.
2- Agregamos código javascript con Jquery
El código que agregaremos al archivo javascript será similar a lo siguiente:
if ( $(window).width() <=768 ){
$('#idWidget').clone().insertBefore('#idDestino');
}
En el código anterior:
- Debemos asegurarnos que la librería Jquery se encuentre cargada, este código puede ir dentro del evento .ready de Jquery.
- Validamos que sólo se haga la clonación cuando el sitio se carga en un dispositivo con ancho menor o igual a 768 px.
- Seleccionamos el Widget por su id y usamos la función de clonación.
- El resultado de la clonación lo insertamos en un elemento destino.
3- Validar si es un móvil
El código anterior sólo valida el ancho del navegador, para validar si es un dispositivo móvil podemos agregar una condición adicional, el código quedará como:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
if ( $(window).width() <=768 ){
$('#idWidget').clone().insertBefore('#idDestino');
}
}
4- Resultado final
Finalmente, tomando como ejemplo este sitio de decodecms, veremos que el Widget de suscripción de la barra lateral, al verlo en dispositivos móviles, se muestra al inicio.
¿Aún con dudas?, el siguiente video explica en detalle cada uno de los puntos tratados anteriormente.
Artículos Relacionados
(1 votos, promedio: 5,00 de 5)
Cargando…