WordPress tiene una característica incorporada llamada "imágenes destacadas" que te permite asignar una imagen específica para cada publicación o página de tu sitio. Puedes utilizar esta imagen como una miniatura para representar la publicación en una lista de publicaciones, o como un banner en la página de detalles de la publicación.

Para asignar una imagen destacada a una publicación en particular, sigue estos pasos:

1. Abre la publicación para la que deseas asignar una imagen destacada.

2. Busca el botón "Añadir nuevo" en la barra lateral y selecciona "Media".

3. Selecciona o sube la imagen que deseas utilizar como imagen destacada y haz clic en "Añadir a la publicación".

4. Haz clic en el botón "Editar" en la publicación.

5. En la sección "Imagen destacada" en la parte superior de la pantalla, selecciona la imagen que acabas de subir.

6. Haz clic en el botón "Actualizar" para guardar los cambios.

La imagen destacada se mostrará en la página de detalles de la publicación y también en cualquier lista de publicaciones donde aparezca la publicación.

También puedes usar funciones específicas o plugins para trabajar con estas imagenes en tu plantilla de Wordpress.

Función the_post_thumbnail()

La función the_post_thumbnail() es una etiqueta de plantilla en WordPress que se utiliza para mostrar la imagen destacada asociada a una publicación o página.

the_post_thumbnail( string|int[] $size = 'post-thumbnail', string|array $attr = '' )

$size string|int[] Opcional
El tamaño de la imagen a mostrar. Por defecto: 'post-thumbnail'

$attr string|array Opcional
String o array de atributos.

the_post_thumbnail('post-thumbnail',['class' => 'clase', 'title' => 'titulo de la imagen', 'alt' => 'Texto alternativo']);

El primer argumento es un parámetro de tamaño que especifica el tamaño de la imagen a mostrar (en este caso 'post-thumbnail'). El segundo parámetro es un arreglo de atributos que se pueden agregar a la imagen, como una clase, un título y un texto alternativo.

El código proporcionado mostrará la imagen destacada de la publicación o página actual utilizando el tamaño 'post-thumbnail' y agregará la clase 'clase' , title 'titulo de la imagen' y 'alt' => 'alternativo' como atributos a la imagen. Esto puede ser útil para agregar diseño adaptable a la imagen y también para agregar información de accesibilidad a la imagen.

Esta función se utiliza típicamente dentro del loop, de manera que muestra la imagen destacada de la publicación actual que se está procesando.

Tamaños

//Por defecto en WordPress
the_post_thumbnail( 'thumbnail' );     // (150 x 150)
the_post_thumbnail( 'medium' );        // (300 x 300)
the_post_thumbnail( 'medium_large' );  // (768 x 0)
the_post_thumbnail( 'large' );         // (1024 x 1024)
the_post_thumbnail( 'full' );          // Resolución original

//Por defecto en WooCommerce
the_post_thumbnail( 'shop_thumbnail' ); // (180 x 180)
the_post_thumbnail( 'shop_catalog' );   // (300 x 300)
the_post_thumbnail( 'shop_single' );    // (600 x 600)

//Otra resolución
the_post_thumbnail( array(100, 100) ); 

 Función wp_get_attachment_image_src()

wp_get_attachment_image_src( int $attachment_id, string|int[] $size = 'thumbnail', bool $icon = false ): array|false

$attachment_id int Requerido
    ID de la imagen.

$size string|int[] Opcional
    Tamaño de la imagen. Por defecto 'thumbnail'.

$icon bool Opcional
    Si se quiere usar un icono.

$imagen = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
echo '<img src="' . $imagen['0'] . '">';

Para obtener la URL de la imagen destacada asociada a la publicación o página actual. La función get_post_thumbnail_id se utiliza para recuperar el ID de adjunto de la imagen destacada, y se pasa como primer parámetro a la función wp_get_attachment_image_src. El segundo parámetro, 'full', es el tamaño de la imagen. Devuelve un arreglo donde el primer elemento es la url de la imagen.

Luego, el código crea un elemento HTML img y la url de la imagen se establece como el atributo src. Finalmente, es imprimido en el navegador, de esta manera se mostrara la imagen en el navegador.

Este código también se utiliza típicamente dentro del loop, de manera que recupera y muestra la imagen destacada de la publicación actual que se está procesando. Es similar a the_post_thumbnail pero puede agregar propiedades y estilos personalizados a la imagen.