Share
En este tutorial, integraremos un reproductor integrado de YouTube y Vimeo en una página en un sitio web de WordPress, sin necesidad de acceder a los documentos de la API (que son la API de YouTube y la API de Vimeo, si está interesado). Al utilizar las herramientas disponibles para nosotros en WordPress con un poco de PHP, podemos crear una galería que supere el problema de la agregación de contenido..
Por ejemplo, me gusta el reproductor Vimeo, pero no siempre seré yo subiendo el video. Una tercera parte puede subir a YouTube, y definitivamente no quiero seguir corriendo y configurando los tamaños en los sitios para obtener el reproductor integrado para cada video.
En términos de la persona, esto le da el poder de elegir su sitio de video preferido y aún así ser capaz de adaptarse si un tercero publica un video de otro sitio. Para los desarrolladores web, esto significa que puede dar al usuario un panel de control y no tener que tomar llamadas telefónicas para recibir consejos sobre videos integrados.
"Planifique el sitio primero ... El diseño retrospectivo es un dolor".
La primera parte de este tutorial sería evidente para los desarrolladores y diseñadores más experimentados. Pero lo enfatizaré de todos modos. Planifica el sitio primero, en este caso la página de la galería. Diseñe la estructura alámbrica, decida qué ancho y qué altura desea que sea el reproductor de video. Una vez que esto se haya completado, puede pasar a la función. El diseño retrospectivo es un dolor.
Utilicé el sistema de cuadrícula 960 e hice que el reproductor tuviera un ancho de 300 px y un alto de 190 px..
Como sabrás, Vimeo y YouTube proporcionan código incrustado que puedes capturar para pegarlo en tu sitio de WordPress. Esto nos da el jugador básico así que vamos a conseguirlos.
Experimenta la gravedad cero de Betty Wants In en Vimeo.
Con estos dos códigos de inserción podemos personalizarlos, cambiar el ancho, los colores, etc. Pero esto requiere mucho tiempo y es repetitivo. Así que vamos a hacer que nuestro código haga el trabajo.
Aquí podemos usar un excelente complemento llamado Plantilla de campo personalizado por Hiroaki Miyashita. A través del panel de configuración podemos ingresar los campos que se convertirán en nuestras variables..
Entrar
Tipo de [ID de video] = campo de texto Tipo de [sitio de video] = seleccionar valor = youtube # vimeo
E ingrese los videos personalizados de tipo de publicación. Si no está seguro de cómo hacer que los tipos de publicaciones personalizados vea un complemento fácil llamado UI de tipos de publicaciones personalizadas por WebDevStudios.com
Una vez hecho esto, cuando agregue una nueva publicación de video, verá las opciones para el ID de video y el sitio de video.
El factor común en los sitios de video es el ID de video, al final de la URL de YouTube, se ve así:
http://www.youtube.com/watch?v=WhBoR_tgXCI
El ID de YouTube: WhBoR_tgXCI
Al final de la URL de Vimeo se ve así:
http://vimeo.com/29017795
El ID de Vimeo: 29017795
Debido a esto, podríamos agregar más sitios de videos a medida que adopten esta misma táctica de URL. Por ahora nos quedaremos con los dos en cuestión..
Así que ahora tenemos una manera fácil de asignar un video a una publicación, ingresar la ID y seleccionar el sitio.
Antes de configurar el PHP, necesitamos crear una página y asignarla a un archivo de plantilla personalizado como galería, luego podemos abrir nuestra nueva página y darle propiedades básicas. Para obtener más información sobre los archivos de plantillas personalizadas, consulte el Códice de WordPress para obtener información sobre plantillas y temas secundarios..
Ahora necesitamos tomar esta información y usarla, agregar un bucle a su archivo de plantilla e incorporar su estructura alámbrica. Por ejemplo:
Videos
'videos', 'posts_per_page' => 10); $ loop = new WP_Query ($ args); while ($ loop-> have_posts ()): $ loop-> the_post (); ?>
Ahora tenemos las publicaciones en video que muestran su título y contenido. Vamos a crear un par de variables en el .galvidprevid div (una clase, porque tenemos más de uno), por lo que podemos llamar los metadatos personalizados con facilidad.
ID, 'Video Site', single); $ videoid = get_post_meta ($ post-> ID, "ID de video", sencillo); ?>
Ahora podemos llamar al ID de video y al sitio de video con $ videosite y $ videoid. Entonces obtengamos el código incrustado de nuestros dos sitios con el ancho y la altura establecidos en el tamaño deseado. En el código incrustado puede encontrar la ID del video y reemplazarla con nuestra variable.
Así que todo lo que tenemos que hacer es insertar nuestra ID reemplazándola con nuestra variable $ videoid. Vamos a hacer eco del contenido.
eco '';
Así que tenemos nuestra identificación de video en lugar de la que teníamos antes. Ahora podemos crear una sentencia if para cambiar el reproductor integrado que depende del sitio de video seleccionado.
'; else if ($ videosite == 'youtube') echo ''; else echo 'Seleccione un sitio de video a través del administrador de WordPress'; ?>
Comprueba que todo se ve bien, agrega un video y POW! Imagen de abajo tanto del sitio como del administrador..
Así que ahí lo tenemos, voy a agregar algunos de mis videos favoritos y hacer un poco de CSS y listo..
Aquí está el CSS que utilicé.
h1 font-size: 20px; #galvidcontainer width: 940px; margen: 0 auto; .galvidpre ancho: 300px; altura: 325px; flotador izquierdo; margen: 5px; color de fondo: #ccc; .galvidprevid ancho: 300px; .galvidpretext width: 280px; relleno: 10px;
Aquí hemos demostrado un método agradable y eficaz para implementar reproductores de video integrados sin la necesidad de grandes cantidades de código. encuentras esto de ayuda? Háganos saber lo que piensa en los comentarios.!
Accentsconagua