Gi kundene dine personlige Screencasts i WordPress Admin Panel

I denne opplæringen vil jeg vise deg en enkel måte å gi kundene dine noen tilpassede video-skjermbilder direkte i WordPress-administrasjonspanelet. Vi gjør dette ved hjelp av en open source mediespiller og en liten bit av PHP-trickery for å automatisere prosessen med å lage nye videoer tilgjengelig for klienten.

---

Når du fullfører et fantastisk prosjekt og overlater det til en klient, hva er din nåværende metode for å gi riktig opplæring? Visst, WordPress har en av de beste administrasjonspanelene, og de fleste funksjonene er ganske enkle å forstå / lære - men hva skjer når du kommer over en klient som møter noen problemer? Hvordan viser du en mindre enn kunnskapsrik klient hvordan du bruker det fantastiske nye pluginet du nettopp har skrevet?

Dine kunder vil takke for dette!

Fra erfaring, den mest effektive måten å gjøre dette på er å registrere mini-screencasts som viser nøyaktig hvordan du gjør det. Disse trenger ikke å være profesjonell kvalitet (selv om Jeffrey Way har laget et kurs for å hjelpe med det) som ingen andre enn klienten noensinne vil se dem. Også, hvis du heller ikke snakker over videoen - så ikke! Bare ta opp skjermen din bare.

Denne metoden for å levere screencasts er utformet for å redusere mengden telefonsamtaler og e-postmeldinger du mottar, spør "hvorfor ser det ikke ut?" eller "kan du forklare det for meg igjen?". Dine kunder vil takke for dette også, da de kan komme tilbake til videoene når de trenger å pusse opp sine ferdigheter

---

Vi ikke ønsker:

1. Å måtte bruke en ekstern tredjeparts videotjeneste
2. Å ha noen av våre videoer som dukker opp i mediebiblioteket inne i WordPress Admin Panel

Vi gjøre ønsker:

1. En enkel og rask måte å levere våre videoer på
2. Muligheten til å laste opp en video og få den til å vises umiddelbart i WordPress Admin Panel

Opplæringsoversikt

Her er en rask gjennomgang av hva vi skal dekke:

1. Først vil vi sette opp katalogstrukturen og ta inn våre avhengigheter (vi bruker Flowplayer)
2. Da lager vi en enkel side i WordPress-administrasjonspanelet
3. Deretter dykker vi inn i videokatalogen vår og genererer en liste over tilgjengelige videoer
4. Til slutt vil vi skrive en liten bit av JavaScript som vil laste inn hver video når koblingene klikkes

Super enkel og super effektiv! La oss få koding!

---

Trinn 1 Opprett Plugin Directory og filer

1. Opprett en ny mappe i plugin-katalogen din videoer
2. Opprett en fil som heter videos.php
3. Inne i videoer mappe, opprett 3 flere mapper - js, mp4, swf

---

Trinn 2 Last ned Flowplayer

"Flowplayer er en åpen kildekode videospiller for nettstedet ditt. For eiere, utviklere, hobbyister, bedrifter og programmerere" - Lyder perfekt for vårt prosjekt! Last ned det her: Last ned (hent gratisversjonen)

Når du laster ned ZIP-filen, vil den inneholde et eksempelkatalog, en README-fil og en lisens. Vi vil bare ha Javascript fil og de to swf filer. Som vist nedenfor.

---

Trinn 3 Kopier filene til Plugin Directory

Ta de 3 filene som er vist ovenfor, og legg dem inn i de tilsvarende katalogene vi opprettet tidligere. Din filstruktur inne i videoer katalog bør nå se slik ut.

---

Trinn 4 Plugin Kommentarer

Ok, så nå er det på tide å åpne opp videos.php og begynn å forklare pluginet vårt! Som med alle WordPress-plugins, må vi legge til denne informasjonen øverst i pluginfilen vår.

 / * Plugin Name: Opplæringsvideoer Plugin URI: http://wp.tutsplus.com Beskrivelse: Dette pluginet viser opplæringsopplæringsvideoene. Forfatter: Shane Osbourne Versjon: 0.1 Forfatter URI: http://wp.tutsplus.com/author/shaneosbourne/ * /

---

Trinn 5 Opprett utgangsfunksjonen

Fordi vi skal slippe inn og ut av PHP i denne opplæringen, vil jeg gjøre mitt beste for å forklare hver seksjon - men frykt ikke, det blir mye klarere når du vurderer hele filen på slutten.

wp_videos_page ()

 funksjon wp_videos_page () / ** Følgende utdrag går her ** /

---

Trinn 6 En rask hjelperfunksjon

