Share
Ci sono molti plugin di YouTube nel repository dei plugin di WordPress.org, e anche nel marketplace di Envato, ma a volte un plugin è semplicemente eccessivo per un'implementazione molto semplice dei video recenti recuperati da un feed RSS.
In questo tutorial, vedremo come utilizzare i dati restituiti da fetch_feed () per generare un modello di pagina video di YouTube.
Il codice finito potrebbe anche essere facilmente trasformato in una funzione riutilizzabile, ma dal momento che abbiamo a che fare con l'argomento dello sviluppo del tema, lo avvolgeremo in un modello di pagina.
Il modo migliore per iniziare è duplicare semplicemente i temi page.php modello se esiste, o inizia con il tema single.php. Le cose fondamentali che vorrai assicurarti che il file abbia sono il nome del modello e le chiamate a get_header () e get_footer (). Per fornire il nome del modello, devi semplicemente aggiungerlo alla parte superiore del documento in commenti in questo modo:
Ciò creerà una nuova opzione nel campo Modello attributi della pagina per selezionare il modello di pagina personalizzato che dovrebbe apparire simile alla figura qui.
Accentsconagua
fetch_feed () WordPress ci fornisce un modo molto carino per trasformare un feed RSS in un oggetto che può essere utilizzato per scorrere gli articoli e restituire altri dati. Questo è fatto con il fetch_feed () funzione. Per iniziare a utilizzare questa funzione, imposteremo alcuni parametri e un paio di condizionali di errore con il frammento di codice successivo.
get_item_quantity (10); $ rss_items = $ feed-> get_items (0, $ maxitems); if ($ maxitems == 0): restituisce false; else: if (is_array ($ rss_items)):?> ... fai roba ...
In primo luogo, dobbiamo impostare il nostro URL del feed RSS. Se hai difficoltà a trovare il feed RSS che desideri, puoi provare a utilizzare il generatore di feed API YouTube di Google. Fai attenzione ad assicurarti di impostare ogni parametro attentamente perché non tutti gli URL dei feed RSS restituiranno i risultati desiderati. Le impostazioni predefinite dovrebbero funzionare e consiglio di utilizzare anche la query di ricerca e l'output RSS 2.0 per ottenere i migliori risultati.
Una volta che hai il tuo URL, trasformalo in una variabile oggetto con il magico fetch_feed () funzione. Quindi esegui un controllo per assicurarti che non vi siano errori e cerca gli articoli da restituire. Se sei un utente esperto, potresti essere intrattenuto facendo a var_dump ($ feed) per vedere tutto ciò che l'oggetto ha da offrire.
Ora che abbiamo il nostro set di base, la nostra pagina dovrebbe rendere "... fare cose ..." perché c'è un ritorno per il feed. Ora possiamo iniziare a preparare i video che il feed restituisce.
Prima di arrivare troppo avanti a noi stessi, andiamo avanti e mettiamo giù qualche markup e styling. Per questo layout, avremo un video player di grandi dimensioni iframe nella parte superiore della pagina e quindi le anteprime di ciascun video in un elenco di due colonne di seguito. Sostituiamo il nostro segnaposto "fare cose" con questo:
Titolo del video
All'interno del nostro div contenitore, abbiamo due elementi principali. Il primo è per il video player di grandi dimensioni e conterrà l'effettivo video di lavoro incorporato; l'altro è un elenco per le colonne di selezione video con miniature e titoli video. Successivamente, lo sistemeremo facendo cadere alcuni CSS nel foglio di stile del tema.
#videos width: 640px; .video_player padding: 15px; .video_thumbs margin: 0; .video_thumbs li list-style: none; imbottitura: 15px; margine: 0; fluttuare: a sinistra; larghezza: 290 px; .video_thumbs p margin: 10px 0; .video_thumbs li: hover img, .video_thumbs li.active img opacity: .5;
Questo CSS imposta il lettore video fino ad avere un po 'di spazio intorno e crea due colonne uguali sotto di esso.
C'è un altro passaggio prima di iniziare l'analisi dei dati che abbiamo recuperato dal feed RSS. Avremo bisogno di trovare l'ID del video in ogni elemento video.
Per farlo, creeremo una funzione separata che inseriremo nei temi functions.php file in modo che sia pronto per essere utilizzato nel modello.
function wptuts_get_yt_ID ($ uri) // per quanto tempo gli ID YT sono $ id_len = 11; // dove iniziare a guardare $ id_begin = strpos ($ uri, '? v ='); // se l'id non è all'inizio di uri per qualche ragione se ($ id_begin === FALSE) $ id_begin = strpos ($ uri, "& v ="); // tutto il resto fallisce se ($ id_begin === FALSE) wp_die ('YouTube ID video non trovato. Controlla due volte il tuo URL.'); // ora vai al giusto inizio $ id_begin + = 3; // ottiene l'ID $ yt_ID = substr ($ uri, $ id_begin, $ id_len); return $ yt_ID; Questo bit di codice cerca fondamentalmente un URL fornito per una stringa di 11 caratteri che segue "& V ="nella query e rimuove i primi tre caratteri per produrre l'ID del video. Possiamo usarlo per sostituire"VIDEO_ID"nel nostro markup.
Ora possiamo usare il nostro markup e sostituire il nostro markup semplice con un codice funzionante come questo:
0) pausa; $ id = wptuts_get_yt_ID ($ item-> get_permalink ()); ?>get_permalink ()); $ enclosure = $ item-> get_enclosure (); ?>
">
">get_title ()); ?>
Questo crea due loop attraverso gli elementi RSS. Il primo si romperà dopo il primo elemento dal momento che vogliamo solo restituirne uno iframe iniziare con.
Il secondo ciclo ottiene il $ id e $ recinzione di ciascun elemento utilizzando le funzioni di SimplePie disponibili per noi e genera l'appropriato URL e titolo della miniatura, collegato all'URL di incorporamento per ogni foto.
Il passaggio finale consiste nel rilasciare alcuni jQuery che annulleranno il comportamento predefinito di ciascun collegamento di anteprima e utilizzeranno invece tali URL per modificare il video incorporato nel iframe. Per fare ciò, accodare un file JavaScript personalizzato dal tuo functions.php così:
); ?> )
add_action ('wp_enqueue_scripts', 'wptuts_enqueue_video_js'); function 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')); Questo codice controllerà per assicurarci che siamo sul modello di pagina personalizzato denominato "Pagina-cats.php"così che chiamiamo solo lo script su quella pagina e poi accodiamo un file JS che cercherà nel nostro tema"js"directory e richiede jQuery per eseguirlo. Ora puoi creare quel file JavaScript con il seguente codice in esso:
jQuery (function ($) $ ('#videos .video_thumbs li: first-child') .addClass ('active'); $ ('#videos .video_thumbs a') .on ('click', function (e) e.preventDefault (); $ ('#videos .video_thumbs li') .removeClass ('active'); $ (this) .parentsUntil ('ul') .addClass ('active'); var video = $ (questo ) .attr ('href'); $ ('#videos .video_player iframe') .attr ('src', video););); Questo codice aggiungerà il "attivo"classe alla prima miniatura del video Li. Quindi, quando viene fatto clic su un collegamento di anteprima, il link non verrà più chiuso dalla pagina, aggiungere "attivo"Classificare l'elemento su cui si fa clic e utilizzare l'URL dal link per sostituire l'URL in iframe fonte, sostituendo così il video attivo con quello nuovo.
Come risultato di tutto il tuo duro lavoro, dovresti avere una pagina video personalizzata simile a questa:
