Descubre en este tutorial cómo ocultar el contenido de cualquier bloque solo en dispositivos de escritorio, mediante código.
¿Quieres ocultar determinados elementos de la web en dispositivos de escritorio?
En un tutorial anterior te expliqué cómo ocultar elementos en dispositivos móviles o de escritorio usando CSS. La pega que tiene esta estrategia es que el contenido se carga igualmente, por lo tanto no es la opción más recomendable si quieres usarlo con imágenes (u otros elementos de gran tamaño).
Por eso, en el tutorial de hoy vas a ver cómo controlar que el contenido de un bloque solo se cargue, y por lo tanto muestre, en dispositivos móviles, combinando el filtro render_block con la función wp_is_mobile.
Vamos a ver cómo:
Pasos para ocultar el contenido de un bloque en dispositivos de escritorio
1. Elige el bloque que deseas ocultar
En primer lugar, elige el bloque cuyo contenido quieres que sea solo visible que visiten la web desde un dispositivo móvil.
Si quieres que esto se aplique a más de un conjunto de bloques puedes elegir el bloque de grupo como contenedor.
2. Añade una clase CSS personalizada
Una vez que hayas creado el bloque, ve al apartado de «Avanzado» y añade ocultar-en-escritorio en «Clase(s) CSS adicional(es)» del bloque.
3. Modifica el acceso al contenido del bloque
A continuación añade el siguiente snippet al fichero functions.php o a tu plugin de funcionalidades:
Para ver este código y los otros 2055 snippets de esta web,
identifícate o suscríbete aquí.
En este código utilizas el filtro render_block, que te permite acceder a los atributos de todos los bloques, junto con la función wp_is_mobile.
En el mismo le indicas que si es un dispositivo de escritorio y el bloque tiene la clase CSS ocultar-en-escritorio, el contenido del bloque no se mostrará.
Eso sí, ten en cuenta que al estar usando un filtro de PHP tienes la limitación de que el resultado solo lo verás en la parte frontal de la web, en el backend no se reflejarán los cambios.
Conclusiones
Ahora ya sabes cómo conseguir que cualquier bloque solo sea visible para los usuarios que visitan la web desde un dispositivo móvil.
Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.
Todo ventajas de ser suscriptor. 😉
