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   Cheat sheet visual de 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