Ocultar Widgets en dispositivos móviles

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

css

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.

Valora este artículo : (6 votos, promedio: 4,00 de 5)

Cargando…