Nuevo en Wordpress 2.9: Miniaturas de Entrada (Post Thumbnails)

Una de las principales novedades que nos ha ofrecido Wordpress 2.9 es la posibilidad de crear Miniaturas de Entrada (en inglés Post Thumbnails). ¿Qué son las Miniaturas de Entrada? Son las imágenes que veréis en muchos blogs asociadas a las distintas entradas de dicho blog en su página principal. Veamos por ejemplo nettuts+:

Vemos que cada entrada tiene asociada a su izquierda una imagen (marcada con un círculo rojo) que ayuda a describir mejor el artículo asociado, además de mejorar la imagen general del blog. Hasta ahora la manera más habitual de conseguir situar estas miniaturas era mediante Campos Personalizados. Ahora hay ya una funcionalidad completa e independiente para crear las Miniaturas de Entrada. Vamos a verla en detalle.

Para poder usar las Miniaturas de entrada tenemos que activarlas. Esto lo hacemos desde el archivo functions.php de nuestro tema. Escribimos:

1	if (function_exists('add_theme_support')) { add_theme_support('post-thumbnails'); }

Simplemente indica que si existe la función ‘add_theme_support’ se ejecute add_theme_support(‘post-thumbnails’). Lo habilitará tanto para páginas como para entradas. Si lo quieres sólo para uno de ellos:

1 2	add_theme_support( 'post-thumbnails', array( 'post' ) ); // Sólo para entradas add_theme_support( 'post-thumbnails', array( 'page' ) ); // Sólo para páginas

Ahora al ir a escribir o a editar una entrada, tendremos en la columna de la derecha una nueva ventana, llamada, como no, Miniatura de Entrada:

Si hacemos click sobre Establecer miniatura aparecerá la pantalla habitual para añadir una imagen. La seleccionamos y veremos entonces:

En la parte de abajo, junto a Insertar en la entrada, vemos el enlace Usar como miniatura. Ese es el enlace sobre el que hay que hacer click. Entonces veremos que en el cuadro de Miniatura de entrada aparece la imagen que hemos seleccionado:

Ahora ya tendremos la imagen asociada a nuestro artículo. Pero nos queda un último paso: tenemos que incluir unas líneas dentro del loop para que se muestre la miniatura de entrada. Para ello tonamos el archivo que muestre las entradas en nuestro tema (por ejemplo index.php) y buscamos el loop, es decir, lo incluido entre

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
// Aquí va lo que se llama el loop, es decir un bucle que muestra 
// las entradas de nuestro blog
<?php endwhile; ?>
<?php endif; ?>

Es ahí, dentro del loop, donde añadiremos un código que va a añadir la miniatura de cada entrada. Símplemente hay que escribir esta línea:

1	<?php the_post_thumbnail(); ?>

Un loop sencillo podría parecerse más o menos a esto:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> // Titulo de la entrada
<?php the_post_thumbnail(); ?> // Miniatura de entrada
<?php the_content(); ?> // El contenido de la entrada
<?php endwhile; ?>
<?php endif; ?>

Si, para estar seguros, queremos saber si la entrada o artículo en cuestión tiene una miniatura asociada, podemos hacer:

<?php
if ( has_post_thumbnail() ) {
// esta entrada tiene una miniatura, pondremos aquí
// un código que muestre la miniatura:
<?php the_post_thumbnail(); ?>
} else {
// esta entrada no tiene miniatura, podemos poner aquí
// algo alternativo, por ejemplo mostrar la miniatura mediante campos
// personalizados, como se hacía anteriormente, o una imagen
// genérica.
}
?>

Se puede seleccionar también el tamaño de la miniatura:

// Tamaño pequeño:
<?php the_post_thumbnail('thumbnail'); ?>
 
// Tamaño mediano:
<?php the_post_thumbnail('medium'); ?>
 
// Tamaño grande:
<?php the_post_thumbnail('large'); ?>
 
// Especificando el tamaño:
<?php the_post_thumbnail(array(225,225)); ?>

También se pueden añadir atributos como title y alt, así como una clase que nos servirá para dar estilo con nuestra hoja CSS:

// Aplicando una clase que llamaremos clase_miniatura en este caso:
<?php the_post_thumbnail('medium', array('class' => 'clase_miniatura')); ?>
 
// Definiendo los atributos title y alt:
<?php the_post_thumbnail('medium', array('class' => 'clase_miniatura', 'alt' => 'atributo_alt', 'title' => 'atributo_title')); ?>

En el caso de no asignar ninguna clase podemos dar estilo a la miniatura con .wp-post-image {}

Volvamos de nuevo al archivo functions.php de nuestro tema. Vimos al principio de todo que las Miniaturas teníamos que activarlas en dicho archivo. Podemos además especificar el tamaño de las miniaturas:

// Miniaturas redimensionadas a 50x50px 
set_post_thumbnail_size(50, 50); 
 
// Miniaturas cortadas a 50x50px
set_post_thumbnail_size(50, 50, true);

O asignar un tamaño concreto (también en functions.php):

1	add_image_size('custom-thumbnail', 300, 300);

Que usaríamos así dentro del loop (por ejemplo en index.php):

1	<?php the_post_thumbnail('custom-thumbnail'); ?>

Si queremos que en functions.php esté todo este código que hemos visto incluído de manera segura (es decir, tras comprobar que existe esa funcionalidad en nuestra versión de Wordpress), escribiríamos:

if (function_exists('add_theme_support')) { // a partir de WP 2.9
add_theme_support('post-thumbnails'); // activa las miniaturas
set_post_thumbnail_size(50, 50, true); // especifica su tamaño
add_image_size('custom-thumbnail', 500, 500); // tamaño concreto
}

Y para más seguridad, podemos poner como vimos antes, dentro del loop, el condicional que muestra las miniaturas. En el caso de que esta no exista podemos poner un plan alternativo, como puede ser una imagen de un campo personalizado:

if ((function_exists('has_post_thumbnail')) && (has_post_thumbnail())) {
the_post_thumbnail();
} else {
$postimageURL = get_post_meta($post->ID, 'post-image', true);
if ($postimageURL) {
echo '<img src="'.$postimageURL.'" alt="" />'; } }