El thumbnail es la imagen en miniatura que acompaña a cada entrada en WordPress, el problema es que esta disponible no viene por defecto, para activarla se tienen que hacer ciertas modificaciones en el theme, en este tutorial aprenderemos a activarla e implementarla de la forma rápida y sencilla posible.
Paso 1. Activar los thumbnails
Lo primero que tenemos que hacer es activar los thumbnails, para ello basta con agregar una sola linea en el archivo functions.php:
<?php add_theme_support( 'post-thumbnails' ); ?>
Luego si vamos al Dashboard y editamos o creamos una Entrada o Pagina nueva deberiamos ver en la esquina inferior derecha algo como esto:
Aqui simplemente subimos y definimos(«Usar como imagen destacada») la imagen que acompañara a esta Entrada.
Paso 2. Implementar los thumbnails
Una vez hayamos definido los thumbnail a las entradas, lo que queda es llamar a estos thumbnails dentro del Loop* de WordPress, esto normalmente deberia estar en el archivo index.php con un codigo similar a este:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
// El Loop
<?php endwhile; ?>
<?php endif; ?>
*El Loop o Bucle en español, es el código que se encarga de obtener las entradas/paginas y mostrarlas donde se le ponga, en la mayoría de los themes se encuentra en el index.php, dentro de el Loop se pueden llamar a etiquetas como the_title();(titulo de la entrada) y en este caso llamaremos a the_post_thumbnail(); para mostrar la «Imagen destacada».
Dentro del Loop buscamos un espacio para ubicar <?php the_post_thumbnail(); ?>:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="post">
<?php the_post_thumbnail(); ?>
<div class="content"><?php the_content(); ?></div>
</div>
<?php endwhile; ?>
<?php endif; ?>
Esto nos resultaria en una etiqueta HTML como esta:
<img width="200" height="200" src="URL-de-la-imagen" class="wp-post-image">
Es importante notar que WordPress le asigna la clase .wp-post-image a la Imagen destacada, facilitándonos la estilización de la misma:
.wp-post-image{
float: left;
margin-right: 30px;
}
Y si queremos que la imagen sea un enlace a la entrada solo la tendriamos que envolverla en un <a href=’ ‘> que apunte al permalink:
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
Esta función tambien soporta parametros, por ejemplo si hemos subido una imagen demasiado grande podemos llamar a los diferentes tamaños que WordPress genera de la imagen:
the_post_thumbnail(); // por defecto
the_post_thumbnail('thumbnail'); // 150px x 150px
the_post_thumbnail('medium'); // 300px x 300px
the_post_thumbnail('large'); // 640px x 640px