Share
Die Gerüchte sind wahr! Das WordPress Admin Panel verwendet nun Underscore und Backbone! Dies bedeutet, dass wir diese fantastischen JavaScript-Bibliotheken mit minimalem Aufwand in unseren eigenen Plugins einsetzen können. Dieses Tutorial zeigt Ihnen genau, wie Sie das machen können. Wir erstellen den Admin-Teil eines Quiz-Plugins. Wir verwenden einen einfachen benutzerdefinierten Beitragstyp, um die Fragen zu speichern, und dann fügen wir in jeder Frage eine Meta-Box hinzu, in der wir bis zu 4 Antworten eingeben und auswählen können, welche die richtige ist. Wir werden durchgehen, wie man Vorlagen verwendet, wie man sich mit Click- und Key-up-Ereignissen verbindet, wie man Daten in der WordPress-Datenbank speichert und vor allem, wie man als Ersteller die Wahrheit aus dem Dom herausbekommt Jeremy Ashkenas drückt es gerne aus.
Ich werde im Vorhinein sagen, dass das Plugin, das wir in diesem Tutorial erstellen, für das, was es leistet, übermäßig wortreich wirkt. Sie erhalten jedoch einen hervorragenden Einblick in die Welt der Verwendung von Backbone. Sollten Sie in der Zukunft auf ein Projekt stoßen, das eine komplexe Benutzeroberfläche mit viel JavaScript erfordert, sind Sie bestens gerüstet und bereit, die dringend benötigte Organisation mitzubringen die Party.
In diesem ersten Teil werden wir das hintere Ende unseres Plugins einrichten. Dies umfasst das Einrichten der Dateien und Ordner sowie die Implementierung aller Funktionen, die unser Plugin in PHP benötigt. Wir müssen:
Sobald wir unser Backend eingerichtet haben, geben wir den erforderlichen HTML-Code für unsere Meta-Box zusammen mit den Daten für jede Antwort im JSON-Format aus. Wir werden auch das JavaScript schreiben, das alles miteinander verbindet. Wir behandeln:
Ich hoffe, dass diese kleine Serie für Sie interessant klingt, und ich freue mich darauf, Sie bei der Verwendung von Backbone.js in einem WordPress-Plugin zu unterstützen.
Dieses kleine Plugin verwendet einen benutzerdefinierten Beitragstyp, um Fragen zu speichern. In einer Meta-Box erstellen wir dann vier Eingaben, mit denen Benutzer mögliche Antworten auf die aktuelle Frage eingeben und auswählen können, welche der Antworten die richtige ist. Wenn eine Antwort geändert wird, wird die entsprechende Schaltfläche zum Speichern aktiviert. Wenn Sie darauf klicken, verwenden wir die integrierte Backbone-Funktion model.save () Methode, um die Daten wieder in der WordPress-Datenbank zu speichern. Wenn die Antworten in die Eingaben geschrieben werden, aktualisiert das Auswahlfeld darunter automatisch seine Werte, da nach Änderungen an den Modellen gesucht wird. All diese Dinge sind relativ unwichtig für Backbone. Nachdem Sie dieses Tutorial gelesen haben, können Sie Ihre Plugins mit WordPress auf die nächste Stufe bringen.
Es gibt viel zu berichten, also fangen wir an!
Wir müssen alle für ein Plugin üblichen Schritte ausführen - die Ordner der Dateien erstellen.
Ihre Ordnerstruktur sollte so aussehen.
Innen wp_quiz.php.
/ * Plugin-Name: WP Quiz Plugin-URI: http://wp.tutsplus.com/author/shaneosbourne/ Beschreibung: Ein Beispiel für die Verwendung von Backbone in einem Plugin. Autor: Shane Osbourne Version: 0.1 Autor URI: http://wp.tutsplus.com/author/shaneosbourne/ * /
Immer noch in wp_quiz.php, Wir müssen die folgenden Dinge tun:
Accentsconagua
/ ** wp_quiz.php ** / include 'src / WpQuiz.php'; // Klassendatei // Eine Instanz der Plugin-Klasse erstellen function call_wp_quiz () return new WpQuiz ('admin'); // Nur wenn der aktuelle Benutzer ein Administrator ist if (is_admin) add_action ('init', 'call_wp_quiz'); // Hilfsfunktion if (! Function_exists ('pp')) function pp () return plugin_dir_url (__FILE__); Helferfunktion einstellen pp () In dieser Datei können wir andere Dateien relativ zum Stammverzeichnis des Plugin-Ordners referenzieren (Sie werden dies in Kürze in Aktion sehen).
Innerhalb der src Erstellen Sie eine Datei mit dem Namen WpQuiz.php.
In dieser Plugin-Klasse benötigen wir einige verschiedene Methoden, um alle der folgenden Aufgaben auszuführen:
Bevor wir jedoch die Methoden schreiben, speichern wir einige Informationen als Klasseneigenschaften. Wir speichern diese Informationen oben in unserer Klassendatei, damit Änderungen später leichter vorgenommen werden können. Das answerIds Array enthält die Schlüssel, die wir in diesem Plugin verwenden werden, um Daten mit dem integrierten zu speichern add_post_meta ().
/ ** src / WpQuiz.php ** / class WpQuiz // Namen des benutzerdefinierten Beitragstyps public $ postTypeNameSingle = 'Question'; public $ postTypeNamePlural = 'Fragen'; // Meta Box Stuff public $ metaBoxTitle = 'Answers'; public $ metaBoxTempl = 'templates / metabox.templ.php'; // Question Ids public $ answerIds = array ('quiz-a-1', 'quiz-a-2', 'quiz-a-3', 'quiz-a-4'); // Javascript public $ jsAdmin = '/js/admin.js'; / ** src / WpQuiz.php ** / public function __construct ($ type) switch ($ type) case 'admin': // Registrieren Sie den Post-Typ $ this-> registerPostType ($ this-> postTypeNameSingle, $ this) -> postTypeNamePlural); // Füge die Meta Box hinzu add_action ('add_meta_boxes', array ($ this, 'addMetaBox')); // Eine Ajax-Anfrage annehmen add_action ('wp_ajax_save_answer', array ($ this, 'saveAnswers')); // Watch for Post wird gespeichert add_action ('save_post', array ($ this, 'savePost')); / ** src / WpQuiz.php ** / public function addMetaBox () // Lädt das auf dieser Administratorseite benötigte Javascript. $ this-> addScripts (); // Erzeuge eine ID basierend auf dem Post-Typ-Namen $ id = $ this-> postTypeNameSingle. "_metabox"; // Füge die Meta-Box add_meta_box hinzu ($ id, $ this-> metaBoxTitle, array ($ this, 'getMetaBox'), // Hole das benötigte Markup $ this-> postTypeNameSingle);
Hier durchlaufen wir unsere Antwort-IDs und erstellen ein Array, das Post-Meta enthält, das mit unserer Hilfsmethode abgerufen wurde getOneAnswer. Wir erstellen dieses neue Array, sodass wir es kodieren und im JSON-Format an unsere Vorlage senden können - genau so, wie es Backbone mag. Wir senden Daten zu unserer Vorlage mit der $ viewData Array unten zu sehen. Dadurch wird der gesamte HTML-Code nicht in Gefahr geraten und wir können ihn in einer separaten Datei bearbeiten. Wir werfen einen kurzen Blick auf die getTemplatePart Methode später, aber wenn Sie eine ausführliche Erklärung benötigen, warum ich sie benutze, lesen Sie bitte Verbessern Sie Ihre Arbeitsabläufe - Trennen Sie Ihr Markup von Ihrer Logik!
/ ** src / WpQuiz.php ** / public function getMetaBox ($ post) // Liefert die aktuellen Werte für die Fragen $ json = array (); foreach ($ this-> answerIds als $ id) $ json [] = $ this-> getOneAnswer ($ post-> ID, $ id); // Setze benötigte Daten in der Vorlage $ viewData = array ('post' => $ post, 'answers' => json_encode ($ json), 'correct' => json_encode (get_post_meta ($ post-> ID, 'correct_answer.) '))); echo $ this-> getTemplatePart ($ this-> metaBoxTempl, $ viewData); Wir geben nur ein Array der Daten zurück, die in unserer Vorlage benötigt werden. Sie können sich das als ein einzelnes Modell vorstellen, das für das Frontend benötigt wird.
/ ** src / WpQuiz.php ** / public function getOneAnswer ($ post_id, $ answer_id) return array ('answer_id' => $ answer_id, 'antwort' = 'get_post_meta ($ post_id, $ answer_id, true)); Wenn ein Benutzer klickt, um einen Beitrag zu speichern, in dem sich unsere Meta-Box gerade befindet, müssen wir einige Überprüfungen durchführen, um sicherzustellen, dass wir unseren benutzerdefinierten Beitragstyp speichern und der aktuelle Benutzer über die richtigen Berechtigungen verfügt. Wenn beide Überprüfungen in Ordnung sind, sind wir in der Lage Speichern Sie die vier Antworten aus der Meta-Box und die richtige Antwort.
/ ** src / WpQuiz.php ** / public function savePost ($ post_id) // Überprüfen Sie, ob wir unseren Custom Post-Typ speichern, wenn ($ _POST ['post_type']!) == strtolower ($ this-> postTypeNameSingle) ) Rückkehr; // Überprüfen Sie, ob der Benutzer die richtigen Berechtigungen hat, wenn (! $ This-> canSaveData ($ post_id)) return; // Greifen Sie mit $ _POST global auf die Daten zu und erstellen Sie ein neues Array mit // den Informationen, die zum Speichern erforderlich sind. $ Fields = array (); foreach ($ this-> answerIds als $ id) $ fields [$ id] = $ _POST [$ id]; // Das neue Array durchlaufen und jedes foreach speichern / aktualisieren ($ fields als $ id => $ field) add_post_meta ($ post_id, $ id, $ field, true); // oder update_post_meta ($ post_id, $ id, $ field); // Speichern / Aktualisieren der korrekten Antwort add_post_meta ($ post_id, 'correct_answer', $ _POST ['correct_answer'], true); // oder update_post_meta ($ post_id, 'correct_answer', $ _POST ['correct_answer']);
Hier erhalten wir Daten, die vom Backbone an den Server übermittelt werden. Wir müssen:
/ ** src / WpQuiz.php ** / public function saveAnswers () // Hole PUT-Daten und dekodiere sie $ model = json_decode (file_get_contents ("php: // input")); // Stellen Sie sicher, dass dieser Benutzer die richtigen Berechtigungen hat, wenn (! $ This-> canSaveData ($ model-> post_id)) return; // Versuch ein Insert / Update zu machen $ update = add_post_meta ($ model-> post_id, $ model-> answer_id, $ model-> answer, true); // oder $ update = update_post_meta ($ model-> post_id, $ model-> answer_id, $ model-> answer); // Wenn das Speichern oder Aktualisieren erfolgreich war, geben Sie das Modell im JSON-Format zurück. If ($ update) echo json_encode ($ this-> getOneAnswer ($ model-> post_id, $ model-> answer_id)); else echo 0; sterben(); Hier sind die vier Helfer, die in den obigen Ausschnitten erwähnt werden.
canSaveData () - Dies stellt lediglich sicher, dass der aktuelle Benutzer über die entsprechenden Berechtigungen zum Bearbeiten / Aktualisieren dieses Beitrags verfügt.addScripts () - Beachten Sie, dass wir hier sicherstellen, dass wir den 5. Parameter an den übergeben wp_register_script () Funktion. Dadurch wird unser benutzerdefiniertes JavaScript in die Fußzeile geladen und es wird sichergestellt, dass unsere JSON-Daten verfügbar sind. Wenn Sie den WordPress-Editor in Ihrem Plugin verwenden, müssen Sie Backbone nicht als Abhängigkeit angeben, da es Ihnen bereits zur Verfügung steht. Ich füge es hier jedoch ein, um das Beispiel zu unterstützen.registerPostType () - Dies ist etwas, was ich oft in Plugins verwende. Es macht das Leben einfacher, wenn Sie einen neuen benutzerdefinierten Beitragstyp hinzufügen. Es akzeptiert sowohl Singular- als auch Pluralversionen des Namens, da es nicht immer so einfach ist wie das Hinzufügen eines 's'.getTemplatePart () - Ich hatte noch nie Lust, Mark-Up in meinen Methoden zu haben. Dieser kleine Helfer ermöglicht die Verwendung einer separaten Vorlagendatei. / ** src / WpQuiz.php ** / / ** * Ermitteln Sie, ob der aktuelle Benutzer über die entsprechenden Berechtigungen verfügt. * * @param $ post_id * @return bool * / private Funktion canSaveData ($ post_id) if (definiert ('DOING_AUTOSAVE.) ') && DOING_AUTOSAVE) gibt false zurück; if ('page' == $ _POST ['post_type']) if (! current_user_can ('edit_page', $ post_id)) gibt false zurück; else if (! current_user_can ('edit_post', $ post_id)) gibt false zurück; return true; private Funktion addScripts () wp_register_script ('wp_quiz_main_js', pp (). $ this-> jsAdmin, array ('backbone'), null, true); wp_enqueue_script ('wp_quiz_main_js'); / ** * Registrieren eines benutzerdefinierten Beitragstyps * * @param $ single * @param $ plural * @param null $ unterstützt * / private Funktion registerPostType ($ single, $ plural, $ unterstützt = null) $ labels = array ( 'name' => _x ($ Plural, 'posttyp allgemeiner name'), 'singular_name' => _x ("$ single", "posttyp singular name"), 'add_new' => _x ("Add new $ single") "," $ single "), 'add_new_item' => __ (" Add new $ single "), 'edit_item' => __ (" $ single bearbeiten "), 'new_item' => __ (" new $ single ") , 'all_items' => __ ("All $ plural"), 'view_item' => __ ("View $ single"), 'search_items' => __ ("Search $ plural"), 'not_found' => __ ( "Kein $ Plural gefunden"), 'not_found_in_trash' => __ ("Kein $ single im Papierkorb gefunden"), 'parent_item_colon' => ", 'menu_name' => $ plural '; $ args = array (' labels '= > $ labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => true, 'Capability_type' = > 'post', 'has_archive' => true, 'hierarchisch' => false, 'menu_position' => nul l, 'unterstützt' => ($ unterstützt)? $ unterstützt: array ('title', 'editor', 'page-attributes')); register_post_type ($ single, $ args); / ** * Rendern einer Vorlagendatei * * @param $ filePath * @param null $ viewData * @return string * / public Funktion getTemplatePart ($ filePath, $ viewData = null) ($ viewData)? Auszug ($ viewData): null; ob_start (); include ("$ filePath"); $ template = ob_get_contents (); ob_end_clean (); $ template zurückgeben; Zu diesem Zeitpunkt haben wir alles für unser Backend eingerichtet. Es ist Zeit, eine Pause einzulegen und uns auf den nächsten Teil vorzubereiten, in dem wir uns mit den clientseitigen Vorlagen JavaScript und Backbone.js auseinandersetzen werden. Ich hoffe, Sie dort zu sehen - es wird ein guter sein.
