• Como

    Como Implementar Thumbnails en tu Theme de WordPress

    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

    Puedes descargarte el theme desde aquí, para que lo puedas probar y ver con mas detalle.

  • Josue Ochoa

    Hola, soy el editor de este blog, trabajo como desarrollador web freelance, sígueme en Twitter.

  • Tal vez te interese