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;
}
}
Gracias, me ha servido bastante
LA MEJOR GRACIAS
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!
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
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
Hola, en mi sitio, los widgets están como asides y creo que eso impide que desaparezcar ¿cómo debería ser el css?
Hola, modifica un poco el código CSS, posiblemente en lugar de .sidebar debas usar aside (sin punto). Saludos.
Excelente me funciono al 100%
Perfecto, gracias por el aporte.
Gracias.
Mejor explicado, imposible.
Genial! Ideal para una tienda online. Gracias Jhon!
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.
Hola, el siguiente código debería funcionarte: