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
Muchas gracias, me re sirvió 😀
Gracias a ti, por darme la idea 😀
Una consulta, según el paso 1 solo le tengo que decir a wordpress que esa imagen que estoy subiendo debe agregarla como imagen destacada, en mi caso cuando selecciono la imagen y presiono el botón «imagen destacada» se queda pensando y no logra subir la imagen, cual puede ser el motivo?
Mmm, intenta desactivar el JS o actualizar tu WP.
HOLA
Quisiera saber como se utilizaria esto para un thumb de una pagina? Gracias
Una pagina simple, no WordPress? no te entendi muy bien, explicate por favor.
Bien explicado, al punto y claro, muy bien