Opprett en YouTube-videosidemall fra et RSS-feed

Det er mange YouTube-plugins i WordPress.org-pluginarkivet, og selv i Envato-markedet, men noen ganger er et plugin bare overkill for en veldig enkel implementering av nyere videoer hentet fra en RSS-feed.

I denne veiledningen vil vi gå over hvordan du bruker data returnert fra FETCH_FEED () å skrive ut en YouTube-videosidemaler.

Opprette en sidemal

Den ferdige koden kunne også veldig enkelt bli gjort til en gjenbrukbar funksjon, men siden vi arbeider med temaet temautvikling, skal vi pakke dette inn i en sidemal.

Den beste måten å komme i gang er å bare duplisere temaet page.php mal hvis den eksisterer, eller start med temaets single.php. De viktigste tingene du vil sørge for at filen har, er malnavnet, og ringer til get_header () og get_footer (). Hvis du vil oppgi malnavnet, legger du det helt enkelt til toppen av dokumentet i kommentarer som dette:

Dette vil opprette et nytt alternativ i sidenattributter-malfeltet for å velge den tilpassede sidemalen som skal se ut som figuren her.

Slå et RSS-feed inn i brukbare data med FETCH_FEED ()

WordPress gir oss en fin liten måte å konvertere en RSS-feed til et objekt som kan brukes til å løse gjennom elementer og returnere andre data. Dette gjøres med FETCH_FEED () funksjon. For å begynne å bruke denne funksjonen, oppretter vi noen parametere og et par feilbetingelser med neste kodebit.

get_item_quantity (10); $ rss_items = $ feed-> get_items (0, $ maxitems); hvis ($ maxitems == 0): return false; ellers: hvis (is_array ($ rss_items)):?> ... gjør ting ... 

For det første må vi sette inn RSS-nettadressen. Hvis du har problemer med å finne RSS-feedet du vil, kan du prøve å bruke Googles YouTube API-feedgenerator. Vær forsiktig med å sørge for at du angir hver parameter forsiktig fordi ikke alle RSS-feedsadresser vil returnere de ønskede resultatene. Standardinnstillingene skal fungere, og jeg anbefaler at du bruker søket og RSS 2.0-utgangen for å få de beste resultatene.

Når du har nettadressen din, må du slå den inn i en objektvariabel med den magiske FETCH_FEED () funksjon. Deretter kjører den gjennom en sjekk for å sikre at det ikke er noen feil og se etter gjenstander som skal returneres. Hvis du er en strømbruker, kan du bli underholdt ved å gjøre en var_dump ($ feed) å se alt objektet har å tilby.

Nå som vi har grunnlaget vårt, skal vår side gjøre "... gjøre ting ..." fordi det er retur for fôret. Nå kan vi begynne å bli klar til å sende ut videoene som strømmen returnerer.

Legge Video Output Foundation

Før vi kommer for langt foran oss selv, la oss gå videre og legge ned noen oppslag og styling. For denne oppsettet har vi en stor videospiller iframe øverst på siden og deretter miniatyrbilder av hver video i en to kolonneliste nedenfor. La oss erstatte vår "gjør ting" plassholder med dette:

 
  
 
 
 
 
Videotittel
 
 
 

Inne i vår inneholder div har vi to hovedelementer. Den første er for den store videospilleren og vil inneholde den faktiske arbeidsvideoen som er innebygd; den andre er en liste for videovalgs kolonnene med miniatyrbilder og video titler. Deretter vil vi utforme det ved å slippe noe CSS i temaets stilark.

#videos width: 640px;  .video_player polstring: 15px;  .video_thumbs margin: 0;  .video_thumbs li listestil: none; polstring: 15px; margin: 0; flyte: venstre; bredde: 290px;  .video_thumbs p margin: 10px 0;  .video_thumbs li: svever img, .video_thumbs li.active img opacity: .5; 

