• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Mostrar widget lateral al inicio en móviles

Mostrar widget lateral al inicio en móviles

Widget sidebar al inicio en móviles

[ 8 septiembre 2016 ] [ Actualizado: 13 septiembre 2016 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

accesibilidad js

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

Widget lateral al inicio en móviles

 

¿Aún con dudas?, el siguiente video explica en detalle cada uno de los puntos tratados anteriormente.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Mover barra lateral al inicio en móvilesMover barra lateral al inicio en móviles
  • Fijar Widget lateral en WordPress sin pluginsFijar Widget lateral en WordPress sin plugins
  • Redes sociales en la cabecera WordPressAgregar redes sociales en la cabecera de WordPress
  • Configura el Tema Twenty Nineteen WordPressConfigura el Tema Twenty Nineteen WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (1 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Diego

    24 abril, 2018

    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.

    • Jhon Marreros Guzmán

      25 abril, 2018

      Hola puedes escribirme a través del formulario de contacto detallándome tu problema y ver si te puedo ayudar. https://decodecms.com/contacto/

  2. Olatz

    9 mayo, 2018

    Hola, para aquellos que tenemos pánicos a tocar código, conocer algún plugin que ayude? un saludo y mil gracias

    • Jhon Marreros Guzmán

      9 mayo, 2018

      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/

      • Olatz

        10 mayo, 2018

        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!

  3. lenin

    12 junio, 2019

    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

    if ( $(window).width() <=768 ){
                  $('#woocommerce_product_categories-2').clone().insertBefore('#post-4 article');
              }
    
    • Jhon Marreros Guzmán

      13 junio, 2019

      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

  4. Ramiro

    4 mayo, 2020

    Hola, muchas gracias por la información. Una duda, ¿esto mismo se puede hacer con el tema astra?

    Saludos.

    • Jhon Marreros Guzmán

      4 mayo, 2020

      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.

  5. Ramiro

    5 mayo, 2020

    ¡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!

    • Jhon Marreros Guzmán

      5 mayo, 2020

      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/

  6. Salvador Garcia Gonzalez

    6 julio, 2021

    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

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Modificar elementos en página de producto de WooCommerce

Shortcode para búsqueda en tabla personalizada en WordPress

Desactivar la actualización para plugins específicos

Personalizar el formulario de login de WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados