"Bei uns jetzt chatten!" Wir haben alle diese Pop-ups auf populären Webseiten gesehen, so dass Sie wissen, dass, wenn Sie eine Frage haben oder Hilfe benötigen, gibt es jemanden (oder etwas), die Sie sich wenden können. Manchmal aber Chat ist einfach nicht das richtige Medium für immer Ihre Frage beantwortet oder die Unterstützung, die Sie brauchen. Für eine höhere Genauigkeit Erfahrung, es bis zur Video-Schritt ist die beste Option. In diesem Beitrag werde ich Ihnen zeigen, wie Twilio Video und ein wenig JavaScript und PHP verwenden, können Sie einen Video-Chat-Plugin für Wordpress bauen, die beliebtesten CMS-System der Welt. Nie baute ein Wordpress-Plugin? Keine Sorge, es ist ein geradlinig und einfach. Wollen Sie gerade für das fertige Produkt zu gehen? Kein Problem. Ergreifen Sie den vollständigen Code für das Plugin aus. Ansonsten lassen Sie uns den Bau erhalten! Erste Einrichtung Bevor wir ein paar Punkte zu sammeln, wir müssen, die wir verwenden werden unser Plugin bauen lassen Codierung. Zunächst werden Sie eine Installation von Wordpress müssen die Plugins ermöglicht. Dies kann entweder sein, oder aus der Ferne auf einem HostingAnbieter wie. Leider ist WordPress.com können eigene Plugins zu laden. Als Nächstes werden Sie ein Twilio-Konto. Wenn Sie nicht bereits eine haben! Mit einem Wordpress installieren und Twilio Konto in der Hand können wir bauen unser Plugin beginnen. Beginnen Sie mit Struktur Wordpress-Plugins sind Bits von PHP-Code, JavaScript und CSS, die die Funktionalität Ihrer Wordpress-Website erweitern und ausbauen können. Wenn Sie ein Plugin installieren, stellt Wordpress, das Vermögen dieses Plugin in einem neuen Verzeichnis unter dem / wp-content / plugins / Ordner Ihrer Wordpress-Installation. Das ist, wo wir bauen unser neues Plugin zu starten, indem Sie den Ordner und Dateistruktur zu schaffen, die wir brauchen. Erstellen Sie einen neuen Ordner mit dem Namen Twilio-Video unter dem Plugin-Verzeichnis. In diesem Verzeichnis eine Ordner- und Dateistruktur, die die Liste unten übereinstimmt. Denn jetzt können Sie die Dateien leer lassen, werden wir ihnen fügen Sie Inhalt, wie wir entlang gehen. / Wp-content / plugins / Twilio-Video Twilio-video.php randos.php Twilio-video.html / js Twilio-Video.js / cssTwilio-video.css / lib Mit der Basis Plugin-Struktur an Ort und Stelle beginnen wir einige Inhalte hinzufügen. Besorgen Sie sich die CSS-Stile für das Plugin von der und legen Sie sie in der Twilio-video.css Datei. Jetzt ist auch eine gute Zeit, um die Twilio-php Helfer Bibliothek zu unserem Projekt hinzuzufügen. Da Twilio Video noch in der Betaphase ist, müssen Sie die Hilfebibliothek zu greifen entweder die oder aus der. Sobald Sie die Helfer Bibliothek Dateien kopieren Sie sie in / lib Ordner. Schließlich werden wir noch eine letzte vorbereitete Ressource benötigen. Ein zufälliger Name Picker, die wir später verwenden wird, eine Identität zu jedem Kunden zuweisen, die an einen Agenten verbindet. Öffnen Sie randos.php und den Code aus dem Drop hinein. Genial. Wir sind nun bereit, einen Code für unser Plugin zu schreiben. Zunächst brauchen wir eine Plugin-Header zu erstellen, die einfach sind Metadaten, die Wordpress nutzt ein paar Sachen über unser Plugin kennen. Das Metadaten geht in die Twilio-video.php. Öffnen Sie diese Datei in Ihrem bevorzugten Editor und fügen Sie den folgenden: PHP <? Php / ** * Plugin Name: TwilioVideo * / ?> 1 2 3 4 5 <? Php / ** * Plugin Name: Twilio Video * /> Das Plugin Name Header ist der einzige erforderliche Header, aber es gibt, dass Sie noch mehr Details über Ihre Plugin Wordpress zur Verfügung zu stellen verwenden kann? . An diesem Punkt ist die PHP-Datei jetzt ein gültiges Wordpress-Plugin, und Sie können in Ihrem Wordpress-Admin-Interface Kopf und. Das Plugin tut nichts, doch so ist es ziemlich langweilig. Lässt Gewürz es, indem Wordpress die Twilio Video JavaScript SDK und unser Plugin-Benutzeroberfläche auf jede Seite es macht hinzuzufügen. Zurück in Twilio-video.php, rufen Sie die Funktion, um die Aktion zu verkabeln. Mit dieser Aktion können Sie uns sagen, Wordpress über eine Funktion in unserem Plugin definiert, dass wir es nennen wollen, wenn es herauszufinden, welche Ressourcen in der gerenderten Webseite aufzunehmen. In dieser Funktion werden wir die wp_enqueue_style und wp_enqueue_script Funktionen aufrufen Wordpress über die Skripte und Stile unser Plugin auf der Webseite zu informieren, umfassen muss. PHP <? Php / ** * Plugin Name: TwilioVideo * / define ( 'TWILIO_VIDEO_PLUGIN_URL', plugin_dir_url (__ FILE__)); add_action ( 'wp_enqueue_scripts', 'twilio_video_enqueue_scripts'); Funktion twilio_video_enqueue_script () { wp_enqueue_style ( 'Twilio-Video-css ", TWILIO_VIDEO_PLUGIN_URL' css / Twilio-video.css. '); wp_enqueue_script ( 'jquery'); wp_enqueue_script ( 'Twilio-common', ' wp_enqueue_script ( 'Twilio-Gespräche', ' wp_enqueue_script ( 'Twilio-Video-js', TWILIO_VIDEO_PLUGIN_URL 'js / Twilio-Video.js.'); } ?> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <? Php / ** * Plugin Name: Twilio Video * / define ( 'TWILIO_VIDEO_PLUGIN_URL', plugin_dir_url (__FILE__)); add_action ( 'wp_enqueue_scripts', 'twilio_video_enqueue_scripts'); Funktion twilio_video_enqueue_script () {wp_enqueue_style ( 'Twilio-Video-css ", TWILIO_VIDEO_PLUGIN_URL' css / Twilio-video.css. '); wp_enqueue_script ( 'jquery');wp_enqueue_script ( 'Twilio-common', '); wp_enqueue_script ( 'Twilio-Gespräche', '); wp_enqueue_script ( 'Twilio-Video-js', TWILIO_VIDEO_PLUGIN_URL 'js / Twilio-Video.js.'); }?> Für unser Plugin wir Einreihen, dass einzelne Twilio-video.css Datei, jQuery, die und die Twilio-Video.js Datei, die wir zuvor erstellt haben. Sobald die Skripte und CSS in HTML gerendert sind, können wir die API und Stile enthalten sie verwenden, um unser Plugin UI erstellen. Öffnen Sie die Twilio-video.html in Ihrem Texteditor und fügen Sie die folgende HTML: XHTML <Div id = "Twilio-video-Container"> <Div id = "Agent-Prompt"> <P> Sprechen Sie mit einem Agenten </ p> <Button id = "enter-Warteschlange"> Verbinden </ button> </ Div> <Div id = "wait-Interstitial" style = "display: none"> <P> Verbinden Sie an einen Agenten </ p> </ Div> <Div id = "Gespräch-view" style = "display: none;"> <Div id = "Remote-Medien"> </ div> <Div id = "Kontrollen"> <Div id = "Vorschau"> <divid = "local-Medien"> </ div> </ Div> </ Div> <! - / Kontrollen -> </ Div> </ Div> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <div id = "Twilio-video-Container"> <div id = "Agent-Prompt"> Sprechen Sie mit einem Agenten <button id = "enter-Warteschlange"> Verbinden </ button> <div id = "wait-Interstitial" style = "display: none"> Verbinden Sie an einen Agenten <div id = "Gespräch-view" style = "display: none; " > <Div id = "remote-media"> <div id = "Kontrollen"> <div id = "Vorschau"> <div id = "local-media"> <! - / Kontrollen -> die Datei speichern und öffnen Sie Ihre Wordpress-Seite in einem Browser. Sie sollten das Plugin zeigen sich als ein feststehendes Element in der rechten unteren Ecke der Seite zu sehen. Schauen wir uns die HTML-Vorlage sehen wir hinzugefügt. Es verfügt über drei Grundteile dazu: A, die den Benutzer auffordert, ein Mittel zur Unterstützung zu sprechen. A, die dem Benutzer sagt sie den Anschluss an einen Agenten. A, das den Benutzer zeigt, und