El wp_get_attachment_image es una función de WordPress que le permite recuperar y mostrar fácilmente archivos adjuntos de imágenes en función de sus ID.
Ya sea que esté creando un tema personalizado o un complemento, esta función proporciona una forma flexible de mostrar imágenes con tamaños y atributos personalizados.
En este tutorial, repasaremos los wp_get_attachment_image() función y explicar sus parámetros. También proporcionaremos algunos casos de uso populares que puede probar en su sitio web alojado de WordPress.
Parámetros de la función wp_get_attachment_image
La función wp_get_attachment_image() permite a los usuarios recuperar un HTML imagen elemento para un archivo adjunto de imagen.
wp_get_attachment_image( int $attachment_id, string|int[] $size="medium", bool $icon = false, string|array $attr="" );
Por defecto, el wp_get_attachment_image() La función requiere al menos un parámetro, el ID del archivo adjunto, que es el identificador único de la imagen. Luego, la función genera la imagen de tamaño completo sin atributos HTML adicionales ni personalización.
Además, puede agregar varios parámetros adicionales para personalizar la salida de la imagen, como el tamaño de la imagen, la clase CSS o el texto alternativo:
$adjunto_id
Esto es necesario para especificar el ID de la imagen del archivo adjunto que se mostrará. Si el parámetro está vacío o establecido en FALSOla función no devolverá ninguna imagen.
$tamaño
Un parámetro opcional que define el tamaño de la imagen de WordPress para mostrar. Puede especificar cualquier nombre de tamaño de imagen registrado, por ejemplo, miniatura, medio, grande, o un tamaño personalizado en píxeles.
$icono
Otro parámetro opcional que determina si la imagen debe tratarse como un icono. Si se establece en verdaderola función mostrará el icono de archivo adjunto en lugar de la imagen real.
$atributo
Este parámetro le permite agregar más atributos a la etiqueta de la imagen, como una clase o un estilo. Puede pasar una matriz de pares clave-valor para agregar los siguientes atributos:
clase – maneja la clase CSS de la etiqueta de imagen. Puede agregar varias clases creando una lista separada por espacios.
alternativa – establece el texto alternativo de la imagen. Un valor de atributo alt es importante para la accesibilidad y el SEO de WordPress.
srcset – especifica múltiples fuentes de imagen con diferentes resoluciones, tamaños o relaciones de aspecto. El navegador elegirá automáticamente la mejor fuente según la resolución de pantalla del dispositivo.
tamaños – trabaja junto con el srcset atributo. Especifica el tamaño de la imagen que se muestra en una página en función del espacio disponible.
cargando – determina cómo se carga la imagen. Por ejemplo, el valor predeterminado es perezoso para carga perezosa.
descodificación – le permite especificar cómo el navegador debe interpretar la imagen. Los valores válidos son asíncrono para decodificar la imagen asincrónicamente, sincronizar para decodificar la imagen sincrónicamenteo auto.
Cómo usar wp_get_attachment_image
En esta sección, explicaremos cómo usar el wp_get_attachment_image() funcionar con eficacia. Consulte el código comentado a continuación para obtener más información:
<?php
if ( has_post_thumbnail() ) { // check if the post has a featured image
$thumbnail_id = get_post_thumbnail_id(); // get the ID of the post thumbnail image
$image = wp_get_attachment_image( $thumbnail_id, 'large' ); // get the HTML code for the post default thumbnail image
echo $image; // display the image
}
?>
Aquí está lo que hicimos:
Usó la función has_post_thumbnail() para verificar si la publicación tiene una imagen destacada. Se aplicó get_post_thumbnail_id() para obtener el ID de la imagen destacada. Usé la wp_get_attachment_image() para obtener el código HTML de la imagen. Pasaron la $thumbnail_id variable como el ID de la imagen y grande como el tamaño especificado. empleado eco para enviar el código HTML de la imagen a la página.
Recuerda que puedes reemplazar el grande parámetro con cualquier tamaño de imagen registrado.
Ejemplos de la función de WordPress wp_get_attachment_image
Vea algunos casos de uso populares para el wp_get_attachment_image() función para comprender cómo puede ayudarlo con sus proyectos de WordPress.
Salida de una imagen HTML lista para usar
La forma más sencilla de probar el wp_get_attachment_image() La función es pasarle una ID de archivo adjunto de imagen.
<?php echo wp_get_attachment_image( 37);?>
Recuerde que no proporcionamos ningún tamaño de imagen específico en este ejemplo. Por lo tanto, la función recuperó la imagen de tamaño completo con el adjunto ID 37.
En HTML, la salida se verá así. El texto alternativo existirá si ya está agregado:
<img width="500" height="500" src="http://example.com/wp-content/uploads/2023/03/image.jpg" class="attachment-full size-full" alt="Alt Attribute">
De forma predeterminada, HTML establece las imágenes de tamaño completo en 500 píxeles de ancho y 500 píxeles de alto. Sin embargo, los valores reales de ancho y alto en píxeles pueden variar según sus dimensiones originales.
Usar un tamaño personalizado
Las imágenes de tamaño personalizado pueden mejorar el rendimiento del sitio web al reducir los tiempos de carga de la página y mejorar el aspecto general. También aseguran la coherencia entre diferentes dispositivos y pantallas:
<?php echo wp_get_attachment_image( 37, [ 100,100 ], true); ?>
En HTML, la salida se verá así:
<img width="40" height="40" src="http://example.com/wp-content/uploads/2023/03/image.jpg" class="attachment-thumbnail size-thumbnail" alt="Description for the alt text">
En este caso, el segundo parámetro de la wp_get_attachment_image() La función es una matriz que contiene el ancho y el alto en píxeles del tamaño de imagen solicitado. El tercer parámetro se establece en verdaderolo que significa que la función recortará la imagen a las dimensiones exactas especificadas en la matriz.
Así es como se ve en un sitio web en vivo:
Mostrar todas las imágenes asociadas con la publicación
Puede mostrar todas las imágenes asociadas con una ID de publicación específica. Si lo hace, le permite ver todas las imágenes relevantes sin navegar a través de toda la publicación.
<?php
$attachments = get_attached_media('image', get_the_ID());
if (!empty($attachments)) {
foreach ($attachments as $image) {
echo wp_get_attachment_image($image->ID, 'full');
}
}
?>
En este ejemplo, el código recupera todas las imágenes adjuntas de la publicación actual usando la función get_attached_media() y las recorre usando un bucle foreach.
Para cada imagen, llama al wp_get_attachment_image() función para recuperar la versión de tamaño completo de la imagen con el ID del archivo adjunto.
Especificación de los atributos Class, Alt y Title de una imagen
También es posible especificar atributos personalizados de clase, texto alternativo y título para una imagen. Todo lo que necesita hacer es establecerlos en una variable. En nuestro caso, su $personalizado:
<?php $custom = [ 'class' => 'my-class', 'alt' => 'alt text', 'title' => 'my title' ]; echo wp_get_attachment_image( 37, 'medium', false, $custom ); ?>
En este ejemplo, el cuarto parámetro es una matriz que contiene los atributos adicionales para el etiqueta.
Conclusión
wp_get_attachment_image() es una función versátil de WordPress que le permite mostrar fácilmente imágenes adjuntas a publicaciones o páginas.
En este tutorial, hemos cubierto el wp_get_attachment_image() función y sus parámetros. También proporcionamos algunos casos de uso que puede probar en su sitio web de WordPress.
Esperamos que este tutorial le haya resultado útil. En caso de que tenga alguna pregunta, deje un comentario a continuación.
