• 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 / Ocultar Widgets en dispositivos móviles

Ocultar Widgets en dispositivos móviles

Ocultar Widget Móviles WordPress

[ 3 diciembre 2016 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

css

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Hay algunos plugins que permiten ocultar widgets WordPress en móviles, pero si inspeccionas un poco la estructura HTML del plugin que quieres ocultar y si agregas algunas líneas de código CSS, puedes evitar usar un plugin adicional en tu sitio Web.

 

1- Identificando la estructura HTML

Primero necesitas identificar de manera única al Widget que quieres ocultar en móviles, esto puedes hacerlo de dos maneras:

  • A través de un plugin que te permita agregar un identificador a los Widgets, puedes revisar por ejemplo Widget CSS Clasess. Pero claro, si la idea es evitar un plugin no vamos a usar otro para agregar identificadores.
  • La otra opción, y es la que te recomiendo usar, es usar la estructura HTML que ya genera el plugin que quieres ocultar. Para esta segunda opción te recomiendo revisar el artículo de usar Firebug para cambiar la apariencia de un theme.

 

Usualmente los plugins tienen un ID, si revisamos los plugins del sidebar del theme Genesis de ejemplo, veremos un código HTML similar a lo que se muestra a continuación:


<aside id="genesis-sidebar-primary" class="sidebar sidebar-primary widget-area">

<h2 class="genesis-sidebar-title screen-reader-text" >Primary Sidebar</h2>

<section id="text-3" class="widget widget_text" ></section>
<section id="search-3" class="widget widget_search" ></section>
<section id="recent-posts-3" class="widget widget_recent_entries" ></section>
<section id="tag_cloud-2" class="widget widget_tag_cloud" ></section>

</aside>

En el código anterior:

  • Vemos diferentes Widgets con la etiqueta HTML section.
  • Cada Widget tiene un ID único (text-3, search-3, etc.), podemos usar este ID para identificar al Widget que queremos ocultar.
  • Cada Widget tiene también un atributo Class con varias clases, para este ejemplo no podemos usar clases ya que se pueden repetir en varios Widgets del mismo tipo.

 

2- Usando CSS para ocultar un Widget

Primero ocultaremos nuestro Widget para todos los dispositivos, usaremos el ID del Widget que hemos detectado anteriormente.

Suponiendo que queremos ocultar el Widget de Texto con ID = text-3, nuestro código CSS usaría un display:none, tal como se muestra a continuación:


#text-3{
	display:none;
}

En caso este código no funcione, ya que el theme que usas puede ser que tenga un estilo similar y lo sobrescriba, puedes especificar más el selector ayudándote de la clase padre, por ejemplo:


.sidebar #text-3{
	display:none;
}

Como última opción evalúa usar !important en tu código, es decir:


.sidebar #text-3{
	display:none!important;
}

Este código CSS lo puedes agregar al final de algún archivo CSS de tu theme, o de tu child-theme, usualmente será el style.css. Algunos themes tienen también la opción de agregar código CSS directamente desde la configuración del theme por lo que puedes revisar si tu theme tiene esta funcionalidad.

 

3- Ocultar el Widget sólo en dispositivos móviles

Luego que te has asegurado que el código anterior oculta el Widget, entonces puedes restringir el código para que sólo tenga efecto a partir de un determinado ancho de pantalla, para esto usaremos Media Queries. Usualmente será a partir de 768px, por lo que nuestro código quedaría:


@media (max-width:768px){
	#text-3{
		display:none;
	}
}

 

¿Aún con dudas?, en el siguiente video se explica 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
  • Widget sidebar al inicio en móvilesMostrar widget lateral al inicio en móviles
  • Cambiar logo version móvilCambiar el logo en la versión móvil de tu sitio Web
  • Agregar nueva zona Widgets WordPressAñadir una nueva zona de Widgets a un theme WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (6 votos, promedio: 4,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Alberto

    20 abril, 2017

    Gracias, me ha servido bastante

  2. BELLO

    11 junio, 2017

    LA MEJOR GRACIAS

  3. Robert Celli

    4 noviembre, 2017

    La verdad muchas gracias, yo soy una patata en código y estaba hasta hoy buscando plugins y configurando mil y un cosas pero con estas simples lineas de código me solucionaste la vida xDD!

  4. Jesus

    21 noviembre, 2017

    Gran tutorial y muy bien explicado.
    Para ocultar un plugin imagino que sería igual pero cómo saber la id del plugin?
    Y ocultarla en pcs y laptops

    • Jhon Marreros Guzmán

      21 noviembre, 2017

      Hola Jesus
      Tendrías que inspeccionar el código, posiblemente uses un ID o una clase CSS.
      Para ocultar en PC o laptop, como tienen un ancho mayor usa min-width en lugar de max-width

      @media (min-width:768px){
      }
  5. cotu

    7 diciembre, 2017

    Hola, en mi sitio, los widgets están como asides y creo que eso impide que desaparezcar ¿cómo debería ser el css?

    • Jhon Marreros Guzmán

      7 diciembre, 2017

      Hola, modifica un poco el código CSS, posiblemente en lugar de .sidebar debas usar aside (sin punto). Saludos.

  6. Eric

    8 abril, 2018

    Excelente me funciono al 100%

  7. javier

    8 agosto, 2018

    Perfecto, gracias por el aporte.

  8. oscar

    14 septiembre, 2018

    Gracias.
    Mejor explicado, imposible.

  9. Mònica Cabaní

    26 mayo, 2020

    Genial! Ideal para una tienda online. Gracias Jhon!

  10. Freddy

    23 abril, 2021

    Vaya me pareció muy bueno pero… A mi no me funcionó. necesito quitar el “topbar” o la barra en la cabecera pero para dispositivos moviles y hacerlo mediante css pero no me ha funcionado, de hecho me descargue la hoja de estilo y le agregue ese codigo encima del “header-topbar” a ver si ejecutaba primero y aun así no cambio.

    web: mercatemporada.com, el que quiero ocultar es donde sale el correo y numero teléfonico y redes etc.

    • Jhon Marreros Guzmán

      28 abril, 2021

      Hola, el siguiente código debería funcionarte:

      @media(max-width:768px){
        .header-topbar{
          display: none;
        }  
      }
      

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

Centrar Logo en Menú Principal

Cambiar desplegable por botones en las variaciones de productos de WooCommerce

Modificar el precio de un producto por código en WooCommerce

Poner WordPress en Mantenimiento sin plugins

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