Wordpress en su versión 2.9 ha añadido una nueva característica, la posibilidad de insertar miniaturas en lo artículos, lo que hace mucho más fácil realizar miniaturas. Hay muchas formas de diseñar miniaturas, de hecho, os mostraré una técnica para darles un toque estético en 5 minutos con CSS, muy sencilla.

Código CSS

Primero crearemos el “esqueleto” de las miniaturas, con el que definiremos el ancho, alto y su colocación:

.post-thumbnail {
width: 200px;
height: 150px;
float: left;
margin: 0 20px 0 20px;
}

Después añadiremos el CSS necesario para cuando posicionemos el cursor encima de la miniatura. Es necesario crear la imagen transparente (PNG) para cuando que, cuando se mueva el cursor encima de la miniatura, se muestre. Obviamente la imagen transparente debe tener el mismo ancho y alto que la miniatura en sí. Puedes tomar como referencia esta imagen transparente que se usa en la plantilla para WordPress llamada TV Elements (allí podéis comprobar como funciona la miniatura si os desplazáis hacia abajo y mantenéis el cursor sobre una miniatura).

.post-thumbnail-frame {
background: url(images/post-thumbnail-frame.png) 0 0;
width: 200px;
height: 150px;
position: absolute;
}
.post-thumbnail-frame:hover {
background: url(images/post-thumbnail-frame.png) 0 -150px;
}

Código HTML

Finalmente para integrarlo en WordPress, únicamente deberemos editar el archivo index.php, si queremos que aparezca en la portada, insertando este código encima de la etiqueta < ?php the_content(' '); ?>

<div class="post-thumbnail">
  <a class="post-thumbnail-frame" href="<?php the_permalink() ?>" 
         title="< ?php the_title_attribute(); ?>"></a>
  < ?php the_post_thumbnail(); ?>
</div>

Y listo, ya tendremos nuestra miniatura en los artículos, ¿os resulta sencillo?.

Vía | Woork