Share
Hay un montón de complementos de YouTube en el repositorio de complementos de WordPress.org, e incluso en el mercado de Envato, pero a veces un complemento es una exageración para una implementación muy sencilla de videos recientes obtenidos de un feed RSS.
En este tutorial, veremos cómo utilizar los datos devueltos desde fetch_feed () para generar una plantilla de página de video de YouTube.
El código final también se podría convertir fácilmente en una función reutilizable, pero como estamos tratando el tema del desarrollo del tema, lo incluiremos en una plantilla de página..
La mejor manera de comenzar es simplemente duplicar el tema page.php plantilla si existe, o comenzar con el tema single.php. Las cosas clave que querrá asegurarse de que el archivo tiene son el nombre de la plantilla y las llamadas a get_header () y get_footer (). Para proporcionar el nombre de la plantilla, simplemente la agregará a la parte superior del documento en comentarios como:
Esto creará una nueva opción en el campo de plantilla de atributos de página para seleccionar la plantilla de página personalizada que debería verse similar a la figura aquí.
Accentsconagua
fetch_feed () WordPress nos proporciona una pequeña y agradable forma de convertir una fuente RSS en un objeto que se puede usar para recorrer en bucle los elementos y devolver otros datos. Esto se hace con la fetch_feed () función. Para comenzar a utilizar esta función, configuraremos algunos parámetros y un par de condicionales de error con el siguiente fragmento de código.
get_item_quantity (10); $ rss_items = $ feed-> get_items (0, $ maxitems); if ($ maxitems == 0): devolver falso; else: if (is_array ($ rss_items)):?> ... hacer cosas ...
En primer lugar, debemos configurar nuestra URL de RSS. Si tiene problemas para encontrar la fuente RSS que desea, puede intentar usar el generador de fuentes API de YouTube de Google. Asegúrese de configurar cada parámetro con cuidado, ya que no todas las URL de las fuentes RSS devolverán los resultados deseados. La configuración predeterminada debería funcionar y le aconsejo que utilice la consulta de búsqueda y la salida RSS 2.0 también para obtener mejores resultados.
Una vez que tenga su URL, conviértala en una variable de objeto con el mágico fetch_feed () función. Luego ejecútelo para asegurarse de que no haya errores y busque los artículos que se devolverán. Si eres un usuario avanzado, puedes entretenerte haciendo una var_dump ($ feed) Para ver todo lo que el objeto tiene para ofrecer..
Ahora que tenemos nuestro conjunto de bases, nuestra página debe mostrar "... hacer cosas ..." porque hay un retorno para el feed. Ahora podemos comenzar a preparar los videos que devuelve el feed..
Antes de adelantarnos demasiado, avancemos y pongamos un poco de marcado y estilo. Para este diseño, tendremos un gran reproductor de video. iframe en la parte superior de la página y luego en las miniaturas de cada video en una lista de dos columnas a continuación. Vamos a reemplazar nuestro marcador de posición "hacer cosas" con esto:
Titulo del Video
Dentro de nuestro div conteniendo, tenemos dos elementos principales. El primero es para el reproductor de video grande y contendrá el video de trabajo real integrado; la otra es una lista de las columnas de selección de videos con miniaturas y títulos de videos. A continuación, aplicaremos estilo al colocar algo de CSS en la hoja de estilo del tema..
#videos ancho: 640px; .video_player padding: 15px; .video_thumbs margen: 0; .video_thumbs li estilo de lista: ninguno; relleno: 15px; margen: 0; flotador izquierdo; ancho: 290px; .video_thumbs p margen: 10px 0; .video_thumbs li: hover img, .video_thumbs li.active img opacidad: .5;
Este CSS establece el reproductor de video hasta tener algo de espacio a su alrededor y crea dos columnas iguales debajo de él.
Hay un paso más antes de comenzar a analizar los datos que hemos obtenido de la fuente RSS. Vamos a necesitar encontrar la identificación del video en cada elemento del video.
Para hacer eso, crearemos una función separada que colocaremos en el tema funciones.php Archivo para que esté listo para que lo usemos en la plantilla..
función wptuts_get_yt_ID ($ uri) // cuánto tiempo son los ID de YT $ id_len = 11; // dónde comenzar a buscar $ id_begin = strpos ($ uri, '? v ='); // si el id no está al principio del uri por alguna razón if ($ id_begin === FALSE) $ id_begin = strpos ($ uri, "& v ="); // todo lo demás falla si ($ id_begin === FALSE) wp_die ('No se encontró la ID del video de YouTube. Por favor revise su URL.'); // ahora ve al inicio apropiado $ id_begin + = 3; // obtener el ID $ yt_ID = substr ($ uri, $ id_begin, $ id_len); devuelve $ yt_ID; Este bit de código básicamente busca en una URL proporcionada una cadena de 11 caracteres que sigue "& v ="en la consulta y elimina esos primeros tres caracteres para producir la identificación del video. Podemos usar esto para reemplazar"VIDEO_ID"en nuestro marcado.
Ahora podemos usar nuestro marcado y reemplazar nuestro marcado plano con un código de trabajo como el siguiente:
0) descanso; $ id = wptuts_get_yt_ID ($ item-> get_permalink ()); ?>get_permalink ()); $ enclosure = $ item-> get_enclosure (); ?>
">
">get_title ()); ?>
Esto crea dos bucles a través de los elementos RSS. El primero se romperá después del primer artículo ya que solo queremos devolver uno iframe para empezar con.
El segundo bucle recibe el $ id y $ recinto de cada elemento mediante las funciones SimplePie disponibles para nosotros y genera la URL y el título de la miniatura adecuada, vinculados a la URL de inserción para cada foto.
El último paso es colocar algunos jQuery que cancelarán el comportamiento predeterminado de cada enlace de miniaturas y en su lugar usarán esas URL para cambiar el video incrustado en el iframe. Para hacer esto, ponga en cola un archivo JavaScript personalizado de su funciones.php al igual que:
); ?> )
add_action ('wp_enqueue_scripts', 'wptuts_enqueue_video_js'); function wptuts_enqueue_video_js () if (is_page_template ('page-cats.php')) wp_enqueue_script ('video_js', get_template_directory_uri (). '/js/video.js', array ('jquery')); Este código se comprobará para asegurarse de que estamos en la plantilla de página personalizada llamada "page-cats.php"para que solo llamemos al script en esa página y luego pongamos en cola un archivo JS que buscará en nuestro tema"js"y requiere jQuery para ejecutarlo. Ahora puede crear ese archivo JavaScript con el siguiente código:
jQuery (function ($) $ ('#videos .video_thumbs li: first-child') .addClass ('active'); $ ('#videos .video_thumbs a') .on ('click', function (e) e.preventDefault (); $ ('#videos .video_thumbs li') .removeClass ('active'); $ (this) .parentsUntil ('ul') .addClass ('active'); var video = $ (this ) .attr ('href'); $ ('#videos .video_player iframe') .attr ('src', video););); Este código agregará el "activo"clase a la primera miniatura del video li. Luego, cuando se hace clic en un enlace en miniatura, impedirá que el enlace salga de la página, agregue el "activo"al elemento en el que se hizo clic, y use la URL del enlace para reemplazar la URL en el iframe fuente, reemplazando así el video activo con el nuevo.
Como resultado de todo su arduo trabajo, debe tener una página de video personalizada que se parece a esto:
