Guía: Como mostrar miniaturas automaticas en WordPress

Ya muchas personas me preguntaron como hacer para mostrar miniaturas al lado de los post como por ejemplo tengo en las categorías de este blog. El asunto es bastante sencillo y no requiere más que un par de líneas de código que si bien son sencillas me llevaron más de un dolor de cabeza buscando en el codex de WordPress.

Lo primero que tenemos que hacer es definir donde queremos mostrar las miniaturas, puede ser en la pagina principal del blog, o como tengo yo, en las categorías y en el archivo, ahí voy a ejemplificar el tutorial.

Ahora empezamos a colocar los códigos, lo primero que debemos hacer es abrir el archivo que corresponde a los archivos del blog, en línea general y casi siempre se llama archive.php.

En este mismo archivo deberíamos incluir las líneas de código que coloco a continuación, es importante que estas se coloquen dentro del  loop del worpress, sino el código no funciona, una forma sencilla de colocarlo es inmediatamente arriba el titulo de la entrada, de esa forma nos garantizamos colocar el código en el lugar correcto.

Para el que no lo conoce el loop de WordPress tiene esta forma:

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

Y el código que muestra las miniaturas es el siguiente:

<?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 "<img src="$thumb" alt=".get_the_title()." width="90" height="90" />";
}else{
  print "<img src="default.png" alt="" width="90" height="90" />";
}
?>

El código es muy sencillo de entender, pero para no entrar en detalles le resumo lo mas importante para que puedan personalizar las miniaturas del blog.

• El width y el height son las medidas de la miniaturas, en el ejemplo es 90×90.
• La imagen alternativa, en el ejemplo default.png. Esto es importante, puesto que cuando el post no tenga ninguna imagen se mostrara esa en la miniatura. Por lo tanto les recomiendo que elijan una imagen bastante genérica, como en mi caso puede ser el logo del blog tranquilamente.

Una vez que hicimos esto si vemos el archivo del blog se tendría que mostrar la miniatura, probablemente en cualquier lugar ya que todavía no tenemos ningún estilo css asociado a estas imágenes. Para hacer esto hay varias formas, no puedo escribirlas porque depende en gran medida del theme en cuestión, pero no es complicado basta con crear una clase llamada thumbnail y listo. Por ejemplo:

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

Luego tendremos que jugar con posiciones, colores de enlaces, etc. Repito, no es complicado, pero depende de cada theme.

Un detalle: dependiendo del theme de nuestro blog la entrada se mostrara completa o no, en caso de mostrarse completa podemos reemplazar el código en el archive.php que dice:

<?php the_content(); ?>

Por este otro

<?php the_excerpt(); ?>

Y de esa forma se mostrara solo un extracto. Es muy sencillo y con un poco de paciencia podemos hacer que quede muy bien.

Un detalle para obtener mejores resultados, la miniatura la genera WordPress solo y al momento de subir la imagen al crear una entrada, esta miniatura viene de un tamaño determinado, si por ejemplo nosotros mostramos unas miniaturas de mayor tamaño esta se píxela un poco, basta con ir al tablero de WP opción Settings -> Media -> Cambiar el tamaño de las miniaturas por el que nosotros queremos utilizar, de esta forma quedan perfectas y de excelente calidad.

Cualquier duda en los comentarios 😀