- Desde
- 10 Ene 2012
- Mensajes
- 927
Hola a todos, como están?
Este tutorial lo haré medio rápido ya que estoy algo ocupado, aun así como leí en el foro un articulo de como agregar vídeos de esta forma a blogs de blogger solo con el id del mismo (es decir sin toda la perolata de código de embebido que tiene youtube por ejemplo).
En resumidas cuentas en wordpress se puede hacer lo mismo, creando lo que se llama un "shortcode" o código corto, el cual debe cumplir con algunas reglas de sintaxis para funcionar.
Lo primero que haremos es incorporar este codigo a el archivo "functions.php":
Estudiando un poco este codigo podemos notar que esta formado de 2 partes, una que recibe algunos parámetros y otra que los procesa. Nuestros parametros son:
La segunda parte es donde se hace la magia, se toman los valores y se los cargan en el código de youtube dinámica mente, es decir se sustituyen las variables id, width y height por los valores recibidos.
Lo importante aquí es que si queremos editar esta función para otros vídeos solo tenemos que cambiar las partes estáticas del código, así pues
para youtube tenemos:
<iframe width="' . $width . '" height="' . $height . '" src="//www.youtube.com/embed/' . $id . '?rel=0" frameborder="0" allowfullscreen></iframe>
Noten que las partes en negrita son las unicas que cambian si comparamos los codigos de mas de un video de youtube.
de igual forma para vimeo sera:
<iframe src="//player.vimeo.com/video/' . $id . '?title=0&byline=0&portrait=0&badge=0"width="' . $width . '" height="' . $height . '" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
Ahora para mostrar un vídeo en nuestro wordpress bastara con cargar este código:
Donde [YouTube es la etiqueta y id="" width="" height=""] son los parámetros, recuerden que el ancho y largo son opcionales.
Por ultimo pero no menos importante para usar este tutorial con mas de un sitio de vídeos recuerden cambiar el nombre de la funcion "youtube_shortcode", adaptar el código de embebido a cada sitio, y claro renombrar la etiqueta "YouTube" por la etiqueta que mas les guste.
Salu3!
Este tutorial lo haré medio rápido ya que estoy algo ocupado, aun así como leí en el foro un articulo de como agregar vídeos de esta forma a blogs de blogger solo con el id del mismo (es decir sin toda la perolata de código de embebido que tiene youtube por ejemplo).
En resumidas cuentas en wordpress se puede hacer lo mismo, creando lo que se llama un "shortcode" o código corto, el cual debe cumplir con algunas reglas de sintaxis para funcionar.
Lo primero que haremos es incorporar este codigo a el archivo "functions.php":
HTML:
// Add Shortcode
function youtube_shortcode( $atts ) {
// Attributes
extract( shortcode_atts(
array(
'id' => '',
'width' => '640',
'height' => '360',
), $atts )
);
// Code
return '<iframe
width="' . $width . '"
height="' . $height . '"
src="//www.youtube.com/embed/' . $id . '?rel=0"
frameborder="0" allowfullscreen></iframe>;
}
add_shortcode( 'YouTube', 'youtube_shortcode' );Estudiando un poco este codigo podemos notar que esta formado de 2 partes, una que recibe algunos parámetros y otra que los procesa. Nuestros parametros son:
'id' => '',
'width' => '640',
'height' => '360',
Que obviamente corresponden a id del vídeo, ancho y alto respectivamente, y donde el ancho y el alto tienen un valor por defecto de 640x360 pixeles, de forma que si queremos podemos pasar a demás de la id el ancho y alto del player, o si no se vera en 640x360px.'width' => '640',
'height' => '360',
La segunda parte es donde se hace la magia, se toman los valores y se los cargan en el código de youtube dinámica mente, es decir se sustituyen las variables id, width y height por los valores recibidos.
Lo importante aquí es que si queremos editar esta función para otros vídeos solo tenemos que cambiar las partes estáticas del código, así pues
para youtube tenemos:
<iframe width="' . $width . '" height="' . $height . '" src="//www.youtube.com/embed/' . $id . '?rel=0" frameborder="0" allowfullscreen></iframe>
Noten que las partes en negrita son las unicas que cambian si comparamos los codigos de mas de un video de youtube.
de igual forma para vimeo sera:
<iframe src="//player.vimeo.com/video/' . $id . '?title=0&byline=0&portrait=0&badge=0"width="' . $width . '" height="' . $height . '" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
Ahora para mostrar un vídeo en nuestro wordpress bastara con cargar este código:
HTML:
[YouTube id="" width="" height=""]Donde [YouTube es la etiqueta y id="" width="" height=""] son los parámetros, recuerden que el ancho y largo son opcionales.
Por ultimo pero no menos importante para usar este tutorial con mas de un sitio de vídeos recuerden cambiar el nombre de la funcion "youtube_shortcode", adaptar el código de embebido a cada sitio, y claro renombrar la etiqueta "YouTube" por la etiqueta que mas les guste.
Salu3!
