Imagenes Responsive en WordPress

Autor: | 2018-07-17T08:54:19+00:00 Fecha: 24/01/2015|Categorías: WordPress|Comentarios: 11 comentarios

El diseño web avanza y actualmente es muy importante que los sitios web tengan un diseño adaptable o , es decir que los elementos del sitio web, incluyendo los elementos visuales, tienen que ser adaptables a los diferentes tipos de dispositivos que pueden conectarse a Internet y a los diferentes tipos de pantallas que podemos encontrar en tablets, smartphones, netbooks, ordenadores portátiles, ordenadores de sobremesa y smartTVs.

Algunos themes para WordPress traen implementado un sistema de shortcodes o un sistema automático que hace que el tamaño de las imágenes se adapte en base al tamaño de la pantalla en la que se está visualizando la web.
Un ejemplo es el tema Inovado para WordPress, que implementa un efectivo sistema de shortcodes que convierte las imágenes en , mientras que el theme The7 para WordPress lo hace automáticamente.

responsiveimgpng

Pero… ¿Qué podemos hacer si nuestro theme no convierte nuestras imágenes en ? ¿Hay alguna solución en estos casos?

Existen diferentes plugins para que las imágenes de un sitio web WordPress sean fácilmente:

  • RICG Responsive Images: Se trata de un plugin totalmente automático capaz de añadir una etiqueta o atributo a todas las imágenes haciendo que sean y adaptables al tamaño de la pantalla.
  • PB Responsive Images: Se trata de un plugin para WordPress que sirve para lo mismo, hacer que las imágenes sean , pero en este caso tiene algunas opciones de configuración avanzadas para hacerlo más adaptable a la situación.
  • Root Responsive Image: En este caso se trata de un plugin de pago que te permite tener control completo sobre la adaptabilidad de las imágenes en WordPress.
  • BC Responsive Images: Se trata de un plugin gratuito que añade un shortcode al editor que puede ser usado sobre las imágenes para convertirlas en .

Estas son algunas alternativas para hacer que las imágenes de tu blog sean s y totalmente adaptables a los distintos tipos de dispositivos, sinceramente los plugins mencionados anteriormente son tres alternativas muy fáciles de utilizar.

Si no te gustan los plugins y eres de los que te gusta hacer las cosas manualmente, existe una forma de implementar en WordPress la adaptabilidad de las imágenes utilizando shortcodes que vamos a implementar previamente en los archivos del theme.
(Recuerda, si no sabes lo que estás haciendo, no lo hagas).

En el archivo functions.php del theme de WordPress debes implementar las siguientes líneas de código:

Ahora debes añadir las siguientes media-querys al CSS del theme:

En este caso debes usar los shortcodes para que las imágenes sean .
Debes tener en cuenta que los tamaños especificados en el CSS son totalmente variables dependiendo del theme donde vamos a implementar esta solución, por esta razón implementar este shortcode es simplemente para usuarios con conocimientos medio-avanzados que conocen a fondo WordPress.

Si buscas a alguien que te pueda ayudar a resolver los problemas de tu instalación de WordPress contacta con nosotros y te informaremos sin compromiso de nuestras tarifas y disponibilidad.

[Total: 9 Promedio: 4.6]
Mi nombre es Alvaro Fontela, soy consultor Wordpress y blogger activo desde hace años. Co-Fundador de Raiola Networks, escribiendo sobre Wordpress en este blog día tras día.

Utilizamos cookies propias y de terceros para obtener información estadística, mostrar publicidad personalizada a través del análisis de tu navegación, así como para interactuar en redes sociales. Si continúas navegando, consideramos que aceptas nuestra Política de cookies. ACEPTAR

Aviso de cookies