Geben Sie Ihren Kunden personalisierte Screencasts im WordPress-Admin-Panel

In diesem Tutorial zeige ich Ihnen einen einfachen Weg, Ihren Kunden einige personalisierte Video-Screencasts direkt im WordPress-Admin-Panel zur Verfügung zu stellen. Wir machen dies mit einem Open-Source-Mediaplayer und etwas PHP-Trickserei, um den Prozess der Bereitstellung neuer Videos für den Client zu automatisieren.

---

Wenn Sie ein großartiges Projekt abgeschlossen haben und es einem Kunden übergeben haben, wie lautet Ihre derzeitige Methode, um entsprechende Schulungen anzubieten? Sicher, WordPress verfügt über eines der besten Verwaltungspanels auf dem Markt und die meisten Funktionen sind relativ leicht zu verstehen / zu erlernen - aber was passiert, wenn Sie auf einen Client stoßen, der auf Schwierigkeiten stößt? Wie zeigen Sie einem weniger versierten Kunden, wie er dieses erstaunliche neue Plugin verwendet, das Sie gerade geschrieben haben??

Ihre Kunden werden es Ihnen danken!

Aus Erfahrung ist der effektivste Weg, dies zu tun, Mini-Screencasts aufzunehmen, die genau zeigen, wie es geht. Diese müssen nicht in professioneller Qualität sein (obwohl Jeffrey Way einen entsprechenden Kurs entwickelt hat), denn niemand außer dem Kunden wird sie jemals sehen. Auch wenn Sie lieber nicht über das Video sprechen - dann nicht! Nehmen Sie einfach nur Ihren Bildschirm auf.

Diese Methode der Bereitstellung von Screencasts soll die Anzahl der Anrufe und E-Mails, die Sie erhalten, mit der Frage "Warum sieht es nicht richtig aus?" oder 'Kannst du mir das nochmal erklären?' Ihre Kunden werden es Ihnen auch danken, da sie jederzeit zu den Videos zurückkehren können, wenn sie ihre Fähigkeiten auffrischen möchten

---

Wir nicht wollen:

1. Verwenden Sie einen externen Videodienst eines Drittanbieters
2. Wenn eines unserer Videos in der Medienbibliothek im WordPress Admin Panel angezeigt wird

Wir tun wollen:

1. Eine einfache und schnelle Möglichkeit, unsere Videos bereitzustellen
2. Die Möglichkeit, ein Video hochzuladen und sofort im WordPress-Admin-Panel anzuzeigen

Tutorial-Übersicht

Hier ein kurzer Überblick über das, was wir behandeln werden:

1. Zuerst richten wir die Verzeichnisstruktur ein und bringen unsere Abhängigkeiten ein (wir verwenden Flowplayer).
2. Dann erstellen wir eine einfache Seite im WordPress Admin Panel
3. Als Nächstes tauchen wir in unser Videoverzeichnis ein und erstellen eine Liste der verfügbaren Videos
4. Schließlich schreiben wir ein kleines bisschen JavaScript, das jedes Video lädt, wenn auf die Links geklickt wird

Super einfach und super effektiv! Lass uns die Codierung bekommen!

---

Schritt 1 Erstellen Sie das Plugin-Verzeichnis und die Dateien

1. Erstellen Sie einen neuen Ordner in Ihrem Plugins-Verzeichnis mit dem Namen Videos
2. Erstellen Sie eine Datei mit dem Namen videos.php
3. In der Videos Ordner erstellen, 3 weitere Ordner erstellen - js, mp4, swf

---

Schritt 2 Laden Sie den Flowplayer herunter

"Flowplayer ist ein Open Source-Videoplayer für Ihre Website. Für Websitebesitzer, Entwickler, Bastler, Unternehmen und Programmierer" - Klingt perfekt für unser Projekt! Laden Sie es hier herunter: Laden Sie die kostenlose Version herunter

Wenn Sie die ZIP-Datei herunterladen, enthält sie ein Beispielverzeichnis, eine README-Datei und eine Lizenz. Wir wollen nur die JavaScript Datei und die beiden swf Dateien. Wie unten zu sehen.

---

Schritt 3 Kopieren Sie die Dateien in das Plugin-Verzeichnis

Nehmen Sie die 3 oben gezeigten Dateien und legen Sie sie in den entsprechenden Verzeichnissen ab, die wir zuvor erstellt haben. Ihre Dateistruktur im Videos Das Verzeichnis sollte jetzt so aussehen.

---

Schritt 4 Die Plugin-Kommentare

Ok, jetzt ist es Zeit sich zu öffnen videos.php und beginnen Sie mit der Erstellung unseres Plugins! Wie bei allen WordPress-Plugins müssen wir diese Informationen oben in unserer Plugin-Datei einfügen.

 / * Plugin Name: Tutorial Videos Plugin URI: http://wp.tutsplus.com Beschreibung: Dieses Plugin zeigt die Tutorial Schulungsvideos an. Autor: Shane Osbourne Version: 0.1 Autor URI: http://wp.tutsplus.com/author/shaneosbourne/ * /

---

Schritt 5 Erstellen Sie die Ausgabefunktion

Da wir in diesem Tutorial in PHP ein- und aussteigen werden, werde ich jeden Abschnitt genau erklären. Aber keine Angst, es wird viel klarer, wenn Sie am Ende die gesamte Datei durchsehen.

wp_videos_page ()

 Funktion wp_videos_page () / ** Die folgenden Snippets finden Sie hier ** /

---