Dette CSS setter videospiller opp til å ha litt plass rundt den og skaper to like kolonner under den.

Få video-IDen

Det er ett skritt før vi begynner å analysere dataene vi har hentet fra RSS-feedet. Vi må finne video-ID-en i hvert videoelement.

For å gjøre det, skaper vi en egen funksjon som vi plasserer i temaet functions.php filen slik at den er klar for at vi skal bruke i malen.

funksjon wptuts_get_yt_ID ($ uri) // hvor lenge YT ID er $ id_len = 11; // hvor skal du begynne å se $ id_begin = strpos ($ uri, '? v ='); // hvis id ikke er i begynnelsen av urinen av en eller annen grunn hvis ($ id_begin === FALSE) $ id_begin = strpos ($ uri, "& v ="); // alt annet mislykkes hvis ($ id_begin === FALSE) wp_die ('YouTube-video-ID ikke funnet. Vennligst dobbeltkryss nettadressen din.'); // nå gå til riktig start $ id_begin + = 3; // få ID $ yt_ID = substr ($ uri, $ id_begin, $ id_len); returner $ yt_ID; 

Denne delen av koden søker i utgangspunktet en gitt URL for en 11 tegnstreng som følger "& V ="i spørringen og strimler av de første tre tegnene for å produsere videoens ID. Vi kan bruke dette til å erstatte"VIDEO_ID"i vårt oppslag.

De bevegelige stykkene: Utgjøre videoene og miniatyrbildene

Nå kan vi bruke vår oppmerkning og erstatte vår enkle markup med noen arbeidskode som:

 
  0) pause; $ id = wptuts_get_yt_ID ($ item-> get_permalink ()); ?>   
 
 get_permalink ()); $ enclosure = $ item-> get_enclosure (); ?> 
 
">
 
">get_title ()); ?>
 
  
 

Dette skaper to løkker gjennom RSS-elementene. Den første vil bryte etter det første elementet siden vi bare vil returnere en iframe å starte med.

Den andre sløyfen får $ id og $ kabinett av hvert element ved hjelp av SimplePie-funksjonene som er tilgjengelige for oss, og sender den riktige miniatyradressen og tittelen, knyttet til den innebygde nettadressen for hvert bilde.

Gjør miniatyrbildet Lenker Arbeid

Det siste trinnet er å slippe i noen jQuery som vil avbryte standard oppførselen til hver miniatyrlink og i stedet bruke disse nettadressene til å endre den innebygde videoen i iframe. For å gjøre dette, legg inn en tilpasset JavaScript-fil fra din functions.php som så:

add_action ('wp_enqueue_scripts', 'wptuts_enqueue_video_js'); funksjon 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')); 

Denne koden vil sjekke for at vi er på den egendefinerte sidemalen som heter "side-cats.php"slik at vi bare kaller skriptet på den siden og deretter enqueue en JS-fil som den vil se etter i temaets"js"katalog og krever at jQuery kjører den. Nå kan du opprette JavaScript-filen med følgende kode i den:

jQuery (funksjon ($) $ ('#videos.video_thumbs li: first-child') .addClass ('aktiv'); $ ('#videos .video_thumbs a') .on ('klikk', funksjon e.preventDefault (); $ ('#videos .video_thumbs li') .removeClass ('aktiv'); $ (dette) .parentsUntil ('ul') .addClass ('aktiv'); var video = $ ) .attr ('href'); $ ('#videos .video_player iframe') .attr ('src', video);););

Denne koden vil legge til "aktiv"klassen til den første videominiatyren li. Så når en miniatyrlenk er klikket, vil den stoppe koblingen fra å forlate siden, legge til "aktiv"klassen til det klikket på elementet, og bruk nettadressen fra linken for å erstatte nettadressen i iframe kilde, og erstatter dermed den aktive videoen med den nye.

Konklusjon

Som et resultat av alt ditt harde arbeid, bør du ha en tilpasset videoside som ser noe ut som dette: