Geef uw klanten gepersonaliseerde screencasts in het WordPress beheerdersdashboard

In deze zelfstudie laat ik u een eenvoudige manier zien om uw klanten een aantal persoonlijke video-screencasts te bieden, rechtstreeks in het WordPress beheerdersdashboard. We doen dit met behulp van een open-source mediaspeler en een beetje PHP-trickery om het proces van het beschikbaar maken van nieuwe video's voor de klant te automatiseren..

---

Na het voltooien van een geweldig project en het overhandigen aan een klant, wat is je huidige methode om geschikte training te geven? Natuurlijk, WordPress heeft een van de beste beheerpanelen die beschikbaar zijn en de meeste functies zijn redelijk eenvoudig te begrijpen / te leren - maar wat gebeurt er wanneer je een klant tegenkomt die wat problemen heeft? Hoe laat je een minder goed onderlegde client zien hoe je die geweldige nieuwe plug-in gebruikt die je net hebt geschreven?

Uw klanten zullen u hiervoor bedanken!

Uit ervaring is de meest effectieve manier om dit te doen het opnemen van mini-screencasts die precies laten zien hoe het moet. Deze hoeven geen professionele kwaliteit te zijn (hoewel Jeffrey Way hiervoor een cursus heeft ontwikkeld) omdat niemand anders dan de klant ze ooit zal zien. En als je liever niet spreekt over de video - doe dat dan niet! Neem gewoon uw scherm op.

Deze methode om screencasts aan te bieden, is ontworpen om het aantal telefoontjes en e-mails die u ontvangt te verminderen: 'waarom ziet het er niet goed uit?' of 'kun je me dat nog een keer uitleggen?'. Uw klanten zullen u ook hiervoor bedanken, omdat zij terug kunnen keren naar de video's wanneer zij hun vaardigheden willen opfrissen

---

Wij niet doen willen:

1. Om een ​​externe externe videoservice te gebruiken
2. Om een ​​van onze video's te laten verschijnen in de mediabibliotheek in het WordPress beheerdersdashboard

Wij do willen:

1. Een eenvoudige, snelle manier om onze video's te leveren
2. De mogelijkheid om een ​​video te uploaden en deze direct te laten verschijnen in het WordPress beheerdersdashboard

Tutorialoverzicht

Hier is een kort overzicht van wat we zullen behandelen:

1. Eerst stellen we de directorystructuur in en voegen we onze afhankelijkheden toe (we zullen Flowplayer gebruiken)
2. Vervolgens maken we een eenvoudige pagina in het WordPress-beheerdersdashboard
3. Vervolgens duiken we in onze videomap en genereren we een lijst met beschikbare video's
4. Eindelijk zullen we een klein beetje JavaScript schrijven dat elke video zal laden wanneer op de links wordt geklikt

Super simpel en super effectief! Laten we coderen!

---

Stap 1 Maak de plugin-directory en bestanden

1. Maak een nieuwe map in de map met plug-ins genaamd videos
2. Maak een bestand met de naam videos.php
3. Binnen in de Videos map, maak nog 3 mappen - js, mp4, swf

---

Stap 2 Download Flowplayer

"Flowplayer is een Open Source videospeler voor uw website, voor site-eigenaren, ontwikkelaars, hobbyisten, bedrijven en programmeurs" - Klinkt perfect voor ons project! Download het hier: Download (krijg de gratis versie)

Wanneer u het ZIP-bestand downloadt, bevat het een voorbeelddirectory, een README-bestand en een licentie. We willen gewoon de JavaScript bestand en de twee swf bestanden. Zoals hieronder te zien.

---

Stap 3 Kopieer de bestanden naar de plugin-directory

Neem de 3 hierboven getoonde bestanden en plaats ze in de overeenkomstige mappen die we eerder hebben gemaakt. Uw bestandsstructuur binnen de videos directory zou er nu zo uit moeten zien.

---

Stap 4 De opmerkingen van de invoegtoepassing

Ok, dus nu is het tijd om te openen videos.php en begin met het schrijven van onze plug-in! Zoals met alle WordPress-plug-ins, moeten we deze informatie aan de bovenkant van ons plugin-bestand toevoegen.

 / * Plugin Name: Tutorial Videos Plugin URI: http://wp.tutsplus.com Beschrijving: Deze plugin geeft de zelfstudie trainingsvideo's weer. Auteur: Shane Osbourne Versie: 0.1 Auteur URI: http://wp.tutsplus.com/author/shaneosbourne/ * /

---

Stap 5 Creëer de uitvoerfunctie

