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