Oferiți clienților Screencast-uri personalizate în panoul de administrare WordPress

În acest tutorial, vă voi arăta o modalitate ușoară de a oferi clienților dvs. câteva secvențe video personalizate direct în Panoul de administrare WordPress. Vom face acest lucru folosind un media player open-source și un pic de trickery PHP pentru a automatiza procesul de a face noi videoclipuri disponibile clientului.

---

După ce ați finalizat un proiect minunat și l-ați predat unui client, care este metoda dvs. curentă pentru furnizarea de formare adecvată? Sigur, WordPress are unul dintre cele mai bune panouri de administrare disponibile și majoritatea funcțiilor sunt destul de ușor de înțeles / învățat - dar ce se întâmplă când întâlniți un client care întâmpină dificultăți? Cum arăți un client mai puțin înțelept cum să folosești noul plug-in uimitor pe care tocmai l-ai scris?

Clienții dvs. vă vor mulțumi pentru acest lucru!

Din experiență, modul cel mai eficient de a face acest lucru este de a înregistra mini-screencast-uri care arată exact cum se face. Acestea nu trebuie să fie de o calitate profesională (deși Jeffrey Way a produs un curs care să ajute la asta) ca nimeni altul decât clientul le va vedea vreodată. De asemenea, dacă preferați să nu vorbiți despre videoclip - atunci nu faceți asta! Trebuie doar să înregistrați ecranul.

Această metodă de furnizare a ecranelor este proiectată pentru a reduce cantitatea de apeluri telefonice și e-mailuri pe care le primiți, întrebând "de ce nu arată bine?" sau "puteți să-mi explicați asta din nou?". Clienții dvs. vă vor mulțumi și pentru acest lucru, deoarece aceștia se pot întoarce la videoclipuri ori de câte ori au nevoie să-și îmbunătățească abilitățile

---

Noi nu face vrei:

1. Trebuie să utilizați un serviciu video extern terț
2. Pentru a avea oricare dintre videoclipurile noastre afișate în biblioteca media din interiorul panoului de administrare WordPress

Noi do vrei:

1. Un mod simplu, rapid de a oferi videoclipurile noastre
2. Abilitatea de a încărca un videoclip și de ao afișa instantaneu în panoul de administrare WordPress

Prezentare generală a tutorialului

Iată o scurtă trecere a ceea ce vom acoperi:

1. Mai întâi vom configura structura directorului și vom aduce dependențele noastre (vom folosi Flowplayer)
2. Apoi vom crea o pagină simplă în panoul de administrare WordPress
3. Apoi, vom intra în directorul nostru video și vom genera o listă a videoclipurilor disponibile
4. În cele din urmă, vom scrie un pic de JavaScript care va încărca fiecare videoclip atunci când sunt făcute clic pe link-uri

Super simplu și super eficient! Să facem codificarea!

---

Pasul 1 Creați directorul și fișierele Plugin

1. Creați un dosar nou în directorul de pluginuri numit Videoclipuri
2. Creați un fișier numit videos.php
3. În interiorul Videoclipuri folder, creați încă 3 dosare - js, mp4, swf

---

Pasul 2 Descărcați Flowplayer

"Flowplayer este un player video Open Source pentru site-ul dvs. Pentru proprietarii de site-uri, dezvoltatori, pasionați, companii și programatori" - Sună perfect pentru proiectul nostru! Descărcați-l aici: Descărcați (obțineți versiunea gratuită)

Când descărcați fișierul ZIP, acesta va conține un director de exemplu, un fișier README și o licență. Vrem doar JavaScript fișier și cele două swf fișiere. După cum se vede mai jos.

---

Pasul 3 Copiați fișierele în directorul Plugin

Luați cele 3 fișiere prezentate mai sus și le puneți în directoarele pe care le-am creat înainte. Structura fișierului dvs. în interiorul Videoclipuri directorul ar trebui să arate așa.

---

Pasul 4 Comentarii Plugin

Ok, deci acum e timpul să ne deschidem videos.php și începe să creăm pluginul nostru! Ca și în cazul tuturor pluginurilor WordPress, trebuie să adăugăm aceste informații în partea de sus a fișierului nostru plugin.

 / * Nume Plugin: Tutorial Video Plugin URI: http://wp.tutsplus.com Descriere: Acest plugin afiseaza Video Tutorial Training. Autor: Shane Osbourne Versiune: 0.1 Autor URI: http://wp.tutsplus.com/author/shaneosbourne/ * /

---

Pasul 5 Crearea funcției de ieșire

Pentru că vom intra în și din PHP în acest tutorial, voi face tot posibilul pentru a explica fiecare secțiune - dar nu vă temeți, va deveni mult mai clară atunci când revizuiți întregul dosar la sfârșit.

wp_videos_page ()

 funcția wp_videos_page () / ** Următoarele fragmente intră aici ** /

---

Pasul 6 O funcție Quick Helper

Nu vrem sa ne repetam, asa ca imi place sa creez o functie de ajutor ca aceasta pentru a returna directorul curent de lucru al pluginului pe care lucram (va fi de folos mai tarziu cand avem nevoie de acces la active in directorul plugin ).

