Nuevo en WordPress 2.9: Miniaturas de Entrada (Post Thumbnails)

Una de las principales novedades que nos ha ofrecido WordPress 2.9 es la posibilidad de crear Miniaturas de Entrada (en inglés Post Thumbnails). ¿Qué son las Miniaturas de Entrada? Son las imágenes que veréis en muchos blogs asociadas a las distintas entradas de dicho blog en su página principal. Veamos por ejemplo nettuts+:



Vemos que cada entrada tiene asociada a su izquierda una imagen (marcada con un círculo rojo) que ayuda a describir mejor el artículo asociado, además de mejorar la imagen general del blog. Hasta ahora la manera más habitual de conseguir situar estas miniaturas era mediante Campos Personalizados. Ahora hay ya una funcionalidad completa e independiente para crear las Miniaturas de Entrada. Vamos a verla en detalle.

Para poder usar las Miniaturas de entrada tenemos que activarlas. Esto lo hacemos desde el archivo functions.php de nuestro tema. Escribimos:

Simplemente indica que si existe la función ‘add_theme_support’ se ejecute add_theme_support(‘post-thumbnails’). Lo habilitará tanto para páginas como para entradas. Si lo quieres sólo para uno de ellos:

Ahora al ir a escribir o a editar una entrada, tendremos en la columna de la derecha una nueva ventana, llamada, como no, Miniatura de Entrada:




Si hacemos click sobre Establecer miniatura aparecerá la pantalla habitual para añadir una imagen. La seleccionamos y veremos entonces:




En la parte de abajo, junto a Insertar en la entrada, vemos el enlace Usar como miniatura. Ese es el enlace sobre el que hay que hacer click. Entonces veremos que en el cuadro de Miniatura de entrada aparece la imagen que hemos seleccionado:



Ahora ya tendremos la imagen asociada a nuestro artículo. Pero nos queda un último paso: tenemos que incluir unas líneas dentro del loop para que se muestre la miniatura de entrada. Para ello tonamos el archivo que muestre las entradas en nuestro tema (por ejemplo index.php) y buscamos el loop, es decir, lo incluido entre

Es ahí, dentro del loop, donde añadiremos un código que va a añadir la miniatura de cada entrada. Símplemente hay que escribir esta línea:

Un loop sencillo podría parecerse más o menos a esto:

Si, para estar seguros, queremos saber si la entrada o artículo en cuestión tiene una miniatura asociada, podemos hacer:

Se puede seleccionar también el tamaño de la miniatura:

También se pueden añadir atributos como title y alt, así como una clase que nos servirá para dar estilo con nuestra hoja CSS:

En el caso de no asignar ninguna clase podemos dar estilo a la miniatura con .wp-post-image {}

Volvamos de nuevo al archivo functions.php de nuestro tema. Vimos al principio de todo que las Miniaturas teníamos que activarlas en dicho archivo. Podemos además especificar el tamaño de las miniaturas:

O asignar un tamaño concreto (también en functions.php):

Que usaríamos así dentro del loop (por ejemplo en index.php):

Si queremos que en functions.php esté todo este código que hemos visto incluído de manera segura (es decir, tras comprobar que existe esa funcionalidad en nuestra versión de WordPress), escribiríamos:

Y para más seguridad, podemos poner como vimos antes, dentro del loop, el condicional que muestra las miniaturas. En el caso de que esta no exista podemos poner un plan alternativo, como puede ser una imagen de un campo personalizado:

Lecturas recomendadas

bocabit.com: Todo sobre las miniaturas (thumbnails) de WordPress 2.9
Mark Jaquith: New in WordPress 2.9: Post Thumbnail Images
Justin Tadlock: Everything you need to know about WordPress 2.9’s post image feature

24 comentarios en “Nuevo en WordPress 2.9: Miniaturas de Entrada (Post Thumbnails)

  1. uffff me dejas sin palabras jeje gracias por contribuirme tanto jajaja tu blog si k me a servido muchoooooooooo para aprender mas de wordpress gracias mira y esto como funsionaria con custom fields como seria???

  2. jejeje Disculpa olvida el primer comentario ni lo habia entendido bien y ya estaba comentando jajaja pero ya entendi jeje ya lo hice funsionar en mi tema que estoy haciendo pero si me puedes ayudar con esto si
    …..como puedo hacer que el thumbnail se pueda darle click y que entre a mi post me compredes porfa si me puedes ayudar

  3. Tengo una duda al repecto. Si tengo una imagen con forma rectangular, al generar la miniatura de iguales dimensiones en alto y ancho, es decir, cuadrada, lo que hace es deformar la imagen? Hay algo que me muestre como miniatura un detalle como miniautura con las dimensiones que yo quiera?

    Saludos y gracias

  4. si, la pregunta de Chris no está fuera de lugar.
    por mas que sea uno el que le da el tamaño a la imagen, el esta preguntando que pasa si su imagen tiene forma horizontal y no cuadrada. si la imagen original tenia 800×600 y se muestra de 80×80 se deforma? o es que WordPress recorta la imagen a los lados?
    si la imagen tenia originalmente 800×800 y se muestra de 80×80 LA FORMA de la imagen no cambia (cambia el tamaño, no la forma)

  5. Hola, tambien tengo una duda como la de Chris y armate1hernan.

    A ver con mi ejemplo: yo quiero poner miniaturas de 300×250 en una sección si tomo la que es mediuum cuando tengo imágenes rectangulares wordpress las corta 300×175 o algo cercano entonces me quedan mal en el tema, si uso add_image_size(‘custom-thumbnail’, 300, 250); wordpres toma la imagen original y solo me muestra los 300×250. y lo que en realidad quier es que wordpress me haga miniatura de tamaño exacto 300×250, asi como hace las de 150×150 que si no se puede reducir proporcionalmente las corta pero si quedan exactas.

    Saludos y gracias por el tutorial, me ha servido de mucho.

  6. Consulta: ¿se puede poner un the_post_thumbnail en el sidebar?
    Aclaro tengo una page con el texto correspondiente y quiero que en el sidebar me cargue la imagen de ese post ¿se puede?

  7. Hola Juan, excelente tutorial.

    Una pequeña duda. Estoy comenzando con wordpress, así que no tengo mucha idea, y utlizo el tema “Twenty Ten” (el que viene por defecto en wordpress). Quisiera hacer exactamente eso: insertar en cada entrada una imagen, la que yo elija, pero siguiendo tu tutorial, no veo en el archivo index.php nada parecido a

    solo he visto algo similar en un archivo llamado loop.php. Es lo mismo? Es decir, el código se puede poner en loop. php o hay algún problema?

    No quisiera cargarme de nuevo la plantilla con los plugins (no sería la primera vez que por meterle mano, se me vaya todo al traste…)
    En fin, me gustaría, si puede ser que me especifique paso a paso qué ódigo poner y donde para no volvermelo a cargar.

    Gracias y repito, felicidades por el post.

    1. Gracias Alejandro,

      Es en el loop donde hay que ponerlo, efectivamente. El loop es el código que hace que aparezcan tus artículos uno tras otro.

  8. Hola, estoy en un lio. Estoy utilitzando un template de pago, que dos días después de comprar han retirado de la tienda y el desarrollador ha desaparecido.
    Tengo la web casi terminada, las imágenes del slide de presentación están añadidas a través de Option Tree y los thumbnails están añadidos con Custom Fields.
    Todo funcionava a la perfección, hasta que subí el nuevo logotipo a través de Option Three y todas las imágenes desaparecieron.
    No se que puede haber creado este error, y el desarrollador del template no contesta.
    Por favor, vosotros que entendéis un poco me podéis decir que puede haber pasado?

  9. Lo bien que me ha ido este post, y por segunda vez. En la primera implementé el custom-thumbnail. Hoy he venido a buscar la última parte del código para mostrar una imagen predeterminada en caso de que no exista ninguna. El theme que utilizo es el que puedes ver en mi “web”, creado desde un Framework que estaba en cueros, prácticamente. Lo vengo mejorando desde hace unas semanas y cualquier sugerencia me vendrá bien 🙂

    Lo que no entiendo es el útimo “else if” con el $postimageURL. Esta parte la he borrado porque no hacía su función. ¿Tendría que tomar la primera imagen del post, verdad? Esto habría sido bueno para no tener que editar posts antiguos y seleccionar la imagen que debe ser “predeterminada” en cada uno. Pero bueno es igual.

    Un saludo!

    1. Gracias Gerard,

      La última parte tras el “else” es por ejemplo si tienes una imagen en un campo personalizado que tuviera ese nombre.

  10. yo estoy usando este codigo:

    pero en el index las imagenes me salen del tamaño original, que pasa?

    1. Hola,

      Mira en la carpeta de uploads para ver si las imágenes de ese tamaño se han generado. Si están, tienen el mismo nombre, sólo que tendrán añadido el tamaño. Si están ahí es que no las estás llamando bien. ¿Qué has puesto en la plantilla?

  11. Gracias por compartir tus conocimientos y por explicarlo tan bien. Estaba loca buscando como añadir la llamada del thumbnail en el loop 🙂 Me has alegrado el dia… Y el mes 😀

Deja un comentario

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