Cómo introducir thumbnails automáticos en tu plantilla Wordpress

Muchas plantillas Wordpress emplean una imagen en las entradas y justo antes de introducir el enlace “seguir leyendo…”, “Más…”, etc…

Si tu blog se encuentra en la misma situación, quizás te interese llevar a cabo dicha tarea.

Te estarás preguntando…, pero si en este blog se ven dichas imágenes, ¿no está ya implementado?. Bueno, lo cierto es que no y aunque nos ha gustado tras haber hecho las pruebas, de momento no es algo que vayamos a implementar, pero quizás más adelante sí.

Otros suelen emplear ciertos plugins como phpThumb o TinyThumb e incluso incluyendo un campo personalizado en la entrada para mostrar la imagen en miniatura.

Wordpress tiene su propia funcionalidad y puede generar dichas imágenes para que sean añadidas a la entrada. Esta funcionalidad está activada por defecto, pero debemos, configurarla para que comience a generar los thumbnails a medida que vayamos creando entradas.

Configurando los thumbnails…

Debemos ir a los ajustes multimedia: “Ajustes, Multimedia”, donde obtendremos una ventana similar a la imagen anterior. En ella configuramos el tamaño de la miniatura, según nuestra plantilla.

Una vez tengamos los ajustes predeterminados, debemos editar el fichero index.php con cualquier editor de texto y dentro del loop, es decir, dentro del siguiente código:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

Después del código anterior (loop de Wordpress) debemos introducir el siguiente código:

<?php

$files = get_children("post_parent=$id&post_type=attachment&post_mime_type=image");

if($files){

$keys = array_keys($files);

$num=$keys[0];

$thumb=wp_get_attachment_thumb_url($num);

print "<a href='".get_permalink()."' title='".get_the_title()."'><img src='$thumb' class='thumbnail' width='180' height='180' alt='".get_the_title()."' /></a>";

}else{
print "<a href='".get_permalink()."' title='".get_the_title()."'><img src='default.png' class='thumbnail' width='180' height='180' alt='' /></a>";

}

?>

Echando un vistazo al código…

A simple vista parece algo complicado, pero en realidad es bastante simple pero para no entrar demasiado en detalles podemos resumir un poco algunos de los valores más importantes:

• Lo primero de todo es la imagen por defecto, “default.png”, la cual podemos especificar una determinada, esto se hace para en el caso de que escribamos una entrada sin imagen, automáticamente se visualice la que tengamos por defecto.
• En segundo lugar disponemos de las variables height y width, las cuales nos indican el tamaño del thumbnail a crear, como podrás apreciar, en el código hemos asignado un tamaño de 180x180px, los cuales podrás cambiar por los que se ajusten a tu plantilla.

Estilizando el thumbnail…

Como no sabemos donde quedará ubicada la imagen, debemos estilizarla para ajustarla a la plantilla y para ello debemos introducir el siguiente código dentro de nuestro archivo CSS.

.thumbnail{
float: left;
margin: 10px;
}