Recursos útiles para el desarrollo de temas

Funciones de WordPress para obtener la ruta de la imagen destacada y otros atributos

En WordPress las imágenes destacadas son fotos de muestra o miniaturas que pueden aparecen en varios lugares de una web, dependiendo del tema y su diseño. Por ejemplo, suelen encontrarse imágenes de este tipo en el lateral (entradas recientes o artículos relacionados), en listados de categorías o etiquetas, en entradas destacadas en la página de inicio, o incluso como fondo de una página.

La función para utilizar estas imágenes (en inglés «featured image» o «post thumbnail») es una de las más utilizadas en el desarrollo de temas para WordPress. Recuperar la imagen destacada desde las plantillas es sencillo, gracias a todas las funciones «prefabricadas» que están disponibles, pero a menudo necesitamos obtener otros atributos de la imagen, por ejemplo las dimensiones (anchura, altura), o la ruta de la foto en miniatura u otros tamaños.

Cómo obtener la ruta de la imagen destacada a cualquier tamaño

La función más conocida y fácil de utilizar a la hora de trabajar con imágenes destacadas en WordPress es the_post_thumbnail. Al incluirla en nuestras plantillas nos devuelve el código HTML ya formado, que incluye el tamaño, la ruta, las clases y el texto alternativo:

<img width="750" height="500" src="http://www.dominio.com/ruta/imagen/destacada.jpg" class="attachment-post-thumbnail wp-post-image" alt="" />

Pero muchas veces no será este código HTML lo que necesitamos, sinó cada atributo por separado. Por ejemplo, si sólo necesitamos la ruta completa de la imagen destacada a tamaño completo, una manera de obtenerla sería utilizando la función wp_get_attachment_url:

<?php 
// Ruta de la imagen destacada (tamaño completo)
global $post;
$thumbID = get_post_thumbnail_id( $post->ID );
$imgDestacada = wp_get_attachment_url( $thumbID );
echo $imgDestacada;
?>

Otro método un poco más versátil y preciso es recurrir a wp_get_attachment_image_src, que nos permite elegir fácilmente el tamaño de la imagen:

// Ruta de la imagen destacada (miniatura y otros tamaños)
global $post;
$thumbID = get_post_thumbnail_id( $post->ID );
$imgDestacada = wp_get_attachment_image_src( $thumbID, 'TAMAÑO' ); // Sustituir por thumbnail, medium, large o full
echo $imgDestacada[0];

En este caso tenemos que sustituir la palabra «TAMAÑO» por una de estas cuatro posibilidades:

  • thumbnail: si necesitamos la ruta de la miniatura
  • medium: tamaño mediano
  • large: tamaño grande
  • full: tamaño completo, es decir, tal como se ha subido la foto al sistema. En este caso conviene ir con cuidado porque la imagen podría ser muy grande y pesada.

Para no repetir el código anterior cada vez que queremos utilizarlo en una plantilla, lo suyo sería incluirlo en forma de función en el archivo functions.php del tema que esté activado:

/*
 * Función para imprimir la ruta de la imagen destacada.
 * Ejemplo de utilización: echo atrib_imagen_destacada();
 */
function atrib_imagen_destacada() {
	global $post;
	$thumbID = get_post_thumbnail_id( $post->ID );
	$imgDestacada = wp_get_attachment_image_src( $thumbID, 'thumbnail' ); // Sustituir por thumbnail, medium, large o full
	return $imgDestacada[0]; // 0 = ruta, 1 = altura, 2 = anchura, 3 = boolean
}

Después, para obtener la ruta (u otro de los atributos que ahora veremos) bastaría añadir en el punto de la plantilla deseado:

echo atrib_imagen_destacada();

Cómo obtener la altura o anchura de la imagen destacada

La función anterior no sólo devuelve la ruta de la imagen destacada. En realidad se trata de un array (vector, matriz) que ofrece cuatro datos o atributos relacionados con estas fotos de muestra. Podemos acceder a ellos cambiando el cero que aparece al lado de la variable «imgDestacada»:

  • En la posición [0] devuelve la ruta de la imagen al tamaño seleccionado
  • En la posición [1] nos devuelve la altura en pixels
  • En la posición [2] nos devuelve la anchura en pixels
  • En la posición [3] nos devuelve «false» si la imagen no es el tamaño original o si no está disponible

Por tanto, en el ejemplo anterior sólo tendríamos que cambiar la variable $imgDestacada[0] en la linea 9.

Aquí podemos ver las cuatro posibilidades:

// Atributos de la imagen destacada (ruta, altura, anchura, boolean)
global $post;
$thumbID = get_post_thumbnail_id( $post->ID );
$imgDestacada = wp_get_attachment_image_src( $thumbID, 'full' ); // thumbnail, medium, large, full
echo 'Ruta: ' . $imgDestacada[0] . "\n";
echo 'Altura: ' . $imgDestacada[1] . 'px.' . "\n";
echo 'Anchura: ' . $imgDestacada[2] . 'px.' . "\n";
echo 'Boolean: ' . $imgDestacada[3];

