Como utilizar la imagen destacada de WordPress – Thumbnail

wordpress logo logotipo con mantenimiento

Si quieres utilizar thumnails o la imagen destacada en WordPress, en las entradas de tu tema, sólo tienes que seguir este sencillo tutorial.

  1. Editar el archivo functions.php, bien de forma manual o bien desde el editor de apariencia, seleccionando el archivo functions.
  2. Añadir las siguientes líneas dnetro del archivo functions.php
    • /*La primera línea le dice a WordPress que habilite las imágenes destacadas, si existe la función en nuestro WordPress. La segunda le pasa el tamaño por defecto para esas imágenes.*/
      if ( function_exists( 'add_theme_support' ) )
      add_theme_support( 'post-thumbnails' );
      set_post_thumbnail_size(150, 150);
  3. Ahora editaremos el fichero de las entradas de nuestra página principal, suele ser el archivo index.php o a veces loop.php dependiendo de tu tema.
  4. Añadiremos el siguiente código donde queramos mostrar nuestra imágen destacada o thumbnail
    • <?php the_post_thumbnail();?>

Con esto ya tendríamos puesta nuestra imágen donde la necesitemos.

Unas opciones muy interesantes son el tamaño por defecto del thumbnail para que no nos deformen las imágenes. Simplemente tenemos que cambiar el código del paso 4 por estos otros.
the_post_thumbnail('thumbnail'); // Thumbnail (default 150px x 150px max)
the_post_thumbnail('medium'); // Medium resolution (default 300px x 300px max)
the_post_thumbnail('large'); // Large resolution (default 640px x 640px max)
the_post_thumbnail( array(100,100) ); // Otras resoluciones

Una buena opción es utilizar the_post_thumbnail() con the_excerpt() para obtener post sólamente con la imágen destacada en el index.php y otra imágen dentro del post, en el page.php

Como hace un thumbnail de un video de YouTube

Si necesitáramos capturar una imagen de un video de Youtube, lo podemos hacer con el método tradicional pulsando la tecla Imp Pant durante la visualización del vídeo y luego pegarla en algún editor de imagen, paint, photoshop, etc.

Otro método mucho menos costoso y que además nos permitirar general un thumbnail si nos hiciera falta, sería, sólo si utilizamos WordPress, usar el plugin YouTube thumbnail plugin para WordPress o el plugin jQuery Youtube plugin jYoutube.

El último método y para mi el más sencillo, es utilizar las propias imagenes que todos los vídeos de Youtube generan automátimcamente.

Existen algunos plugins para conseguir imágenes de los vídeos, como el o el jQuery Youtube plugin jYoutube, pero no creo que sea necesario utilizarlos por lo menos para tareas simples, ya que el propio YouTube genera automáticamente 4 capturas del vídeo, para utilizarlas como thumbnails o capturas de pantalla:

Si tenemos el vídeo, p.j. de Lady Gaga y Beyoncé http://www.youtube.com/watch?v=EVBsypHzF3U

Las capturas automáticas son:

  • http://img.youtube.com/vi/EVBsypHzF3U/0.jpg
  • http://img.youtube.com/vi/EVBsypHzF3U/1.jpg
  • http://img.youtube.com/vi/EVBsypHzF3U/2.jpg
  • http://img.youtube.com/vi/EVBsypHzF3U/3.jpg

Y quedarían así:

Lady Gaga y Beyonce

Lady Gaga Beyonce thumnail

Lady Gaga Beyonde thumnail

LAdy GAga thumnail Beyonce