Mostrar miniatura de videos Youtube con Shortcode

1

Con el uso de los Shortcodes WordPress pudo ampliar de forma exponencial sus funcionalidades y también la comodidad a la hora de usarlas. En las primeras versiones de WordPress, cuando no existían los shortcodes, agregar código a un post resultaba una tarea tediosa, ya que no solo significaba escribir manualmente el código, sino que también teníamos que evaluar la compatibilidad del mismo con nuestro theme, pero con el uso de los shortcodes esta tarea se simplifico a una sola línea de código.

Shortcode-Thumbnails-youtube-Wordpress

Hace un tiempo te contamos cómo usar los Shortcodes en tu theme de WordPress para evitar tener que escribirlo manualmente en todos tus post, también te enseñamos cómo utilizar la primer imagen subida como imagen destacada. Hoy te queremos mostrar un truco simple para poder mostrar una imagen miniatura de los videos Youtube con Shortcode.

Para poder hacer esto, primero tenemos que agregar el siguiente código a nuestro archivo functions.php.

/*
   Mostrar imagen miniatura de videos Youtube con Shortcode
    Uso:
    [youtube_thumb id="VIDEO_ID" img="0" align="left"]
    VIDEO_ID= Youtube video id
    img=0,1,2 or 3
    align= left,right,center
*/
function wp_youtube_video_thumbnail($atts) {
     extract(shortcode_atts(array(
          'id' => '',
          'img' => '0',
          'align'=>'left'
     ), $atts));
    $align_class='align'.$align;
    return '<img src="<a href="http://img.youtube.com/vi/'.$id.'/'.$img.'.jpg&quot" rel="nofollow">http://img.youtube.com/vi/'.$id.'/'.$img.'.jpg&quot</a>; alt="" class="'.$align_class.'" />';
}
add_shortcode('youtube_thumb', 'wp_youtube_video_thumbnail');
Quizas te interese   WpTouch, plugin para crear versión para dispositivos móviles en wordpress

Una vez hecho esto, ya se puede utilizar el shortcode en el que se aceptan tres parámetros: el identificador de vídeo (VIDEO_ID), el tamaño de la imagen (0 para 480 x 360 px, 1 para 120 x 90 px) y la alineación de la imagen, left,right o center.

 
[youtube_thumb id="rNWeBVBqo2c" img="0" align="center"]

Espero que este pequeño tutorial te sea útil.

1 COMENTARIO

Dejar una respuesta

Please enter your comment!
Please enter your name here