Omdat we in deze zelfstudie PHP gaan gebruiken, zal ik mijn best doen om elke sectie uit te leggen - maar vrees niet, het zal een stuk duidelijker worden wanneer je het hele bestand aan het einde bekijkt.

wp_videos_page ()

 functie wp_videos_page () / ** Fragmenten volgen hier ** /

---

Stap 6 Een snelle hulpfunctie

We willen onszelf niet herhalen, daarom maak ik graag een kleine help-functie zoals deze om de huidige werkdirectory van de plug-in waar we aan werken terug te zetten (het zal later nuttig zijn als we toegang nodig hebben tot assets in de plugin-directory) ).

video_plugin_path ()

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

---

Stap 7 Stel enkele variabelen in

1. Eerst geven we aan waar we onze videobestanden willen bewaren
2. Vervolgens halen we het 'echte pad' terug naar onze videomap. Dit komt omdat we later onze zullen doorzoeken mp4 map voor videobestanden met glob () en het vereist een echt pad op het bestandssysteem, niet een URL.
3. Vervolgens maken we een andere variabele die de volledige URL in ons opslaat mp4 directory

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

---

Stap 8 De opening HTML

We gaan nu stoppen met PHP, zodat we wat gewone HTML kunnen invoeren. Eerst en vooral openen we een div label met een klasse van wikkelen - dit is een generieke wrapper-klasse die WordPress gebruikt in het admin-paneel. Vervolgens stellen we een kop voor de pagina in en gebruiken we een van de pictogrammen van WordPress (de media-uploader)

 // afsluiten php?> 
 

 
Inhoudsbeheer Zelfstudievideo's.

---

Stap 9 Download de videobestanden in de mp4-directory

1. Hier zullen we gebruiken glob () om alle beschikbare videobestanden in de mp4 directory.
2. We passeren ons bestandssysteempad samen met een reguliere expressie die overeenkomt met elke versie van mp4 (MP4 en mp4, bijvoorbeeld)
3. $ videos wordt nu een array met alle videobestanden.

  
 
 Stap 10 De lus
 
Nu we een array hebben met paden naar onze videobestanden, doorlopen we ze allemaal en genereren we wat HTML-markup waarmee een link naar elke clip wordt weergegeven.
 
 
Eerst controleren we dat $ videos is niet een lege array (als dat zo is, gaan we door naar een eenvoudig bericht)
 
Vervolgens zetten we het JavaScript-bestand van Flowplayer in de wachtrij
 
Vervolgens voeren we een eenvoudig 'kies een video om te kijken' uit en openen we een 
  
 
Dan is het de eigenlijke lus. We doorlopen elk bestandspad en extraheren alleen de bestandsnaam. Dan gebruiken we str_replace en ucwords () om een ​​te maken titel voor elke video. Dit is zo dat bestanden in dit formaat worden genoemd create-a-page.mp4 zal worden Maak een pagina.
 
 'create-a-page.mp4' //<--from this 'Create a Page' //<--to this
 
 
Vervolgens genereren we wat HTML-markup voor elk videobestand met een data-video-url attribuut en a klasse van video link. 
 
 data-video-url - dit is het URL-pad naar elk videobestand. We zullen het later ophalen wanneer we het JavaScript schrijven.
 
 video link - we zullen deze CSS-selector gebruiken om te luisteren naar klikken op de links.
 
 
 
Ten slotte sluiten we de ongeordende lijst en stel ons standaardbericht in voor wanneer er momenteel geen video's zijn.
 
 
 if (! empty ($ videos)) wp_register_script ('flowplayer_js', video_plugin_path (). '/js/flowplayer-3.2.6.min.js'); wp_enqueue_script (flowplayer_js); $ o = '
Kies een video om te bekijken
'; $ o. = '
'; foreach ($ video's als $ 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 'Sorry er zijn nog geen video's om te bekijken, ik zal het je laten weten wanneer er is.'; ?> //<-- Exiting php again
 
 
 Stap 11 De video-container
 
Nu is het tijd om een div met een ID van speler - dit is waar de videospeler in zal worden geladen. Ook sluiten we de verpakking af div die we eerder hebben geopend.
 
Notitie: Flowplayer laadt standaard je video's in de opgegeven indeling div op de exacte resolutie waarop je ze hebt opgenomen. U kunt enkele inline stijlen toevoegen aan de div om de grootte van de videospeler te dwingen te zijn wat je wilt - maar wees voorzichtig als je dit doet, omdat je video's er misschien niet geweldig uitzien als je ze in een andere beeldverhouding probeert te persen.
 
 
 

 functie 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');