Share
Există o mulțime de pluginuri YouTube în depozitul de plugin-uri WordPress.org și chiar și în piața Envato, dar uneori un plugin este doar prea mult pentru o implementare foarte simplă a videoclipurilor recente preluate dintr-un feed RSS.
În acest tutorial vom examina cum să folosim datele returnate FETCH_FEED () pentru a afișa un șablon de pagină video YouTube.
De asemenea, codul finit ar putea fi foarte ușor transformat într-o funcție reutilizabilă, dar din moment ce avem de-a face cu tema dezvoltării temelor, o vom împacheta într-un șablon de pagină.
Cea mai bună modalitate de a începe este să copiați pur și simplu tema page.php șablon dacă există sau începeți cu tema single.php. Lucrurile cheie pe care doriți să le asigurați că fișierul are numele de șablon și apelurile către get_header () și get_footer (). Pentru a furniza numele șablonului, pur și simplu îl adăugați în partea superioară a documentului în comentarii cum ar fi:
Aceasta va crea o nouă opțiune în câmpul de șablon al atributelor paginii pentru a selecta șablonul de pagină personalizat, care ar trebui să arate similar cu cifra de aici.
Accentsconagua
FETCH_FEED () WordPress ne oferă o modalitate foarte bună de a transforma un feed RSS într-un obiect care poate fi folosit pentru a realiza buclă prin elemente și pentru a returna alte date. Acest lucru se face cu FETCH_FEED () funcţie. Pentru a începe să folosiți această funcție, vom seta câțiva parametri și câteva condiționări de eroare cu fragmentul următor de cod.
get_item_quantity (10); $ rss_items = $ feed-> get_items (0, $ maxitems); dacă ($ maxitems == 0): return false; altfel: dacă (is_array ($ rss_items)):?> ... face chestii ...
În primul rând, trebuie să setăm URL-ul feedului nostru RSS. Dacă întâmpinați dificultăți în găsirea fluxului RSS dorit, puteți încerca să utilizați generatorul de feeduri Google API YouTube. Aveți grijă să vă asigurați că setați cu atenție fiecare parametru, deoarece nu toate URL-urile feed-ului RSS vor returna rezultatele dorite. Setările implicite ar trebui să funcționeze și recomand să folosiți interogarea de căutare și ieșirea RSS 2.0 pentru rezultate optime.
După ce ai adresa URL, transformă-o într-o variabilă de obiect cu cea magică FETCH_FEED () funcţie. Apoi rulați-o printr-o verificare pentru a vă asigura că nu există erori și căutați articole care trebuie returnate. Dacă sunteți un utilizator de putere, ați putea fi distrați prin a face var_dump ($ feed) pentru a vedea tot ce are obiectul de oferit.
Acum, când avem setul de fundație, pagina noastră ar trebui să redea "... face lucruri ..." deoarece există o întoarcere pentru feed. Acum putem începe pregătirea pentru a scoate videoclipurile pe care feed-ul revine.
Înainte de a ajunge prea departe de noi înșine, să mergem mai departe și să punem niște marcaj și stil. Pentru acest aspect, vom avea un player video mare iframe în partea de sus a paginii și apoi miniaturile fiecărui videoclip într-o listă cu două coloane de mai jos. Să înlocuim substituentul nostru "make stuff" cu acest lucru:
Titlul videoclipului
În interiorul divului nostru, avem două elemente principale. Primul este pentru playerul video mare și va conține încorporarea video reală; cealaltă este o listă pentru coloanele de selecție video cu miniaturi și titluri video. Apoi, vom schimba acest aspect prin renunțarea la unele CSS în foaia de stil a temei.
#videos width: 640px; .video_player padding: 15px; .video_thumbs margine: 0; .video_thumbs li stil-list: nici unul; padding: 15px; marja: 0; plutește la stânga; lățime: 290px; .video_thumbs p margine: 10px 0; .video_thumbs li: hover img, .video_thumbs li.active img opacitate: .5;
Acest CSS stabilește video player pentru a avea un spațiu în jurul acestuia și creează două coloane egale sub el.
Mai este un pas înainte de a începe parsarea datelor pe care le-am preluat din feedul RSS. Va trebui să găsim codul video în fiecare element video.
Pentru a face acest lucru, vom crea o funcție separată pe care o vom plasa în tema functions.php fișier astfel încât să fie gata de utilizare în șablon.
funcția wptuts_get_yt_ID ($ uri) // cât de mult ID-urile YT sunt $ id_len = 11; // unde să începeți să căutați $ id_begin = strpos ($ uri, '? v ='); // dacă ID-ul nu este la începutul lui uri din anumite motive dacă ($ id_begin === FALSE) $ id_begin = strpos ($ uri, "& v ="); // toate celelalte nu reușesc dacă ($ id_begin === FALSE) wp_die ("Nu sa găsit ID-ul videoclipului YouTube. Verificați adresa URL"); // acum mergeți la startul corect $ id_begin + = 3; // obțineți ID $ yt_ID = substr ($ uri, $ id_begin, $ id_len); retur $ yt_ID; Acest cod de cod caută, în principiu, o adresă URL furnizată pentru un șir de caractere de 11 caractere care urmează "& V ="în interogare și dezactivează primele trei caractere pentru a produce ID-ul videoclipului. Putem folosi acest lucru pentru a înlocui"COD_VIDEOCLIP"în marcarea noastră.
Acum putem folosi markup-ul nostru și înlocuim markup-ul nostru simplu cu un cod de lucru cum ar fi:
0) rupe; $ id = = wptuts_get_yt_ID ($ item-> get_permalink ()); ?>get_permalink ()); $ incintă = $ element-> get_enclosure (); ?>
„>
„>get_title ()); ?>
Aceasta creează două bucle prin elementele RSS. Primul se va rupe dupa primul articol, deoarece dorim doar sa intoarcem unul iframe pentru a începe cu.
Cea de-a doua bucla devine $ id și $ incintei a fiecărui element utilizând funcțiile SimplePie disponibile și care afișează URL-ul și titlul miniatural corespunzător, legate de adresa URL de încorporare pentru fiecare fotografie.
Ultimul pas este acela de a renunța la unele jQuery care vor anula comportamentul implicit al fiecărui link miniatural și, în schimb, vor folosi acele adrese URL pentru a schimba videoclipul încorporat în iframe. Pentru a face acest lucru, introduceți un fișier JavaScript personalizat de la dvs. functions.php ca astfel:
); ?> )
add_action ('wp_enqueue_scripts', 'wptuts_enqueue_video_js'); funcția 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 ')); Acest cod va verifica pentru a vă asigura că suntem pe șablonul de pagină personalizat numit "Pagina-cats.php"astfel încât să sunăm doar script-ul pe acea pagină și apoi să cuprindem un fișier JS pe care îl va căuta în tema"js"și aveți nevoie de jQuery pentru ao rula.Acum puteți crea acel fișier JavaScript cu următorul cod în el:
jQuery (funcția ($) $ ('#videos.video_thumbs li: first-child') .addClass ('activ '); $ ('videos.video_thumbs a' e.preventDefault (); $ ('#videos .video_thumbs li') .removeClass ('activ '); $ (this) .parentsUntil (' ul ') .addClass ('activ'); ) .attr ('href'); $ ('#videos .video_player iframe') .attr ('src', video););); Acest cod va adăuga "activ"la prima miniatură video Li. Apoi, atunci când se face clic pe link-ul de miniaturi, se va opri link-ul de a părăsi pagina, adăugați "activ"la elementul pe care ați făcut clic și utilizați adresa URL din link pentru a înlocui adresa URL în iframe sursă, înlocuind astfel videoclipul activ cu unul nou.
Ca rezultat al muncii tale grele, ar trebui să ai o pagină video personalizată, care arată cam așa:
