Una de las tendencias más interesantes en el diseño web es el desarrollo de temas responsivos para WordPress. Un sitio web responsivo es aquél que se ajusta así mismo para lucir grandioso en cualquier tipo de pantalla, especialmente en smartphones y tablets.
El proceso para convertir un sitio web normal a un sitio web responsivo involucra ajustes específicos a la hoja de estilos CSS, con el objetivo de incluir reglas únicas de interfaz.
Por ejemplo, si establecemos la anchura de un sitio web en 980px, para los smartphones con dimensiones de pantalla de 480px x 800px, tendremos que definir esas dimensiones especiales, y así sucesivamente para cualquier dispositivo móvil.
De la misma forma es con las imágenes en WordPress. Debido a que las dimensiones varían, es difícil crear una regla que aplique para todas ellas. La solución es aplicar reglas de diseño responsivo de una forma selectiva, y aquí es donde entra en juego el usuario, ya que deberá decidir qué imágenes se deben ampliar o no.
Estilo responsivo a través de shortcodes
La manera más fácil de realizar esta tarea es utilizar una poderosa función de WordPress: «shortcodes«. A continuación te mostramos cómo crear un «shortcode» para hacer las imágenes en WordPress responsivas:
Generalmente la estructura de un «shortcode» es muy simple, lo que hace es envolver el contenido en «div’s«:
Este es un ejemplo de cómo utilizar el shortcode:
Date cuenta que la «imagen» está envuelta por una clase div llamada: «image-resized«. El último paso consiste en asignar las reglas de estilo CSS utilizando «@media-queries«.
Agrega las siguientes líneas a tu hoja de estilos:
Puedes aplicar el código anterior a la mayoría de los casos, si deseas asignar diferentes dimensiones a las imágenes para distintos tipos de pantallas, puedes utilizar:
Comentarios finales
El uso del diseño y estilo responsivo ha tomado relevancia recientemente. Hoy en día, cuando la mayoría de los sitios web son mejorados con elementos como «Sliders jQuery» y todo tipo de materiales interactivos, el próximo reto será: ¿cómo adaptar estas nuevas funciones y características a las pantallas móviles?
Deja una respuesta