Share
I den här handledningen integreras en YouTube-och Vimeo-inbäddad spelare på en sida på en WordPress-webbplats, utan att behöva träffa API-dokumenten (som är YouTube API och Vimeo API, om du är intresserad). Genom att använda de verktyg som finns tillgängliga för oss i WordPress med lite PHP kan vi skapa ett galleri som övervinner problemet med innehållsaggregation.
Till exempel gillar jag Vimeo-spelaren, men det kommer inte alltid vara mig att ladda upp videon. En tredje part kan ladda upp till YouTube, och jag vill absolut inte fortsätta att köra fram och tillbaka inställningsstorlekar på webbplatser för att få den inbäddade spelaren för varje video.
När det gäller individen ger du dig möjligheten att välja din favorit videosida och ändå kunna anpassa om en tredje part skickar in en video från en annan sida. För webbutvecklare betyder det att du kan ge användaren en kontrollpanel och inte behöva ta telefonsamtal för råd om inbäddade videor.
"Planera ut webbplatsen först ... Retrospektiv layout är en smärta."
Den första delen av denna handledning skulle vara uppenbar för de flesta erfarna utvecklare och designers. Men jag kommer ändå att betona det. Planera ut webbplatsen först, i det här fallet gallerisidan. Konstruera wireframe, bestäm vilken bredd och vilken höjd du vill ha videospelaren att vara. När detta är klart kan du fortsätta att fungera. Retrospektiv layout är en smärta.
Jag använde 960-nätet och gjorde spelaren 300px bred och 190px hög.
Som du kanske vet tillhandahåller Vimeo och YouTube inbäddad kod som du kan fånga för att klistra in på din WordPress-webbplats. Detta ger oss grundspelaren så låt oss få dem.
Upplev Zero Gravity från Betty vill på Vimeo.
Med båda dessa inbädda koder kan vi anpassa dem, ändra bredd, färger etc. Men det här är tidskrävande och repetitivt. Så låt oss göra vår kod göra jobbet.
Här kan vi använda ett utmärkt plugin som heter Custom Field Template av Hiroaki Miyashita. Via inställningspanelen kan vi mata in de fält som blir våra variabler.
Stiga på
[Video ID] typ = textfält [Video Site] typ = välj värde = youtube # vimeo
Och ange de anpassade inläggstypvideoerna. Om du är osäker på hur du skapar egna posttyper, se ett enkelt plugin som heter, Anpassade inläggstyper UI Av WebDevStudios.com
När det här är gjort när du lägger till ett nytt videopost kommer du att se alternativen för video-ID och videosite.
Den vanliga faktorn på videosidor är video-ID: en i slutet av en YouTube-webbadress ser det ut så här:
http://www.youtube.com/watch?v=WhBoR_tgXCI
YouTube-id: WhBoR_tgXCI
I slutet av Vimeo-webbadressen ser det ut så här:
http://vimeo.com/29017795
Vimeo-id: 29017795
På grund av detta kunde vi lägga till fler videosidor, eftersom de antar samma URL-taktik. För nu håller vi fast vid de två ifrågavarande.
Så nu har vi ett enkelt sätt att tilldela en video till ett inlägg, ange ID och välj webbplatsen.
Innan vi ställer in PHP måste vi skapa en sida och tilldela den till en anpassad mallfil som galleri, så kan vi öppna vår nya sida och ge den grundläggande egenskaper. För mer information om anpassade mallfiler kolla in WordPress Codex för barnteman och mallar.
Nu måste vi ta den här informationen och använda den, lägga till en slinga i din mallfil och ta med din wireframe. Till exempel:
videoklipp
'videos', 'posts_per_page' => 10); $ loop = ny WP_Query ($ args); medan ($ loop-> has_posts ()): $ loop-> the_post (); ?>
Vi har nu videoposterna som utger deras titel och innehåll. Låt oss skapa ett par variabler i .galvidprevid div (en klass, eftersom vi har mer än en), så vi kan enkelt ringa de anpassade metadata.
ID, "Video Site", singel); $ videoid = get_post_meta ($ post-> ID, "Video ID", singel); ?>
Vi kan nu ringa till Video ID och Video Site med $ videosite och $ VideoId. Så låt oss få den inbäddade koden från våra två sidor med bredden och höjden inställd till önskad storlek. I den inbäddade koden kan du hitta ID för videon och ersätta det med vår variabel.
Så allt vi behöver göra är att infoga vårt ID genom att ersätta det med vår variabel $ VideoId. Låt oss echo innehållet.
eko "';
Så vi har vårt video ID i stället för det vi hade där tidigare. Nu kan vi skapa ett if-uttalande för att ändra den inbäddade spelaren beroende på den valda videobilden.
'; annars om ($ videosite == 'youtube') echo ''; annars echo 'Var god välj en videosite via WordPress Admin'; ?>
Kolla allt ser bra ut, lägg till en video och POW! Bild nedan för både webbplatsen och admin.
Så där har vi det, jag ska lägga till några av mina favoritvideor och göra lite CSS och det är klart.
Här är CSS jag använde.
h1 font-size: 20px; #galvidcontainer width: 940px; marginal: 0 auto; .galvidpre bredd: 300px; höjd: 325px; flyta till vänster; marginal: 5px; bakgrundsfärg: #ccc; .galvidprevid bredd: 300px; .galvidpretext bredd: 280px; padding: 10px;
Här har vi visat en fin och effektiv metod för att implementera inbyggda videospelare utan att behöva stora mängder kod. Hittade du det här till hjälp? Låt oss veta vad du tycker i kommentarerna!
Accentsconagua