Share
In questo tutorial integreremo un player incorporato YouTube e Vimeo su una pagina su un sito web WordPress, senza la necessità di utilizzare i documenti API (che sono API YouTube e API Vimeo, se sei interessato). Utilizzando gli strumenti a nostra disposizione in WordPress con un po 'di PHP, possiamo realizzare una galleria che risolva il problema dell'aggregazione dei contenuti.
Ad esempio mi piace il lettore Vimeo, ma non sarà sempre io a caricare il video. Una terza parte può caricare su YouTube, e sicuramente non voglio continuare a girare avanti e indietro le dimensioni dei siti per ottenere il lettore incorporato per ogni video.
In termini di individuo questo ti dà il potere di scegliere il tuo sito di video preferito e comunque essere in grado di adattarsi se una terza parte pubblica un video da un altro sito. Per gli sviluppatori web questo significa che puoi dare all'utente un pannello di controllo e non dover prendere telefonate per avere consigli sui video incorporati.
"Pianifica prima il sito ... Il layout retrospettivo è un dolore."
La prima parte di questo tutorial sarebbe ovvia per gli sviluppatori e i designer più esperti. Ma lo sottolineerò comunque. Pianifica prima il sito, in questo caso la pagina della galleria. Progetta il wireframe, decidi quale larghezza e quale altezza vuoi che sia il video player. Una volta completato, è possibile passare alla funzione. Il layout retrospettivo è un dolore.
Ho usato il sistema a griglia 960 e ho reso il giocatore largo 300 px e alto 190px.
Come forse saprai, Vimeo e YouTube forniscono codice incorporato che puoi utilizzare per incollare nel tuo sito WordPress. Questo ci dà il giocatore di base quindi portiamoli.
Sperimenta Zero Gravity da Betty Wants In su Vimeo.
Con entrambi questi codici incorporati possiamo personalizzarli, modificare la larghezza, i colori, ecc. Ma questo è dispendioso in termini di tempo e ripetitivo. Quindi facciamo in modo che il nostro codice faccia il lavoro.
Qui possiamo usare un plugin eccellente chiamato Custom Field Template di Hiroaki Miyashita. Attraverso il pannello delle impostazioni possiamo inserire i campi che diventeranno le nostre variabili.
accedere
[ID video] type = textfield [Sito video] type = select value = youtube # vimeo
E inserisci i video dei tipi di post personalizzati. Se non sei sicuro su come creare tipi di post personalizzati, consulta un semplice plugin chiamato, UI Tipi di post personalizzati di WebDevStudios.com
Una volta fatto questo quando aggiungi un nuovo post video, vedrai le opzioni per l'ID video e il sito video.
Il fattore comune tra i siti di video è l'ID video, alla fine di un URL di YouTube è simile a questo:
http://www.youtube.com/watch?v=WhBoR_tgXCI
L'ID YouTube: WhBoR_tgXCI
Alla fine dell'URL Vimeo appare così:
http://vimeo.com/29017795
L'ID Vimeo: 29017795
Per questo motivo potremmo aggiungere altri siti video adottando la stessa tattica URL. Per ora ci atteniamo ai due in questione.
Quindi ora abbiamo un modo semplice per assegnare un video a un post, inserire l'ID e selezionare il sito.
Prima di configurare il PHP, abbiamo bisogno di creare una pagina e assegnarla a un file modello personalizzato come la galleria, possiamo quindi aprire la nostra nuova pagina e dargli le proprietà di base. Per maggiori informazioni sui file modello personalizzati, consulta il codice WordPress per temi e modelli figlio.
Ora dobbiamo prendere queste informazioni e usarle, aggiungere un ciclo al file del modello e incorporare il wireframe. Per esempio:
video
"video", "posts_per_page" => 10); $ loop = new WP_Query ($ args); while ($ loop-> have_posts ()): $ loop-> the_post (); ?>
Ora abbiamo i post dei video che trasmettono il titolo e il contenuto. Creiamo un paio di variabili nel .galvidprevid div (una classe, perché ne abbiamo più di una), quindi possiamo chiamare facilmente i metadati personalizzati.
ID, "Sito video", singolo); $ videoid = get_post_meta ($ post-> ID, "ID video", singolo); ?>
Ora possiamo chiamare l'ID video e il sito video $ videosite e $ VideoId. Quindi prendiamo il codice incorporato dai nostri due siti con la larghezza e l'altezza impostate sulla dimensione desiderata. Nel codice incorporato puoi trovare l'ID per il video e sostituirlo con la nostra variabile.
Quindi tutto ciò che dobbiamo fare è inserire il nostro ID sostituendolo con la nostra variabile $ VideoId. Facciamo eco al contenuto.
eco '';
Quindi abbiamo il nostro ID video al posto di quello che avevamo prima. Ora possiamo creare un'istruzione if per cambiare il player incorporato in base al sito video selezionato.
'; else if ($ videosite == 'youtube') echo ''; else echo 'Selezionare un sito video tramite l'Admin di WordPress'; ?>
Controlla che tutto sia a posto, aggiungi un video e POW! Immagine qui sotto sia del sito che dell'amministratore.
Quindi, ce l'abbiamo, aggiungerò alcuni dei miei video preferiti e farò un po 'di CSS ed è fatto.
Ecco il CSS che ho usato.
h1 font-size: 20px; #galvidcontainer width: 940px; margine: 0 auto; .galvidpre width: 300px; altezza: 325px; float: sinistra; margin: 5px; background-color: #ccc; .galvidprevid width: 300px; .galvidpretext width: 280px; padding: 10px;
Qui abbiamo dimostrato un metodo valido ed efficace per l'implementazione di lettori video incorporati senza la necessità di enormi quantità di codice. Hai trovato questo utile? Fateci sapere cosa ne pensate nei commenti!
Accentsconagua