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.
Ver comentarios (12)
Hola, tengo un caso puntual con la plantilla betheme en donde quiero mostrar toda la barra lateral por sobre el contenido de una pagina. Sigo los pasos que explicas en el video pero no obtengo el resultado (aclaro que no se mucho de codigo). Podrías ayudarme a ver cual es el error?
Si te paso por privado la URL quizás puedas guiarme. Gracias.
Hola puedes escribirme a través del formulario de contacto detallándome tu problema y ver si te puedo ayudar. https://decodecms.com/contacto/
Hola, para aquellos que tenemos pánicos a tocar código, conocer algún plugin que ayude? un saludo y mil gracias
Hola, lo que sucede es que para hacer esto depende de la estructura de tu theme, no he visto plugins genéricos que hagan esto. Sin embargo hay plugins con funcionalidad similar, por ejemplo: https://es.wordpress.org/plugins/widget-options/
Gracias! Es el que me he descargado, y está bien pero no tiene esa opción en concreto. Si que tiene un apartado para WP Conditional Tags, y pensaba si tu explicación funcionaria aqui; o si sabes qué tendría que escribir ahí. Muchas gracias por tu gran trabajo!
Buena tarde he insertado el código en mi sitio pero no funciona... el sitio es https://cofor.com.mx/catalogo-cofor/ puede ayudarme porfavor, el codigo que inserté es este
Hola creo que la definición del destino es incorrecta, debería ser article#post-4, ya que estan al mismo nivel , o simplemente #post-4 porque es un id que no se repite
Hola, muchas gracias por la información. Una duda, ¿esto mismo se puede hacer con el tema astra?
Saludos.
Hola, si, no debería haber problemas, sin embargo tendrías que revisar los Ids HTML que debes usar ya que podrían ser otros.
¡Muchas gracias por tu respuesta Jhon!.
Disculpa, yo apenas me estoy comenzando en el uso de wordpress y manipulación de código. Ahora lo que se me esta complicando es encontrar el archivo .js donde pueda ingresar el código. ¿Pudieras aconsejarme algo?
Hasta ahora, la única ruta que hace referencia al theme, una vez que estoy inspeccionando el html, es esta: "wp-content/themes/astra/assets/js/minified/style.min.js?ver=2.4.3" .
Gracias anticipadas.
¡Saludos!
Hola, todo lo que sea archivo minificados mejor descártalo. Si quieres insertar javascript correctamente revisa alguna des estas formas: https://decodecms.com/insertar-javascript-en-wordpress-de-forma-correcta/
Hola intenté colocar en código con mis Id que encontré y busqué que fuera dentro de .ready y que lo cargara el theme pero no funciono, el tema es Poseídon podrías ayudarme. Saludos