Share
În acest tutorial vom integra un player embedded YouTube și Vimeo într-o pagină de pe un site web WordPress, fără a fi nevoie să atingeți documentele API (care sunt API-ul YouTube și API-ul Vimeo, dacă sunteți interesat). Folosind instrumentele disponibile în WordPress cu un pic de PHP, putem face o galerie care să depășească problema agregării conținutului.
De exemplu, îmi place playerul Vimeo, dar nu mă va încărca întotdeauna videoclipul. O terță parte se poate încărca pe YouTube și cu siguranță nu vreau să continuu să rulez înainte și înapoi setarea dimensiunilor pe site-uri pentru a obține playerul încorporat pentru fiecare videoclip.
În ceea ce privește individul, aceasta vă oferă puterea de a alege site-ul video preferat și de a vă adapta în continuare dacă o terță parte publică un videoclip dintr-un alt site. Pentru dezvoltatorii web, acest lucru înseamnă că puteți oferi utilizatorului un panou de control și nu trebuie să luați convorbiri telefonice pentru consiliere cu privire la videoclipurile încorporate.
"Planificați mai întâi site-ul ... Aspectul retrospectiv este o durere".
Prima parte a acestui tutorial ar fi evidentă pentru cei mai experimentați dezvoltatori și designeri. Dar o voi sublinia oricum. Planificați mai întâi site-ul, în acest caz pagina de galerie. Proiectați schema, stabiliți ce lățime și în ce înălțime doriți să fie playerul video. Odată terminată, puteți trece la funcționare. Modul retrospectiv este o durere.
Am folosit sistemul de grila 960 și l-am făcut pe jucător cu o lățime de 300px și o înălțime de 190px.
După cum probabil știți, Vimeo și YouTube furnizează cod încorporat pe care îl puteți apuca pentru inserarea în site-ul dvs. WordPress. Acest lucru ne oferă jucătorul de bază, așa că să le luăm.
Experimentați Zero Gravity de la Betty Wants In pe Vimeo.
Cu ambele aceste coduri de încorporare le putem personaliza, schimba lățimea, culorile etc. Dar acest lucru este consumator de timp și repetat. Deci, să facem codul nostru să facă treaba.
Aici putem folosi un plugin excelent numit Custom Field Template de Hiroaki Miyashita. Prin panoul de setări putem introduce câmpurile care vor deveni variabilele noastre.
introduce
[Video ID] type = textfield [Video Site] tip = select value = youtube # vimeo
Și introduceți videoclipurile personalizate tip post. Dacă nu sunteți sigur de modul de a crea tipuri personalizate de posturi, consultați un plugin ușor denumit UI personalizate Tipuri de mesaje UI De WebDevStudios.com
Odată ce acest lucru se face când adăugați o postare video nouă, veți vedea opțiunile pentru ID-ul video și site-ul video.
Factorul comun pe site-urile video este ID-ul video, la sfârșitul unei adrese URL YouTube seamănă astfel:
http://www.youtube.com/watch?v=WhBoR_tgXCI
ID-ul YouTube: WhBoR_tgXCI
La sfârșitul adresei URL Vimeo se arată astfel:
http://vimeo.com/29017795
ID-ul Vimeo: 29017795
Din această cauză am putea adăuga mai multe site-uri video pe măsură ce adoptă aceeași tactică URL. Pentru moment, vom rămâne cu cei doi în cauză.
Deci, acum avem o modalitate ușoară de a atribui un videoclip unui post, de a introduce codul de identitate și de a selecta site-ul.
Înainte de a configura PHP, trebuie să creați o pagină și să o atribuiți unui fișier de șablon personalizat, cum ar fi galeria, apoi să deschidem noua noastră pagină și să îi oferim proprietăți de bază. Pentru mai multe informații despre fișierele șablon personalizate, verificați Codul WordPress pentru teme și șabloane pentru copii.
Acum trebuie să luăm aceste informații și să le folosim, să adăugăm o buclă în fișierul șablonului și să încorporăm schema dvs. de sârmă. De exemplu:
Videoclipuri
"videoclipuri", "posts_per_page" => 10); $ loop = noua valoare WP_Query ($ args); în timp ce ($ loop-> have_posts ()): $ loop-> the_post (); ?>
Acum avem postările video care își transmit titlul și conținutul. Să creăm câteva variabile în .galvidprevid div (o clasă, pentru că avem mai mult de unul), astfel încât să putem numi meta date personalizate cu ușurință.
ID, "Site-ul video", singur); $ videoid = get_post_meta ($ post-> ID, "ID-ul videoclipului", single); ?>
Acum putem apela ID-ul video și site-ul video $ videosite și $ VideoId. Deci, să obținem codul încorporat de la cele două site-uri cu lățimea și înălțimea setate la dimensiunea dorită. În codul încorporat puteți găsi ID-ul pentru videoclip și înlocuiți-l cu variabila noastră.
Deci, tot ce trebuie să facem este să inserăm ID-ul nostru înlocuindu-l cu variabila noastră $ VideoId. Să reluăm conținutul.
echo "„;
Așadar, avem codul nostru video în locul celui pe care l-am avut înainte. Acum putem crea o declarație if pentru a schimba playerul încorporat în funcție de site-ul video selectat.
„; altfel dacă ($ videosite == 'youtube') echo '„; altceva echo 'Vă rugăm să selectați un site video prin intermediul administratorului WordPress'; ?>
Verificați că totul arată bine, adăugați un videoclip și POW! Imaginea de mai jos a site-ului și a administratorului.
Deci, acolo o avem, voi adăuga unele dintre videoclipurile mele preferate și voi face un pic de CSS și sa terminat.
Iată CSS-ul folosit.
h1 font-size: 20px; # galvidcontainer width: 940px; marja: 0 auto; . galvidpre width: 300px; height: 325px; plutește la stânga; margin: 5px; culoare de fundal: #ccc; .galvidprevid width: 300px; . galvidpretext width: 280px; padding: 10px;
Aici am demonstrat o metodă plăcută și eficientă pentru implementarea dispozitivelor video integrate, fără a fi nevoie de cantități uriașe de cod. Ați găsit acest lucru util? Spuneți-ne ce credeți în comentariile dvs.!
Accentsconagua