Guía: Como mostrar miniaturas automaticas en Wordpress

Ya muchas personas me preguntaron como hacer para mostrar miniaturas al lado de los post como por ejemplo tengo en las categorías de este blog. El asunto es bastante sencillo y no requiere más que un par de líneas de código que si bien son sencillas me llevaron más de un dolor de cabeza buscando en el codex de Wordpress.

Lo primero que tenemos que hacer es definir donde queremos mostrar las miniaturas, puede ser en la pagina principal del blog, o como tengo yo, en las categorías y en el archivo, ahí voy a ejemplificar el tutorial.

Ahora empezamos a colocar los códigos, lo primero que debemos hacer es abrir el archivo que corresponde a los archivos del blog, en línea general y casi siempre se llama archive.php.

En este mismo archivo deberíamos incluir las líneas de código que coloco a continuación, es importante que estas se coloquen dentro del  loop del worpress, sino el código no funciona, una forma sencilla de colocarlo es inmediatamente arriba el titulo de la entrada, de esa forma nos garantizamos colocar el código en el lugar correcto.

Para el que no lo conoce el loop de Wordpress tiene esta forma:

PLAIN TEXT
PHP:
  1. <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

Y el código que muestra las miniaturas es el siguiente:

PLAIN TEXT
PHP:
  1. <?php
  2. $files = get_children("post_parent=$id&post_type=attachment&post_mime_type=image");
  3. if($files){
  4.         $keys = array_keys($files);
  5.         $num=$keys[0];
  6.         $thumb=wp_get_attachment_thumb_url($num);
  7.         print "<a href='".get_permalink()."' title='".get_the_title()."'><img src='$thumb' class='thumbnail' width='90' height='90' alt='".get_the_title()."' /></a>";
  8. }else{
  9. print "<a href='".get_permalink()."' title='".get_the_title()."'><img src='default.png' class='thumbnail' width='90' height='90' alt='' /></a>";
  10. }
  11. ?>

El código es muy sencillo de entender, pero para no entrar en detalles le resumo lo mas importante para que puedan personalizar las miniaturas del blog.

  • El width y el height son las medidas de la miniaturas, en el ejemplo es 90x90.
  • La imagen alternativa, en el ejemplo default.png. Esto es importante, puesto que cuando el post no tenga ninguna imagen se mostrara esa en la miniatura. Por lo tanto les recomiendo que elijan una imagen bastante genérica, como en mi caso puede ser el logo del blog tranquilamente.

Una vez que hicimos esto si vemos el archivo del blog se tendría que mostrar la miniatura, probablemente en cualquier lugar ya que todavía no tenemos ningún estilo css asociado a estas imágenes. Para hacer esto hay varias formas, no puedo escribirlas porque depende en gran medida del theme en cuestión, pero no es complicado basta con crear una clase llamada thumbnail y listo. Por ejemplo:

PLAIN TEXT
CSS:
  1. .thumbnail{
  2. float: left;
  3. margin: 10px;
  4. }

Luego tendremos que jugar con posiciones, colores de enlaces, etc. Repito, no es complicado, pero depende de cada theme.

Un detalle: dependiendo del theme de nuestro blog la entrada se mostrara completa o no, en caso de mostrarse completa podemos reemplazar el código en el archive.php que dice:

PLAIN TEXT
PHP:
  1. <?php the_content() ?>

Por este otro

PLAIN TEXT
PHP:
  1. <?php the_excerpt(); ?>

Y de esa forma se mostrara solo un extracto. Es muy sencillo y con un poco de paciencia podemos hacer que quede muy bien.

Un detalle para obtener mejores resultados, la miniatura la genera Wordpress solo y al momento de subir la imagen al crear una entrada, esta miniatura viene de un tamaño determinado, si por ejemplo nosotros mostramos unas miniaturas de mayor tamaño esta se píxela un poco, basta con ir al tablero de WP opción Settings -> Media -> Cambiar el tamaño de las miniaturas por el que nosotros queremos utilizar, de esta forma quedan perfectas y de excelente calidad.

Cualquier duda en los comentarios :D

Escrito por Pablo

Programador con más de 10 años de experiencia, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.

El Viernes, Enero 30th, 2009 a las 14:34 y fue guardada bajo Programación.

Compartir esta entrada

Entradas relacionadas

17 Comentarios en “Guía: Como mostrar miniaturas automaticas en Wordpress”

  1. Jorge Dice:
    Enero 30th, 2009 a las 18:23

    Muchas Gracias!
    Aunque no me funciona =(
    creo que no se donde pegar el codigo =(
    Aun no logro identificar El Loop =(
    Podrias ayudarme?

  2. Pablo Dice:
    Enero 30th, 2009 a las 18:33

    @Jorge: Como comento en el post, una forma sencilla es colocar el codigo de las miniaturas arriba de la etiqueta h1 o h2 del titulo del post. No obstante si no lo encuentras la forma del loop es como la que pegue arriba, pero puede tener algunos cambios menores, en el sitio de codex de wordpress encontraras otras opciones, si no lo encuentras luego de eso me avisas y vemos otra forma :D

  3. Jorge Dice:
    Enero 30th, 2009 a las 18:54

    Ahh ok, ya lo cambié de sitio (lo habia pegado en otro lugar),
    ahora me aparece el ‘cuadro’ por decirlo de alguna manera en donde deberia aparecer la imagen, pero dentro de ese cuadro me aparece el encabezado del post junto con el link hacia el =S

  4. AMENITO Dice:
    Enero 31st, 2009 a las 1:54

    Muy interesante el post para los que usamos Wordpress.

  5. Jorge Dice:
    Febrero 3rd, 2009 a las 18:49

    hola! ya solucione mi problema anterior =D
    y esta tal cual aparece en tu guia, pero en la portada me aparece la miniatura, y ademas me aparece la imagen tamaño normal debajo, q sera?

  6. Jorge Dice:
    Febrero 3rd, 2009 a las 18:54

    y la ultima, para mostrar la miniatura por defecto (default.png en este caso) en donde debo guardarla?

  7. J. Rojas Dice:
    Febrero 5th, 2009 a las 10:09

    @Jorge: Por default wordpress al subir una imagen la guarda en el directorio: /wp-content/uploads/ fijate en guardarla ahí por medio de tu FTP.

    @Pablo: Muy buena guía, hace unos meses leí de un plugin, pero era para la imagen en el post. No se podía aplicar para cualquier parte del blog… Y esto de ubicarlo en las categorías es genial :)

    Un abrazo.

  8. manicho Dice:
    Abril 19th, 2009 a las 23:18

    Pablo, primero que todo agradecerte de tomarte el tiempo de investigar este tema de las miniaturas para wordpress y publicarlo para personas inexpertas em woedpress como yo.

    tengo un problema y es que tu codigo si funciona, lo he pegado en el loop de la pagina de archivos de mi template y el css genera el espacio para la imagen, pero no logro hacer que aparezcan las miniaturas de los posts, incluso mas raro aun si me aparece la imagen alternativa que deberia aparecer solo cuando el posts no tiene imagenes, que podre estar haciendo mal. Epero puedas colaborarme

  9. Usar los thumbnails generados por Wordpress en un theme | Codigo Geek Dice:
    Junio 9th, 2009 a las 12:58

    [...] Plus armaron un tutorial bien sencillo que me ahorró tiempo y al que llegué gracias a DS. UPDATE: Pablo nos avisa en los comments que ya hace un tiempo posteó una solución a esto, y vaya sorpresa, el [...]

  10. Luis Parrado Dice:
    Julio 20th, 2009 a las 16:24

    Hola,unico El PHP me anda muy bien, el problema es que si las fotos son linkeadas desde otra pagina no me muestra las miniaturas, en mi caso esto es un problema por que tengo un blog madre que indexa contenido de otros, como no soy muy experto en PHP no se que parte del codigo tengo que cambiar para soluciionar este problema.

    Pablo Muchas gracias por compartier esto con nosotros, es lo unico que funciona de lo que esta publicado en español.

    Sauludos

  11. Pablo Dice:
    Julio 20th, 2009 a las 16:29

    @Luis: mmm si el contenido es exterior depende, si tienes una direccion o url para enviarme te podria ayudar mas. Saludos :D

  12. Luis Parrado Dice:
    Julio 20th, 2009 a las 16:49

    Ok Pablo muchas gracias.
    El blog donde puse el codogo (blog madre que indexa contenido de otros blogs) es este: http://lalos.com.ar/

    De nuevo muchas gracias

  13. solid Dice:
    Septiembre 9th, 2009 a las 10:38

    Hola, ante todo gracias por el código ya que yo usaba un javascript (thinthumb) y esto es mucho más ligero.

    Mi problema es con el path de la imagen de sustitución. Tengo wordpress en una subcarpeta y cuando busca la imagen la busca en el dominio principal.

    Entonces a la hora de crear un tema no le puedo meter la ruta,ya que cada uno se instala wordpress donde le da la gana. ¿o si? esa es mi duda.

  14. María Dice:
    Septiembre 21st, 2009 a las 2:51

    Hola Pablo, antes que nada, muchas gracias por este post. Funciona de maravillas.
    Tengo sólo una duda: No entiendo bien el criterio que utiliza el código para seleccionar qué miniatura muestra. Yo quiero hacer que muestre la primer imagen de cada post. ¿Es posible esto?
    Saludos, y gracias de nuevo.

  15. Oscar Dice:
    Noviembre 18th, 2009 a las 15:51

    Esta genial¡¡¡¡ A mi me funciona a la perfección.

    ¿Habría alguna forma de poder poner el nombre del post acompañando a la miniatura?

    1000 gracias.

  16. Pablo Dice:
    Noviembre 18th, 2009 a las 15:56

    @Oscar: Gracias por tu comentario, me alegro que te sirva! Con respecto a tu consulta mira la siguiente función: http://codex.wordpress.org/Template_Tags/the_title Saludos! :D

  17. Anthonie Dice:
    Enero 22nd, 2010 a las 2:52

    Qué tal Pablo quería hacerte solo una consulta.
    Quería saber si uso este tutorial para mostrar una miniatura por “post” como se hace para definir esta miniatura? si por ejemplo en el artículo tengo un video y quiero mostrar solo una imagen miniatura relacionada al video. Pero una ves dentro del artículo esta imagen no debería verse..

    espero que me puedas apoyar con eso!

    saludos cordiales y felicitaciones!

Deja tu comentario

Seguir comentarios por RSS