Dai ai tuoi clienti Screencast personalizzati nel pannello di amministrazione di WordPress

In questo tutorial, ti mostrerò un modo semplice per fornire ai tuoi clienti alcuni screencast video personalizzati direttamente nel pannello di amministrazione di WordPress. Lo faremo utilizzando un lettore multimediale open-source e un po 'di trucchetti PHP per automatizzare il processo di creazione di nuovi video disponibili per il cliente.

---

Dopo aver completato un progetto fantastico e averlo consegnato a un cliente, qual è il tuo metodo attuale per fornire una formazione appropriata? Certo, WordPress ha uno dei migliori pannelli di amministrazione disponibili e la maggior parte delle caratteristiche sono abbastanza facili da capire / imparare - ma cosa succede quando incontri un cliente che incontra qualche difficoltà? Come fai a mostrare a un cliente meno esperto come utilizzare il nuovo fantastico plug-in che hai appena scritto?

I tuoi clienti ti ringrazieranno per questo!

Dall'esperienza, il modo più efficace per farlo è registrare i mini screencast mostrando esattamente come farlo. Questi non devono essere di qualità professionale (anche se Jeffrey Way ha creato un corso per aiutarlo) poiché nessuno a parte il cliente li vedrà mai. Inoltre, se preferisci non parlare sopra il video, allora non farlo! Registra solo il tuo schermo.

Questo metodo di fornire screencast è progettato per ridurre la quantità di chiamate telefoniche ed e-mail che si ricevono chiedendo "perché non sembra giusto?" oppure "me lo puoi spiegare di nuovo?". Anche i tuoi clienti ti ringrazieranno perché potranno tornare ai video ogni volta che avranno bisogno di rispolverare le loro abilità

---

Noi non volere:

1. Per utilizzare un servizio video di terze parti esterno
2. Per visualizzare tutti i nostri video nella raccolta multimediale all'interno del pannello di amministrazione di WordPress

Noi fare volere:

1. Un modo semplice e veloce per fornire i nostri video
2. La possibilità di caricare un video e visualizzarlo istantaneamente nel pannello di amministrazione di WordPress

Panoramica dell'esercitazione

Ecco una rapida panoramica di ciò che tratteremo:

1. Per prima cosa configureremo la struttura delle directory e porteremo le nostre dipendenze (useremo Flowplayer)
2. Quindi creeremo una semplice pagina nel pannello di amministrazione di WordPress
3. Successivamente ci tufferemo nella nostra directory di video e genereremo un elenco dei video disponibili
4. Alla fine scriveremo un piccolo bit di JavaScript che caricherà ogni video quando si fa clic sui collegamenti

Super semplice e super efficace! Prendiamo il codice!

---

Passaggio 1 Creare la directory dei plugin e i file

1. Crea una nuova cartella all'interno della tua directory dei plugin chiamata video
2. Crea un file chiamato videos.php
3. Dentro il video cartella, crea altre 3 cartelle - js, mp4, swf

---

Passaggio 2 Scarica Flowplayer

"Flowplayer è un riproduttore video Open Source per il tuo sito Web. Per proprietari di siti, sviluppatori, hobbisti, aziende e programmatori" - Suoni perfetti per il nostro progetto! Scaricalo qui: Scarica (scarica la versione gratuita)

Quando si scarica il file ZIP, conterrà una directory di esempio, un file README e una licenza. Vogliamo solo il JavaScript file e i due swf File. Come visto sotto.

---

Passaggio 3 Copiare i file nella directory dei plugin

Prendi i 3 file mostrati sopra e inseriscili nelle directory corrispondenti che abbiamo creato in precedenza. La tua struttura di file all'interno del video directory dovrebbe ora assomigliare a questo.

---

Passaggio 4 Commenti del plug-in

Ok, ora è ora di aprirsi videos.php e inizia a creare il nostro plugin! Come con tutti i plugin di WordPress, dobbiamo aggiungere queste informazioni nella parte superiore del nostro file di plugin.

 / * Nome plugin: URI del plug-in Video tutorial: http://wp.tutsplus.com Descrizione: questo plug-in visualizza i video di formazione tutorial. Autore: Shane Osbourne Versione: 0.1 Autore URI: http://wp.tutsplus.com/author/shaneosbourne/ * /

---

Passaggio 5 Creare la funzione di uscita

Poiché in questo tutorial entreremo e usciremo da PHP, farò del mio meglio per spiegare ogni sezione - ma non temere, diventerà molto più chiaro quando rivedrai l'intero file alla fine.

wp_videos_page ()

 function wp_videos_page () / ** Gli snippet seguenti vanno qui ** /

---

Passaggio 6 Una funzione di aiuto rapido

Non vogliamo ripeterci, quindi mi piace creare una piccola funzione di supporto come questa per restituire la directory di lavoro corrente del plugin su cui stiamo lavorando (sarà utile in seguito quando sarà necessario accedere alle risorse nella directory dei plugin ).