Schritt 6 Eine Schnellhilfefunktion

Wir möchten uns nicht wiederholen, deshalb möchte ich eine kleine Hilfsfunktion wie diese erstellen, um das aktuelle Arbeitsverzeichnis des Plugins zurückzugeben, an dem wir gerade arbeiten (es wird später hilfreich sein, wenn wir auf Assets im Plugin-Verzeichnis zugreifen müssen ).

video_plugin_path ()

 / ** gibt "http://example.org/wp-content/plugins/Videos" zurück. ** / function video_plugin_path () return path_join (WP_PLUGIN_URL, Basisname (Verzeichnisname (__FILE__))); 

---

Schritt 7: Einige Variablen einrichten

1. Zuerst legen wir fest, wo wir unsere Videodateien aufbewahren werden
2. Dann rufen wir den "echten Pfad" zu unserem Videoverzeichnis ab. Das liegt daran, dass wir später nach unserem suchen werden mp4 Verzeichnis für Videodateien mit glob () und es erfordert einen echten Pfad im Dateisystem, keine URL.
3. Dann erstellen wir eine weitere Variable, die die gesamte URL in unsere speichert mp4 Verzeichnis

 / * innerhalb von 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;

---

Schritt 8 Das Eröffnungs-HTML

Wir werden PHP jetzt beenden, damit wir etwas einfaches HTML eingeben können. Zunächst öffnen wir ein div tag mit einer Klasse von wickeln - Dies ist eine generische Wrapper-Klasse, die WordPress im Verwaltungsbereich verwendet. Als Nächstes legen wir eine Überschrift für die Seite fest und verwenden eines der WordPress-Symbole (den Medien-Uploader).

 // PHP beenden?> 
 

 
Videos zum Content Management Tutorial.

---

Schritt 9 Holen Sie sich die Videodateien im mp4-Verzeichnis

1. Hier werden wir verwenden glob () um alle verfügbaren Videodateien in der mp4 Verzeichnis.
2. Wir übergeben unseren Dateisystempfad zusammen mit einem regulären Ausdruck, der zu jeder Version von passt mp4 (MP4 und mp4, zum Beispiel)
3. $ videos wird nun ein Array mit allen Videodateien sein.

  
 
 Schritt 10 Die Schleife
 
Da wir nun ein Array mit Pfaden zu unseren Videodateien haben, durchlaufen wir jede einzelne Datei und generieren HTML-Markierungen, die einen Link zu jedem Clip anzeigen.
 
 
Zuerst prüfen wir das $ videos ist nicht ein leeres Array (wenn ja, springen wir zu einer einfachen Nachricht)
 
Dann erfassen wir die Flowplayer-JavaScript-Datei
 
Als Nächstes geben wir eine einfache "Bitte wählen Sie ein Video zum Anschauen" aus und öffnen eine 
  
 
Dann ist es die eigentliche Schleife. Wir gehen jeden Dateipfad durch und extrahieren nur den Dateinamen. Dann benutzen wir str_replace und ucwords () ein erstellen Titel für jedes Video. Dies ist so, dass Dateien in diesem Format benannt werden create-a-page.mp4 wird werden Erstelle eine Seite.
 
 'create-a-page.mp4' //<--from this 'Create a Page' //<--to this
 
 
Als Nächstes generieren wir ein HTML-Markup für jede Videodatei mit einem Daten-Video-URL Attribut und a Klasse von Video-Link. 
 
 Daten-Video-URL - Dies ist der URL-Pfad zu jeder Videodatei. Wir werden es später abrufen, wenn wir das JavaScript schreiben.
 
 Video-Link - Wir werden diesen CSS-Selektor verwenden, um Klicks auf die Links zu hören.
 
 
 
Zum Schluss schließen wir das ungeordnet liste und setze unsere Standardnachricht, wenn aktuell keine Videos vorhanden sind.
 
 
 if (! empty ($ videos)) wp_register_script ('flowplayer_js', video_plugin_path (). '/js/flowplayer-3.2.6.min.js'); wp_enqueue_script ('flowplayer_js'); $ o = '
Bitte wählen Sie ein Video zum Anschauen
'; $ o. = '
'; foreach ($ videos als $ video) $ video_file = Basisname ($ video); $ Nadeln = Array ('-', '.mp4'); $ Ersetzungen = Array (","); $ video_title = ucwords (str_replace ($ nadeln, $ ersatz, $ video_file)); $ o. = sprintf (('
% s
'), $ wp_video_url. '/'. $ video_file, $ video_title);  $ o. = '
'; echo $ o;  else echo 'Leider gibt es noch keine Videos zum Anzeigen. Ich werde Sie informieren, wenn es welche gibt.'; ?> //<-- Exiting php again
 
 
 Schritt 11 Der Videocontainer
 
Jetzt ist es an der Zeit, eine div mit einer ID von Spieler - Darauf wird der Videoplayer geladen. Wir schließen auch den Wrapper ab div dass wir früher geöffnet haben.
 
Hinweis: Standardmäßig lädt Flowplayer Ihre Videos in die angegebenen div mit der genauen Auflösung, in der Sie sie aufgenommen haben. Sie können einige Inline-Stile zum hinzufügen div So erzwingen Sie die Größe des Videoplayers, wie Sie möchten - aber seien Sie vorsichtig, wenn Sie dies tun, da Ihre Videos möglicherweise nicht besonders gut aussehen, wenn Sie versuchen, sie in ein anderes Seitenverhältnis zu quetschen.
 
 
 

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