Vi ønsker ikke å gjenta oss selv, så jeg liker å lage en liten hjelperfunksjon som denne for å returnere gjeldende arbeidskatalog for pluginet vi jobber med (det vil være nyttig senere når vi trenger tilgang til ressurser i plugin-katalogen ).

video_plugin_path ()

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

---

Trinn 7 Sette opp noen variabler

1. Først angir vi hvor vi skal beholde våre videofiler
2. Da henter vi den "virkelige banen" til vår videokatalog. Dette er fordi vi senere søker etter vår mp4 katalog for videofiler ved hjelp av glob () og det krever en ekte sti på filsystemet, ikke en URL.
3. Deretter oppretter vi en annen variabel som lagrer hele nettadressen i vår mp4 katalog

 / * innen 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;

---

Trinn 8 Åpningen HTML

Vi kommer til å slippe ut av PHP nå, slik at vi kan skrive inn noen vanlig HTML. Først av alt åpner vi opp en div tag med en klasse av pakke inn - Dette er en generell wrapper-klasse som WordPress bruker i administrasjonspanelet. Deretter setter vi en overskrift på siden og bruker en av WordPress 'ikoner (media opplasteren)

 // spennende php?> 
 

 
Innholdsveiledning for innholdsbehandling.

---

Trinn 9 Hent videofilene i mp4-katalogen

1. Her skal vi bruke glob () å liste alle tilgjengelige videofiler i mp4 katalog.
2. Vi overfører filsystembanen sammen med et vanlig uttrykk som passer til hvilken som helst versjon av mp4 (MP4 og mp4, for eksempel)
3. $ videoer vil nå være en matrise som inneholder alle videofiler.

  
 
 Trinn 10 Loop
 
Nå som vi har en matrise som inneholder stier til våre videofiler, slår vi gjennom hver og genererer noe HTML-oppslag som vil vise en lenke til hvert klipp.
 
 
Først sjekker vi det $ videoer er ikke en tom rekkefølge (hvis det er, hopper vi over til en enkel melding)
 
Deretter anvender vi Flowplayer JavaScript-filen
 
Deretter sender vi ut en enkel 'vennligst velg en video å se' melding og åpne en 
  
 
Så er det selve sløyfen. Vi går gjennom hver filsti og trekker kun filnavnet ut. Så bruker vi str_replace og ucwords () å lage en tittel for hver video. Dette er slik at filene heter i dette formatet create-a-page.mp4 vil bli Lag en side.
 
 'create-a-page.mp4' //<--from this 'Create a Page' //<--to this
 
 
Deretter genererer vi noe HTML-oppslag for hver videofil med en data-video-url attributt og a klasse av video-link. 
 
 data-video-url - Dette vil være URL-banen til hver videofil. Vi henter det senere når vi skriver JavaScript.
 
 video-link - Vi bruker denne CSSvelgeren til å lytte etter klikk på koblingene.
 
 
 
Til slutt lukker vi av uordnet liste og angi standardmeldingen for når det foreløpig ikke er noen videoer.
 
 
 hvis (! tomt ($ videoer)) wp_register_script ('flowplayer_js', video_plugin_path (). '/js/flowplayer-3.2.6.min.js'); wp_enqueue_script ( 'flowplayer_js'); $ o = '
Vennligst velg en video å se på
'; $ o. = '
'; foreach ($ videoer som $ video) $ video_file = basename ($ video); $ nåler = array ('-', '.mp4'); $ erstatninger = array (","); $ video_title = ucwords (str_replace ($ nåler, $ erstatninger, $ video_file)); $ o. = sprintf (('
% s
'), $ wp_video_url. '/'. $ video_file, $ video_title);  $ o. = '
'; ekko $ o;  ellers echo 'Beklager, det er ingen videoer å vise enda, jeg vil gi deg beskjed når det er.'; ?> //<-- Exiting php again
 
 
 Trinn 11 Videobeholderen
 
Nå er det på tide å lage en div med en ID av spiller - dette er hva videospilleren vil bli lastet inn i. Vi lukker også innpakningen div som vi åpnet tidligere.
 
Merk: Som standard vil Flowplayer laste inn videoene i det angitte div ved den nøyaktige oppløsningen du registrerte dem på. Du kan legge til noen inline stiler til div for å tvinge størrelsen på videospilleren til å være hva du vil - men vær forsiktig hvis du gjør dette, da videoene dine kanskje ikke ser bra ut hvis du prøver å presse dem inn i et annet formatforhold.
 
 
 

 funksjon wp_video_option_page () add_menu_page ('Opplæringsvideoer', 'Opplæringsvideoer', 'manage_options', 'wp_tutorial_videos', 'wp_videos_page');  add_action ('admin_menu', 'wp_video_option_page');