video_plugin_path ()

 / ** restituisce "http://example.org/wp-content/plugins/Videos" ** / function video_plugin_path () return path_join (WP_PLUGIN_URL, basename (dirname (__FILE__))); 

---

Passaggio 7 Configurare alcune variabili

1. Per prima cosa specifichiamo dove conserveremo i nostri file video
2. Quindi recuperiamo il "percorso reale" nella nostra directory video. Questo perché più tardi cercheremo il nostro mp4 directory per file video usando glob () e richiede un vero percorso sul filesystem, non un URL.
3. Quindi creiamo un'altra variabile che memorizzerà l'intero URL nel nostro mp4 elenco

 / * in wp_videos_page () * / $ wp_video_dir = '/ mp4'; $ wp_video_real_path = dirname (__ FILE__). $ Wp_video_dir; $ wp_video_url = video_plugin_path (). $ Wp_video_dir;

---

Passaggio 8 L'HTML di apertura

Usciremo da PHP ora per poter inserire un semplice codice HTML. Prima di tutto apriamo a div tag con una classe di avvolgere - questa è una classe wrapper generica che WordPress utilizza nel pannello di amministrazione. Quindi impostiamo un'intestazione per la pagina e usiamo una delle icone di WordPress (l'uploader multimediale)

 // uscita da php?> 
 

 
Video di tutorial sulla gestione dei contenuti.

---

Passaggio 9 Scarica i file video nella directory mp4

1. Qui useremo glob () per elencare tutti i file video disponibili in mp4 elenco.
2. Passiamo il nostro percorso del file system con un'espressione regolare che corrisponderà a qualsiasi versione di mp4 (MP4 e mp4, per esempio)
3. $ video sarà ora un array contenente tutti i file video.

  
 
 Step 10 The Loop
 
Ora che abbiamo un array che contiene i percorsi dei nostri file video, passiamo in rassegna ciascuno di essi e generiamo un markup HTML che mostrerà un collegamento ad ogni clip.
 
 
Per prima cosa lo controlliamo $ video è non un array vuoto (se lo è, passiamo a un semplice messaggio)
 
Quindi accodare il file JavaScript di Flowplayer
 
Quindi produciamo un semplice messaggio "per favore scegli un video da guardare" e apri a 
  
 
Quindi è il ciclo reale. Passiamo attraverso ogni percorso di file ed estraiamo solo il nome del file. Quindi usiamo str_replace e ucwords () creare un titolo per ogni video. Questo è così che i file nominati in questo formato Create-a-page.mp4 diventerà Crea una pagina.
 
 'create-a-page.mp4' //<--from this 'Create a Page' //<--to this
 
 
Successivamente generiamo un markup HTML per ogni file video con a dati-video-url attributo e a classe di il video-link. 
 
 dati-video-url - questo sarà il percorso dell'URL per ogni file video. Lo recupereremo più tardi quando scriviamo il codice JavaScript.
 
 il video-link - useremo questo selettore CSS per ascoltare i clic sui collegamenti.
 
 
 
Alla fine, chiudiamo il non ordinata elenca e imposta il nostro messaggio predefinito per quando non ci sono attualmente video.
 
 
 if (! empty ($ videos)) wp_register_script ('flowplayer_js', video_plugin_path (). '/js/flowplayer-3.2.6.min.js'); wp_enqueue_script ( 'flowplayer_js'); $ o = '
Si prega di scegliere un video da guardare
'; $ o. = '
'; foreach ($ video come $ video) $ video_file = basename ($ video); $ needles = array ('-', '.mp4'); $ replacements = array (","); $ video_title = ucwords (str_replace ($ needles, $ replacements, $ video_file)); $ o. = sprintf (('
%S
'), $ wp_video_url. '/'. $ video_file, $ video_title);  $ o. = '
'; echo $ o;  else echo 'Spiacente, non ci sono ancora video da visualizzare, ti farò sapere quando c'è.'; ?> //<-- Exiting php again
 
 
 Passaggio 11 Il contenitore video
 
Ora è il momento di creare un div con un ID di giocatore - questo è ciò in cui verrà caricato il video player. Inoltre chiudiamo il wrapper div che abbiamo aperto prima.
 
Nota: Per impostazione predefinita, Flowplayer caricherà i tuoi video nella specifica div alla risoluzione esatta in cui li hai registrati. Potresti aggiungere alcuni stili in linea al div per forzare la dimensione del video player a essere quello che vuoi, ma fai attenzione se lo fai, in quanto i tuoi video potrebbero non sembrare grandiosi se stai cercando di comprimerli in un formato diverso.
 
 
 

 function wp_video_option_page () add_menu_page ('Video tutorial', 'Video tutorial', 'manage_options', 'wp_tutorial_videos', 'wp_videos_page');  add_action ('admin_menu', 'wp_video_option_page');