Share
Er zijn veel YouTube-plug-ins in de WordPress.org plugin-repository en zelfs op de Envato-marktplaats, maar soms is een plug-in gewoon overdreven voor een zeer eenvoudige implementatie van recente video's opgehaald van een RSS-feed.
In deze zelfstudie bespreken we hoe u de geretourneerde gegevens kunt gebruiken fetch_feed () om een YouTube-videopaginasjabloon uit te voeren.
De afgewerkte code kan ook heel gemakkelijk worden omgezet in een herbruikbare functie, maar aangezien we te maken hebben met het thema thema-ontwikkeling, gaan we dit omzetten in een paginasjabloon.
De beste manier om aan de slag te gaan, is door simpelweg de thema's te dupliceren page.php sjabloon als deze bestaat, of begin met de thema's single.php. De belangrijkste dingen waarvan u zeker wilt weten dat het bestand de naam van de sjabloon heeft, en oproepen naar get_header () en get_footer (). Als u de sjabloonnaam wilt opgeven, voegt u deze eenvoudig toe aan de bovenkant van het document in opmerkingen zoals:
Hiermee wordt een nieuwe optie in het sjabloonveld voor paginakenmerken gemaakt om de aangepaste paginasjabloon te selecteren die er ongeveer hetzelfde uit zou moeten zien als de afbeelding.
Accentsconagua
fetch_feed () WordPress biedt ons een aardige manier om van een RSS-feed een object te maken dat kan worden gebruikt om items door te lussen en andere gegevens te retourneren. Dit wordt gedaan met de fetch_feed () functie. Om deze functie te kunnen gebruiken, zullen we enkele parameters en een aantal foutcondities instellen met het volgende codefragment.
get_item_quantity (10); $ rss_items = $ feed-> get_items (0, $ maxitems); if ($ maxitems == 0): return false; else: if (is_array ($ rss_items)):?> ... dingen doen ...
Allereerst moeten we onze RSS-feed-URL instellen. Als u problemen ondervindt bij het vinden van de gewenste RSS-feed, kunt u proberen de YouTube API-feedgenerator van Google te gebruiken. Zorg ervoor dat u elke parameter zorgvuldig instelt, omdat niet alle RSS-feed-URL's de gewenste resultaten opleveren. De standaardinstellingen zouden moeten werken en ik adviseer om ook de zoekvraag en RSS 2.0-uitvoer te gebruiken voor de beste resultaten.
Zodra u uw URL heeft, verandert u deze in een objectvariabele met het magische fetch_feed () functie. Voer een controle uit om er zeker van te zijn dat er geen fouten zijn en zoek naar items die moeten worden geretourneerd. Als je een hoofdgebruiker bent, kun je je misschien amuseren met a var_dump ($ feed) om alles te zien wat het object te bieden heeft.
Nu we onze basis hebben ingesteld, moet onze pagina "... dingen doen ..." weergeven, omdat er een opbrengst is voor de feed. Nu kunnen we ons voorbereiden om de video's uit te voeren die door de feed worden geretourneerd.
Voordat we te ver voorlopen op onszelf, laten we doorgaan en wat opmaak en styling bepalen. Voor deze lay-out hebben we een grote videospeler iframe aan de bovenkant van de pagina en vervolgens miniaturen van elke video in een lijst met twee kolommen hieronder. Laten we onze tijdelijke aanduiding "do stuff" vervangen door deze:
titel van de video
Binnen onze bevattende div, hebben we twee hoofdelementen. De eerste is voor de grote videospeler en bevat de daadwerkelijke werkende video-inbedding; de andere is een lijst voor de videoselectiekolommen met miniaturen en videotitels. Vervolgens gaan we dit opmaken door wat CSS in de stylesheet van het thema te laten vallen.
#videos width: 640px; .video_player opvulling: 15px; .video_thumbs marge: 0; .video_thumbs li list-style: none; opvulling: 15px; marge: 0; zweven: links; breedte: 290 px; .video_thumbs p margin: 10px 0; .video_thumbs li: hover img, .video_thumbs li.active img opacity: .5;
Deze CSS stelt de video speler om wat ruimte eromheen te hebben en creëert twee gelijke kolommen eronder.
Er is nog een stap voordat we beginnen met het ontleden van de gegevens die we hebben opgehaald uit de RSS-feed. We moeten de video-ID in elk video-item vinden.
Om dat te doen, zullen we een aparte functie creëren die we in de thema's plaatsen functions.php bestand zodat het klaar is voor gebruik in de sjabloon.
functie wptuts_get_yt_ID ($ uri) // hoe lang YT ID's $ id_len = 11 zijn; // waar te beginnen met zoeken $ id_begin = strpos ($ uri, '? v ='); // als de ID om een of andere reden niet aan het begin van de uri staat ($ id_begin === FALSE) $ id_begin = strpos ($ uri, "& v ="); // al het andere faalt als ($ id_begin === FALSE) wp_die ('YouTube-video-ID niet gevonden. Controleer je URL aub.'); // ga nu naar de juiste start $ id_begin + = 3; // haal de ID $ yt_ID = substr ($ uri, $ id_begin, $ id_len); return $ yt_ID; Dit codefragment zoekt in principe naar een opgegeven URL voor een reeks van 11 tekens die volgt:& V ="in de zoekopdracht en verwijdert deze eerste drie tekens om de ID van de video te produceren. We kunnen dit gebruiken om"VIDEO_ID"in onze opmaak.
Nu kunnen we onze opmaak gebruiken en onze duidelijke opmaak vervangen door een werkende code zoals:
0) pauze; $ id = wptuts_get_yt_ID ($ item-> get_permalink ()); ?>get_permalink ()); $ enclosure = $ item-> get_enclosure (); ?>
">
">get_title ()); ?>
Hiermee worden twee lussen gemaakt via de RSS-items. De eerste zal na het eerste item breken, omdat we er slechts één willen retourneren iframe om mee te beginnen.
De tweede lus krijgt de $ id en $ behuizing van elk item met behulp van de SimplePie-functies die voor ons beschikbaar zijn en voert de juiste thumbnail-URL en titel uit, gekoppeld aan de embed-URL voor elke foto.
De laatste stap is om een jQuery in te voegen die het standaardgedrag van elke miniatuurlink opheft en in plaats daarvan die URL's gebruikt om de ingesloten video in de iframe. Om dit te doen, plaatst u een aangepast JavaScript-bestand in uw functions.php zoals zo:
); ?> )
add_action ('wp_enqueue_scripts', 'wptuts_enqueue_video_js'); functie 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')); Deze code controleert of de aangepaste paginasjabloon met de naam 'page-cats.php"zodat we alleen het script op die pagina oproepen en vervolgens een JS-bestand in de wacht slepen waarnaar het zoekt in onze thema's"js"directory en vereisen jQuery om het uit te voeren. Nu kunt u dat JavaScript-bestand maken met de volgende code erin:
jQuery (functie ($) $ ('#videos .video_thumbs li: first-child') .addClass ('active'); $ ('#videos .video_thumbs a') .on ('klik', functie (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););); Deze code voegt de "actief"class naar de eerste videominiatuur li. Wanneer vervolgens op een miniatuurlink wordt geklikt, stopt de link met het verlaten van de pagina, voegt u de "actief"class naar het aangeklikte item en gebruik de URL van de link om de URL in de iframe bron, waardoor de actieve video wordt vervangen door de nieuwe.
Als resultaat van al je harde werk, zou je een aangepaste videopagina moeten hebben die er ongeveer zo uitziet:
