Agregar thumbnails al diseño del theme en Wordpress

Para mejorar el theme de nuestro blog WordPress, una de las cosas más vistosas y funcionales que últimamente se esá poniendo muy de moda son los thumbnails para los posts - podríamos decir que son una imagen que asociamos a un post para identificarlo. Nos ofrecen diferentes ventajas:

• Nos dan más libertad en el diseño en cuanto a que la imagen no tiene que estar dentro del contenido del post.
  
• Nos dan más libertad en el diseño en cuanto a que la imagen se puede adaptar en dimensiones a donde la queramos poner. Esto quiere decir que en el home del blog la imagen puede ser de 125px x 125px y en la página del post 200px x 200 px.
  
• Nos "obligan" a currarnoslo para poner una imagen como mínimo para cada post - según se cuenta esto es bastante importante.

Dicho lo dicho, vamos a ver como funciona Simple Post Thumbnails, un plugin para WP que nos ayuda con este tema. La parte de la instalación me la voy a saltar porque es la misma que para cualquier otro plugin para WordPress. Tenemos que tener en cuenta:

Configurando Simple Post Thumbnails

En Opciones>Thumbnail Options podemos:

• Escojer la imagen que se mostrará por defecto si no insertamos un thumbnail a un post. insertamos la URL de la imagen y listos.
  
• Escojer el formato de los thumbnails. Así, si por ejemplo subimos una imagen en PNG, podemos convertirla en JPG para mostrarla. Podemos escojer convertirlas en JPG, PNG o GIF (se recomienda la primera para fotos). En nuestr ejemplo vamos a usar 200px x 200px
  
• Escojer la altura y ancho de los thumbnails a la hora de guardarlos. Luego se podrán modificar a la hora de mostrarlos.

Cómo subir los thumbnails

A la hora de escribir o editar un post en el panel de administración de WordPress, una vez instalado el plugin, encontraremos una nueva caja para subir el archivo desde nuestro ordenador o desde una URL ¡Más sencillo imposible!

Insertar los thumbnails en el diseño de nuestro blog

Miren la parte de nuestro código en que se muestra un post en el index.php de nuestro blog. Imaginemos que queremos mostrar su thumbnail a la izquierda a un tamaño de 125x125 (aunque anteriormente hemos configurado que los thumbnails serían guardados a 200x200). El código original que teníamos era:

Código :

 <div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></p>

--------------------------------------------------------------------------------------------------------------------
<?php the_content('Read the rest of this entry &raquo;'); ?>

<p><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
</div>

Esto hace que en nuestro blog se vea lo siguiente:


El código para mostrar un thumbnail es el siguiente:

Código :

p75GetThumbnail(int $IDdelPost, [int $ancho, [int $altura, [string $TipoDeArchivo]]])

Siguiendo con el ejemplo anterior, y poniendo la imagen a la izquierda, lo que hacemos, es obtener la URL de una imagen relacionada a un post x ($post->ID), de altura y ancho 125 px, añadirle el nombre del post (alt="<?php the_title_attribute(); ?>") y posicionarlo a la izquierda:

Código :

<div style="float: left;"><img src="<?php echo p75GetThumbnail($post->ID, 125, 125); ?>" alt="<?php the_title_attribute(); ?>" /></div>

Este código iría en la línea de guiones del código inicial. Sencillo, ¿verdad?

Y quedaría un poco feo - el diseño ya era feo de por si...


Pero vamos a ir un poco más allá. Como supongo que sabréis, el archivo single.php es el se encarga de la página de los posts - el que crea los permalinks, por así decirlo. Lo que vamos a hacer es que en esta página el thumbnail se ponga a la izquierda con unas dimensiones de 200px x 200 px. lo que veíamos originalmente en esta página (en la parte del post) es lo siguiente:


La parte original del post en esta página es:

Código :

 <div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
-----------------------------------------------------------------------------------------------------------
<?php the_content('<p>Read the rest of this entry &raquo;</p>'); ?>

<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
<?php the_tags( '<p>Tags: ', ', ', '</p>'); ?>

<p>
This entry was posted
<?php $entry_datetime = abs(strtotime($post->post_date) - (60*120)); echo time_since($entry_datetime); echo ' ago'; ?>
on <?php the_time('l, F jS, Y') ?> at <?php the_time() ?>
and is filed under <?php the_category(', ') ?>.
You can follow any responses to this entry through the <?php post_comments_feed_link('RSS 2.0'); ?> feed.

<?php if (('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
// Both Comments and Pings are open ?>
You can <a href="#respond">leave a response</a>, or <a href="<?php trackback_url(); ?>" rel="trackback">trackback</a> from your own site.

<?php } elseif (!('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
// Only Pings are Open ?>
Responses are currently closed, but you can <a href="<?php trackback_url(); ?> " rel="trackback">trackback</a> from your own site.

<?php } elseif (('open' == $post-> comment_status) && !('open' == $post->ping_status)) {
// Comments are open, Pings are not ?>
You can skip to the end and leave a response. Pinging is currently not allowed.

<?php } elseif (!('open' == $post-> comment_status) && !('open' == $post->ping_status)) {
// Neither Comments, nor Pings are open ?>
Both comments and pings are currently closed.

<?php } edit_post_link('Edit this entry','','.'); ?>
</p>

</div>

Supongo que ya tendréis claro que insertaríamos aquí... Obviamente:

Código :

<div style="float: right;"><img src="<?php echo p75GetThumbnail($post->ID, 200, 200); ?>" alt="<?php the_title_attribute(); ?>" /></div>

Y aquí lo tenemos:



Espero que hos haya gustado mi primer articulo. Realmente lo he hecho para ver que tal cuaja un post de este tipo. A lomejor tendría que probar con un screencast. Sea como fuere, decirme que tal hos ha parecido.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.