Share
I denne opplæringen integrerer vi en YouTube og Vimeo-innebygd spiller på en side på et WordPress-nettsted, uten at du trenger å treffe API-dokumentene (som er YouTube API og Vimeo API, hvis du er interessert). Ved å bruke verktøyene som er tilgjengelige for oss i WordPress med litt PHP, kan vi lage et galleri som overvinter problemet med innholdsaggregering.
For eksempel liker jeg Vimeo-spilleren, men det vil ikke alltid være meg å laste opp videoen. En tredje part kan laste opp til YouTube, og jeg vil definitivt ikke fortsette å kjøre frem og tilbake innstillingsstørrelser på nettsteder for å få den innebygde spilleren for hver video.
Når det gjelder individet, gir dette deg muligheten til å velge ditt foretrukne videoside og fortsatt kunne tilpasse dersom en tredjepart legger inn en video fra et annet nettsted. For webutviklere betyr dette at du kan gi brukeren et kontrollpanel og ikke må ta telefonsamtaler for å få råd om innebygde videoer.
"Planlegg nettstedet først ... Retrospektiv layout er en smerte."
Den første delen av denne opplæringen vil være åpenbar for de fleste erfarne utviklere og designere. Men jeg vil stresse det uansett. Planlegg nettstedet først, i dette tilfellet gallerisiden. Design wireframe, avgjør hvilken bredde og hvilken høyde du vil at videospilleren skal være. Når dette er fullført, kan du fortsette å fungere. Retrospektiv oppsett er en smerte.
Jeg brukte 960-nettverket og gjorde spilleren 300px bred og 190px høy.
Som du kanskje vet, gir Vimeo og YouTube innebygd kode du kan pakke inn i ditt WordPress-nettsted. Dette gir oss den grunnleggende spilleren, så la oss få dem.
Opplev null tyngdekraften fra Betty ønsker på Vimeo.
Med begge disse innebygde kodene kan vi tilpasse dem, endre bredde, farger, etc. Men dette er tidkrevende og repeterende. Så la oss få vår kode til å gjøre arbeidet.
Her kan vi bruke et utmerket plugin som heter Custom Field Template av Hiroaki Miyashita. Gjennom innstillingspanelet kan vi skrive inn feltene som blir våre variabler.
Tast inn
[Video ID] type = tekstfelt [Video Site] type = velg verdi = youtube # vimeo
Og skriv inn egendefinerte innleggstypevideoer. Hvis du er usikker på hvordan du lager egendefinerte innleggstyper, kan du se et enkelt plugin som heter, egendefinerte innleggstyper brukergrensesnitt av webdevstudios.com
Når dette er gjort når du legger til et nytt videopost, ser du alternativene for video-ID- og videosiden.
Den vanlige faktoren på tvers av videosider er video-IDen, på slutten av en YouTube-nettadresse ser det slik ut:
http://www.youtube.com/watch?v=WhBoR_tgXCI
YouTube-ID: WhBoR_tgXCI
På slutten av Vimeo URL ser det slik ut:
http://vimeo.com/29017795
Vimeo ID: 29017795
På grunn av dette kunne vi legge til flere videosider da de vedtar samme URL-taktikk. For nå vil vi holde fast ved de to aktuelle spørsmålene.
Så nå har vi en enkel måte å tildele en video til et innlegg, skriv inn ID og velg nettstedet.
Før vi setter opp PHP må vi opprette en side og tilordne den til en tilpasset malfil som galleri, så kan vi åpne vår nye side og gi den grunnleggende egenskaper. For mer informasjon om tilpassede malfiler sjekk ut WordPress Codex for barnemner og maler.
Nå må vi ta denne informasjonen og bruke den, legge til en sløyfe til malfilen din og ta med din wireframe. For eksempel:
videoer
'videoer', 'posts_per_page' => 10); $ loop = ny WP_Query ($ args); mens ($ loop-> have_posts ()): $ loop-> the_post (); ?>
Vi har nå videoinnleggene som sender ut tittel og innhold. La oss lage et par variabler i .galvidprevid div (en klasse, fordi vi har mer enn én), slik at vi kan ringe de tilpassede metadataene med letthet.
ID, "Video Site", single); $ videoid = get_post_meta ($ post-> ID, "Video ID", enkelt); ?>
Vi kan nå ringe til Video ID og Video Site med $ videosite og $ videoid. Så la oss få den innebygde koden fra våre to sider med bredden og høyden satt til ønsket størrelse. I den innebygde koden kan du finne IDen for videoen og erstatte den med vår variabel.
Så alt vi trenger å gjøre er å sette inn vår ID ved å erstatte den med vår variabel $ videoid. La oss ekko innholdet.
ekko '';
Så vi har vår video-ID i stedet for den vi hadde der før. Nå kan vi opprette en if-setning for å endre den innebygde spilleren avhengig av det valgte videofeltet.
'; annet hvis ($ videosite == 'youtube') echo ''; else echo 'Vennligst velg et videoside via WordPress Admin'; ?>
Sjekk at alt ser bra ut, legg til en video og POW! Bildet nedenfor av både nettstedet og administrasjonen.
Så det har vi det, jeg skal legge til noen av mine favorittvideoer og gjøre litt CSS, og det er gjort.
Her er CSS jeg brukte.
h1 font-size: 20px; #galvidcontainer bredde: 940px; margin: 0 auto; .galvidpre bredde: 300px; høyde: 325px; float: venstre; margin: 5 px; background-color: #ccc; .galvidprevid bredde: 300px; .galvidpretext bredde: 280px; padding: 10px;
Her har vi vist en fin og effektiv metode for å implementere innebygde videospillere uten behov for store mengder kode. Fandt du dette nyttig? Gi oss beskjed om hva du synes i kommentarene!
Accentsconagua