Como introducir thumbnails automáticos en tu plantilla WordPress

Muchas plantillas WordPress emplean una imagen en las entradas y justo antes de introducir el enlace “seguir leyendo…”, “Más…”, etc…

Si tu blog se encuentra en la misma situación, quizás te interese llevar a cabo dicha tarea.

Te estarás preguntando…, pero si en este blog se ven dichas imágenes, ¿no está ya implementado?. Bueno, lo cierto es que no y aunque nos ha gustado tras haber hecho las pruebas, de momento no es algo que vayamos a implementar, pero quizás más adelante sí.

Otros suelen emplear ciertos plugins como phpThumb o TinyThumb e incluso incluyendo un campo personalizado en la entrada para mostrar la imagen en miniatura.

WordPress tiene su propia funcionalidad y puede generar dichas imágenes para que sean añadidas a la entrada. Esta funcionalidad está activada por defecto, pero debemos, configurarla para que comience a generar los thumbnails a medida que vayamos creando entradas.

Configurando los thumbnails…

thumbnails_automáticos

Debemos ir a los ajustes multimedia: “Ajustes, Multimedia”, donde obtendremos una ventana similar a la imagen anterior. En ella configuramos el tamaño de la miniatura, según nuestra plantilla.

Una vez tengamos los ajustes predeterminados, debemos editar el fichero index.php con cualquier editor de texto y dentro del loop, es decir, dentro del siguiente código:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

Después del código anterior (loop de WordPress) debemos introducir el siguiente código:

<?php

$files = get_children("post_parent=$id&post_type=attachment&post_mime_type=image");

if($files){

$keys = array_keys($files);

$num=$keys[0];

$thumb=wp_get_attachment_thumb_url($num);

print "<a href='".get_permalink()."' title='".get_the_title()."'><img src='$thumb' class='thumbnail' width='180' height='180' alt='".get_the_title()."' /></a>";

}else{
print "<a href='".get_permalink()."' title='".get_the_title()."'><img src='default.png' class='thumbnail' width='180' height='180' alt='' /></a>";

}

?>

Echando un vistazo al código…

A simple vista parece algo complicado, pero en realidad es bastante simple pero para no entrar demasiado en detalles podemos resumir un poco algunos de los valores más importantes:

  • Lo primero de todo es la imagen por defecto, “default.png”, la cual podemos especificar una determinada, esto se hace para en el caso de que escribamos una entrada sin imagen, automáticamente se visualice la que tengamos por defecto.
  • En segundo lugar disponemos de las variables height y width, las cuales nos indican el tamaño del thumbnail a crear, como podrás apreciar, en el código hemos asignado un tamaño de 180x180px, los cuales podrás cambiar por los que se ajusten a tu plantilla.

Estilizando el thumbnail…

Como no sabemos donde quedará ubicada la imagen, debemos estilizarla para ajustarla a la plantilla y para ello debemos introducir el siguiente código dentro de nuestro archivo CSS.

.thumbnail{
float: left;
margin: 10px;
}

Comentarios para Como introducir thumbnails automáticos en tu plantilla WordPress

  • muy mal muy mal el truco de referidos, lo que estas logrando es que abandonen tu sitio y jamas vuelvan, eso es muy molesto. jamas regreso aqui.

    NOTA: este comentario ha sido transformado a minúsculas. Desactiva el Bloqueo de Mayusculas cuando escribas en este blog, por favor.

    Anonimo 15 noviembre 2010 8:50 pm Responder
  • @Anonimo Estás en tu derecho de abandonar el blog si no es de tu gusto, pero muy poca gente agradece la labor que otros realizamos y esperan que todo sea gratis o sin dar nada a cambio.

    Vera 17 noviembre 2010 11:59 am Responder

Dejar un Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *