Saltar al contenido

Cómo utilizar la función wp_get_attachment_image en WordPress + Ejemplos útiles

wp_get_attachment_image es una característica de WordPress que le permite recuperar y mostrar fácilmente imágenes adjuntas según sus ID.

Ya sea que esté creando un tema personalizado o un complemento, esta función ofrece una forma flexible de mostrar imágenes con tamaños y atributos personalizados.

En este tutorial, veremos la función. wp_get_attachment_image() y te explicaremos sus parámetros. También le proporcionaremos algunos casos de uso populares que puede probar en su sitio web alojado en WordPress.

Descargue la hoja de referencia definitiva 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 elemento HTML imagen a una imagen adjunta.

wp_get_attachment_image( int $attachment_id, string|int[] $size="medium", bool $icon = false, string|array $attr="" ); 

Por defecto, la función wp_get_attachment_image() requiere al menos un parámetro, el ID del archivo adjunto, que es el identificador único de la imagen. La función muestra la imagen en 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 adjunta que se mostrará. Si el parámetro está vacío o configurado en FALSOla función no devolverá ninguna imagen.

$tamaño

Un parámetro opcional que define el tamaño de la imagen de WordPress que se mostrará. Puede especificar cualquier nombre de tamaño de imagen registrado, por ejemplo. miniatura, mediana, grande o un tamaño personalizado en píxeles.

Leer  Cómo poner en cola hojas de estilo CSS en WordPress usando wp_enqueue_style

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 del archivo adjunto en lugar de la imagen real.

$atributo

Este parámetro le permite agregar más atributos a la etiqueta de imagen, como una clase o estilo. Puede pasar una matriz de pares clave-valor para agregar los siguientes atributos:

  • aula– Maneja la clase CSS de etiqueta de imagen. Puede agregar varias clases creando una lista separada por espacios.
  • alternativo: Establece el texto alternativo de la imagen. Un valor de atributo alt es importante para fines de accesibilidad y SEO en WordPress.
  • conjunto de datos: especifica múltiples fuentes de imágenes con diferentes resoluciones, tamaños o relaciones de aspecto. El navegador elegirá automáticamente la mejor fuente según la resolución de pantalla de su dispositivo.
  • tamaños: Funciona en conjunto con el atributo srcset. Especifica el tamaño de la imagen que se muestra en una página según el espacio disponible.
  • cargando: Determina cómo se carga la imagen. Por ejemplo, el valor predeterminado es lento para carga diferida.
  • descodificación: le permite especificar cómo el navegador debe interpretar la imagen. Los valores válidos son asincrónico decodificar la imagen asincrónico, sincronizar decodificar la imagen sincrónicocualquier auto.

Cómo usar wp_get_attachment_image

En esta sección, explicaremos cómo utilizar la función. wp_get_attachment_image() efectivamente. Consulte el código 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
}
?>

Esto es lo que hicimos:

  1. Usa la función has_post_thumbnail() para comprobar si la publicación tiene una imagen destacada.
  2. Aplicar get_post_thumbnail_id() para obtener el ID de la imagen destacada.
  3. Usa la función wp_get_attachment_image() para obtener el código HTML de la imagen.
  4. pasar la variable $thumbnail_id como identificación de imagen y grande Según el tamaño especificado.
  5. Usar tiró para mostrar el código HTML de la imagen en la página.
Leer  Cómo poner en cola scripts usando el hook wp_enqueue_scripts en WordPress

Recuerda que puedes anular el parámetro. grande para cualquier tamaño de imagen registrado.

Ejemplos de funciones de WordPress wp_get_attachment_image

Consulte algunos casos de uso populares de la función wp_get_attachment_image() para comprender cómo puede ayudarle con sus proyectos de WordPress.

Genere una imagen HTML lista para usar

La forma más sencilla de probar la función. wp_get_attachment_image() es pasar una ID de archivo adjunto de imagen.

<?php echo wp_get_attachment_image( 37);?>

Recuerde que en este ejemplo no proporcionamos ningún tamaño de imagen específico. Por lo tanto, la función recupera la imagen en tamaño completo con el ID de archivo adjunto 37.

En HTML, el resultado se verá así. Existirá texto alternativo si ya está agregado:

<img width="500" height="500" src=" class="attachment-full size-full" alt="Alt Attribute">

De forma predeterminada, HTML define imágenes de tamaño completo como 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.

Ejemplo de función wp_get_attachment_image con dimensiones exactas

Utilice 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 la apariencia general. Además, garantizan la coherencia entre diferentes dispositivos y pantallas:

<?php echo wp_get_attachment_image( 37, [ 100,100 ], true); ?>

En HTML, el resultado se verá así:

<img width="40" height="40" src=" class="attachment-thumbnail size-thumbnail" alt="Description for the alt text">

En este caso, el segundo parámetro de la función. wp_get_attachment_image() es una matriz que contiene el ancho y el alto en píxeles del tamaño de imagen solicitado. El tercer parámetro se define como VERDADEROlo que significa que la función recortará la imagen a las dimensiones exactas especificadas en la matriz.

Leer  +30 de las mejores plantillas de WordPress para fotografía (2024)

Así es como se ve en un sitio web activo:

Ejemplo de función wp_get_attachment_image con dimensiones originales

Mostrar todas las imágenes asociadas con la entrada

Puede ver todas las imágenes asociadas con una ID de entrada específica. De esta manera, podrás ver todas las imágenes relevantes sin tener que navegar por la entrada completa.

<?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 entrada actual usando la función get_attached_media() y recorralos usando un bucle foreach.

Para cada imagen, llame a la función. wp_get_attachment_image() para recuperar la versión en tamaño completo de la imagen con el ID del archivo adjunto.

Especificar los atributos Clase, Alt y Título de una imagen

También puede especificar atributos personalizados de clase, texto alternativo y título para una imagen. Todo lo que necesitas hacer es configurarlos en una variable. En nuestro caso, es $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 de la etiqueta. .

1714728961 325 Los 20 mejores temas de WordPress para criptomonedas en 2024.webp

Conclusión

wp_get_attachment_image() es una característica versátil de WordPress que le permite mostrar fácilmente imágenes adjuntas a publicaciones o páginas.

En este tutorial, cubrimos la función. wp_get_attachment_image() y sus parámetros. También proporcionamos algunos casos de uso que puede probar en su sitio de WordPress.

Esperamos que este tutorial te haya resultado útil. Si tienes alguna pregunta, deja un comentario a continuación.

Compartir

Deja una respuesta