Recuerda que en WordPress los tamaños de las imágenes destacadas los define el usuario desde Ajustes > Medios.

Un paso más allá: incluir imágenes destacadas con lenguaje natural

¿Cómo podríamos mejorar esto para poder incluir atributos de las fotos destacadas más fácilmente, de una manera más intuitiva? Combinando las funciones anteriores, podríamos simplificar el código de nuestros temas para poder utilizar un lenguaje un poco más natural.

La idea es obtener información sobre la imagen destacada en una sola linea y que sea fácil de recordar. Por ejemplo: obtener la_imagen_destacada( ‘tamaño’, ‘atributo’ ).

La función en este caso podría ser:

/*
 * Función para obtener atributos de
 * la imagen destacada más fácilmente:
 * Ruta, tamaño, anchura, altura...
 * Utilización: echo la_imagen_destacada( 'thumbnail', 'url' )
 */
function la_imagen_destacada( $size = 'full', $attr = 'url' ) {

	global $post;
	$thumbID = get_post_thumbnail_id( $post->ID );
	$img_attributes = wp_get_attachment_image_src( $thumbID, $size );

	if ( $attr == 'url' ) $p = 0;
	elseif ( $attr == 'width' ) $p = 1;
	elseif ( $attr == 'height' ) $p = 2;
	elseif ( $attr == 'boolean' ) $p = 3;

	return $img_attributes[$p];

}

La función anterior nos permite recuperar cualquiera de los atributos disponibles así:

// Para obtener la ruta de la miniatura:
echo la_imagen_destacada( 'thumbnail', 'url' );

// Para recuperar la ruta de la imagen a tamaño completo:
echo la_imagen_destacada( 'full', 'url' );

// Si necesitamos la anchura de la miniatura:
echo la_imagen_destacada( 'thumbnail', 'width' );

// Si necesitamos la altura del tamaño medio
echo la_imagen_destacada( 'medium', 'height' );

Cómo activar las imágenes destacadas en WordPress

Lógicamente, todo lo anterior no sirve de nada si el tema que hemos creado no está preparado para utilizar imágenes destacadas.

Para que aparezca la caja (metabox) que hace posible gestionar estas imágenes desde las pantallas de edición de páginas y entradas es necesario que los temas declaren que están preparados para utilizarlas en las plantillas. Desde la versión de WordPress 2.9 es posible activarlas añadiendo una solo linea en functions.php o en cualquier archivo de funciones:

// Activar imágenes destacadas en páginas y entradas
add_theme_support( 'post-thumbnails' );

Más información (en inglés): https://codex.wordpress.org/Post_Thumbnails

Cómo obtener sólo las entradas que tienen asignada una imagen destacada

En muchos sitios web vemos frecuentemente que se muestran entradas destacadas o recientes en la página de inicio, con su correspondiente imagen. Cuando una de estas entradas no tiene imagen el diseño a veces queda desequilibrado o incompleto, y puede que no nos interese mostrarla.

Una manera sencilla para recuperar únicamente las entradas que tienen una imagen destacada asignada sería utilizar la función has_post_thumbnail() cuando generamos la consulta, especificando que se imprima la información (título, URL de la imagen, link, etc.) sólo si se da esta condición. Ejemplo:

	global $post;
	$args = array(
		'post_type'  => 'post',
		'posts_per_page' => 4
	);
	$newloop = new WP_Query( $args );
	while ( $newloop->have_posts() ) : $newloop->the_post();

		// Comprueba si la entrada tiene imagen destacada.
		if ( has_post_thumbnail() ) {

			$thumbID = get_post_thumbnail_id( $post->ID );
			$imgDestacada = wp_get_attachment_image_src( $thumbID, 'thumbnail' ); // Thumbnail, medium, large, full
			echo '<div class="entrada">';
			the_title();
			echo $imgDestacada[0]; // 0 = ruta, 1 = altura, 2 = anchura, 3 = boolean
			echo '</div>';

		}

	endwhile; wp_reset_postdata();

De esta manera podemos recuperar la lista de entradas con imagen destacada, dejando el resto fuera de la consulta.

Comentarios

Responder a yamila Cancelar la respuesta

Las URLs se convertirán en enlaces automáticamente. Tu dirección de email no se publicará ni se utilizará para enviar ningún tipo de información. Los mensajes que no aporten nada al tema que se trata en esta entrada se borrarán. Las imágenes que aparecen al lado de cada autor utilizan el servicio de Gravatar. Recuerda que puedes usar etiquetas HTML como <a href>, <code>, <em> o <strong> en los comentarios.

(necesario)

(opcional)

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.