Imagenes Responsive en Wordpress

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.

Articulos relacionados

Si te ha gustado este post, aquí tienes otros que pueden interesarte. ¡No pares de aprender!

Guía de WP-CLI: Administra WordPress desde tu terminal

Guía de WP-CLI: Administra WordPress desde tu terminal

Al trabajar con WordPress, la forma más habitual de interactuar con la aplicación…
Instagram para WordPress

Instagram para WordPress

Instagram es una de las reinas de las redes sociales. La avalan sus…
Heatmap o mapa de calor para tu web

Heatmap o mapa de calor para tu web

Muchas de las técnicas y metodologías analíticas más avanzadas, con las que solo…
Rank Math : uno de los mejores plugins de SEO para WordPress

Rank Math: uno de los mejores plugins de SEO para WordPress

¡Muy buenas! Hoy vengo a hablarte de Rank Math, un plugin SEO gratuito,…
Share on twitter
Compartir en Twitter
Share on facebook
Compartir en Facebook
Share on pinterest
Compartir en Pinterest

¿Te gusta el blog?

Apúntate al boletín y te enviaremos los mejores artículos una vez al mes.

Artículos destacados

Galeria de imágenes

Crea una galería de imágenes para tu web

htaccess wordpress

htaccess por defecto o predeterminado de WordPress

memory_limit wordpress

Ajustar el memory_limit o límite de memoria utilizable de WordPress

modo-mantenimiento-wordpress

Cómo poner WordPress en modo mantenimiento [Tutorial]

Ilustración de calendario y brazo

6 plugins gratuitos para coger reservas online con Wordpress

¿Te ayudamos?

Escríbenos si tienes dudas o necesitas una solución específica. Nuestros expertos te ayudarán en todo lo posible.

Sé el primero en enterarte de ofertas, sorteos y novedades.

Tenemos 13 comentarios en

"Imagenes Responsive en Wordpress"

13 respuestas

  1. Artículo muy interesante.
    Tengo muchas ganas de probar vuestro servicio, lo que sucede es que ya tengo dos hostings distintos ahora mismo y quizá no necesite más… a poco que me vayan bien las cosas, no dudéis que os probaré.

    1. Hola Antonio, pues la verdad, no se decirte, ya que la mayoría de themes ya integran este tipo de funcionalidades y llevo algo de tiempo sin usar ningún plugin de este tipo, quizás el mas cercano que he usado últimamente han sido Imsanity.

      Un saludo.

  2. deberias de colocar el codigo en texto no en imagen ya que esto dificulta el poder transcribir el codigo. buen post, pero usa mas texto para el codigo no imagenes

    1. Hola, este es un articulo antiguo, ahora mismo usamos quotes de código en lugar de imágenes, en breves lo actualizaremos.

      Un saludo.

  3. Sabeis de algun plugin para en el editor de posts poder indicar si se carga en una pantalla de pc cargar una imagen o en un movil otra algo distinta (no la misma adaptándola).

    1. Hola Julio, con un plugin de condicionales o con un editor visual como Elementor Pro podrías hacerlo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *