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.

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.

¿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 11 comentarios en

"Imagenes Responsive en WordPress"

11 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.

Deja un comentario

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

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
covid19

#FrenarLaCurva