Cómo obtener la URL de la imagen destacada de un post en WordPress

Por regla general no nos va a hacer falta conocer la URL de una imagen destacada de un post, la función the_post_thumbnail() de WordPress lo hacer por nosotros y con eso nos basta, pero hay ocasiones en las que tenemos que saber la dirección URL de la imagen destacada.

Cuándo debemos obtener la dirección de una imagen destacada

Puede hacer falta obtener la dirección de la imagen destacada de un post de WordPress cuando queremos modificar un theme o cuando lo creamos desde cero, para ciertas funcionalidades en el diseño que requieren de esa dirección.

La URL de la imagen destacada se obtiene de la siguiente manera:

<?php
  global $post;
  $thumbID = get_post_thumbnail_id( $post->ID );
  $imgDestacada = wp_get_attachment_image_src( $thumbID, 'full' ); // Sustituir por thumbnail, medium, large o full
  $pathImgDestacada = $imgDestacada[0];
?>

La función wp_get_attachment_image_src devuelve un array con la siguiente estructura:

• [0] => URL del tamaño de la imagen que seleccionemos.
• [1] => Ancho de la imagen.
• [2] => Alto de la imagen.

Esto puede usarse, por ejemplo, para poner la imagen destacada de fondo en el post, lo cual se puede hacer así:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <style>
    #post-<?php the_ID(); ?>::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 10, 0.5), #00000a),
                        url( <?php echo $pathImgDestacada; ?> );
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      opacity: 1;
    }
  </style>

  // Aquí va el resto del HTML 

</article>

Con este código, debidamente implementado, se puede poner la imagen destacada como fondo del post en cuestión. Utilizo el ID del post para hacer el ::before porque es único, de esa manera me aseguro de que sólo se aplique en ese post. Si lo pusiera en una clase lo aplicaría a todos los posts la misma imagen. (Lo sé por experiencia)

¿Qué otras utilidades tiene?

Obtener la URL del post siguiente y anterior

Poder conseguir la URL de la imagen destacada de un post tiene una utilidad muy interesante. Imagina que podemos obtener las direcciones del siguiente y anterior post. Podemos modificar la navegación entre post, es decir, en lugar del típico Previous y Next (Anterior y Siguiente) podemos hacer algo similar a lo que tengo yo en esta web, en la cual muestro la imagen y el título del post anterior y del post siguiente.

Esto se haría con el siguiente código:

<?php
  $prev_post = get_previous_post();
  $thumbIDPrev = get_post_thumbnail_id( $prev_post->ID );
  $permaPrev = get_permalink( $prev_post->ID );
  $imgDestacadaPrev = wp_get_attachment_image_src( $thumbIDPrev, 'medium' );
  $TitlePrev = get_the_title( $prev_post->ID );

  $next_post = get_next_post();
  $thumbIDNext = get_post_thumbnail_id( $next_post->ID );
  $permaNext = get_permalink( $next_post->ID );
  $imgDestacadaNext = wp_get_attachment_image_src( $thumbIDNext, 'medium' );
  $TitleNext = get_the_title( $next_post->ID );
?>

Donde

• $permaPrev => Permalink del post anterior.
• $imgDestacadaPrev => Imagen destacada del post anterior.
• $TitlePrev => Título del post anterior.
• $permaNext => Permalink del post siguiente.
• $imgDestacadaNext => Imagen destacada del post siguiente.
• $TitleNext => Título del post anterior.

Con esas variables, nuestra creatividad y nuestro conocimiento de HTML y CSS podemos hacer la navegación entre posts sea algo más que el típico «Siguiente» y «Anterior», podemos incluir las imágenes y los títulos.