video_plugin_path ()

 / ** returnează "http://example.org/wp-content/plugins/Videos" ** / funcția video_plugin_path () return path_join (WP_PLUGIN_URL, nume de bază (dirname (__FILE__))); 

---

Pasul 7 Setarea unor variabile

1. Mai întâi specificăm unde ne vom păstra fișierele video
2. Atunci vom recupera "calea reală" în directorul nostru video. Asta pentru că mai târziu vom căuta pe noi mp4 director pentru utilizarea fișierelor video glob () și necesită o cale reală pe sistemul de fișiere, nu o adresă URL.
3. Apoi vom crea o altă variabilă care va stoca întreaga adresă URL în nostru mp4 director

 / * în cadrul paginii 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;

---

Pasul 8 Deschiderea HTML

Vom renunța acum la PHP pentru a putea introduce un HTML simplu. Mai întâi de toate, deschidem o div eticheta cu o clasă de împacheta - aceasta este o clasă generică pe care WordPress o folosește în panoul de administrare. Apoi, setăm o rubrică pentru pagină și folosim una dintre pictogramele WordPress (încărcătorul media)

 // ieșirea din php?> 
 

 
Content Management Tutorial videoclipuri.

---

Pasul 9 Obțineți fișierele video în directorul mp4

1. Aici vom folosi glob () pentru a afișa toate fișierele video disponibile în mp4 director.
2. Transmitem calea sistemului nostru de fișiere împreună cu o expresie regulată care se va potrivi cu orice versiune de mp4 (MP4 și mp4, de exemplu)
3. $ videoclipuri va fi acum o matrice care conține toate fișierele video.

  
 
 Pasul 10 Buclă
 
Acum, că avem o matrice care conține căi spre fișierele noastre video, vom trece prin fiecare și vom genera un marcaj HTML care va afișa un link către fiecare clip.
 
 
Mai întâi verificăm asta $ videoclipuri este nu o matrice goală (dacă este, noi trecem printr-un mesaj simplu)
 
Apoi intrăm în fișierul JavaScript pentru Flowplayer
 
Apoi vom emite un mesaj simplu "vă rugăm să alegeți un videoclip pentru a viziona" și deschideți o 
  
 
Apoi este bucla reală. Trecem prin fiecare cale de fișier și extragem numai numele fișierului. Apoi vom folosi str_replace și ucwords () pentru a crea un titlu pentru fiecare videoclip. Acest lucru este în așa fel încât fișierele numite în acest format creați-un-page.mp4 va deveni Creaza o pagina.
 
 'create-a-page.mp4' //<--from this 'Create a Page' //<--to this
 
 
Apoi vom genera unele marcaj HTML pentru fiecare fișier video cu un date video-url atributul și a clasă de video-link. 
 
 date video-url - aceasta va fi calea URL a fiecărui fișier video. Îl vom recupera mai târziu când vom scrie JavaScript.
 
 video-link - vom folosi acest selector CSS pentru a asculta clicurile pe link-uri.
 
 
 
În cele din urmă, închidem neordonate listați și setați mesajul nostru implicit pentru momentul în care în prezent nu există videoclipuri.
 
 
 dacă ! empty ($ videos)) wp_register_script ('flowplayer_js', video_plugin_path () ./js/flowplayer-3.2.6.min.js '); wp_enqueue_script ( 'flowplayer_js'); $ o = '
Alegeți un videoclip pentru a viziona
„; $ o. = '
„; foreach ($ video ca $ video) $ video_file = nume de bază ($ video); $ ace = array ('-', '.mp4'); $ înlocuiri = array (","); $ video_title = ucwords (str_replace ($ ace, $ înlocuitori, $ video_file)); $ o. = sprintf (('
% s
'), $ wp_video_url. '/'. $ video_file, $ video_title);  $ o. = '
„; echo $ o;  altceva echo 'Ne pare rău că nu există videoclipuri pe care să le vizualizăm încă, vă voi anunța atunci când există.'; ?> //<-- Exiting php again
 
 
 Pasul 11 ​​Containerul video
 
Acum este momentul să creați o div cu un ID de jucător - acesta este ceea ce va fi încărcat playerul video. De asemenea, închidem ambalajul div pe care am deschis-o mai devreme.
 
Notă: În mod prestabilit, Flowplayer va încărca videoclipurile dvs. în specificația specificată div la rezoluția exactă la care le-ați înregistrat. Puteți adăuga câteva stiluri inline la div pentru a forța dimensiunea player-ului video să fie tot ceea ce doriți - dar aveți grijă dacă faceți acest lucru, deoarece videoclipurile dvs. ar putea să nu pară minunate dacă încercați să le strângeți într-un alt aspect.
 
 
 

 funcția wp_video_option_page () add_menu_page ("Tutorial Videos", "Tutorial Videos", "manage_options", "wp_tutorial_videos", "wp_videos_page");  add_action ('admin_menu', 'wp_video_option_page');