• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Añadir una clase CSS personalizada a la imagen destacada en WordPress

Aprende en este tutorial cómo aplicar una clase CSS personalizada a la imagen destacada en WordPress cuando usas la función wp_get_attachment_image.

En algunos de los tutoriales anteriores has utilizado la función de WordPress wp_get_attachment_image para mostrar la imagen destacada de una entrada o incluso de una categoría.

En estos casos, si quieres utilizar unos estilos determinados con estas imágenes destacadas, la solución ideal es crear y asignar una clase CSS personalizada para esa función.

De esta manera puedes maquetar las imágenes destacadas de forma específica e independiente al resto de imágenes de la entrada utilizando un nuevo selector de CSS.

¿Te interesa? Entonces, sigue leyendo:

Snippet para agregar una clase CSS personalizada a la imagen destacada en WordPress

La función wp_get_attachment_image tiene 4 parámetros:

  • $attachment_id -> la ID de la imagen
  • $size -> el tamaño de la imagen
  • $icon -> si la imagen debe tratarse como icono
  • $attr -> atributos del marcado de la imagen

Solo el primero de ellos es obligatorio, el resto es opcional. Esto es lo que retorna por defecto:

<img width="150" height="150" src="http://example.com/wp-content/uploads/2021/11/image-sample-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="" srcset="http://example.com/wp-content/uploads/2021/11/image-sample-150x150.jpg 150w, http://example.com/wp-content/uploads/2017/11/image-sample-50x50.jpg 50w" sizes="(max-width: 150px) 100vw, 150px" />

En la mayoría de los casos se usa añadiendo también el tamaño:

wp_get_attachment_image( $image_id, $size );

Pero si quieres añadirle una clase personalizada tienes que hacerlo así:

Para ver este código y los otros 1803 snippets de esta web,
identifícate o suscríbete aquí.

Ya lo tienes.

Con este código aplicas una clase personalizada de CSS a la imagen destacada.

Puedes cambiar «clase-personalizada» por lo que tú quieras y usar ese selector de CSS para dar los estilos que deseas.

Conclusiones

Como ves, con un simple snippet de código puedes añadir una clase CSS que te permita maquetar a tu gusto la imagen destacada en WordPress cuando usas la función wp_get_attachment_image.

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

CSS Imagen destacada PHP WordPress

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?