Wir behandeln viele Themen in diesem Blog - alles, was so einfach ist wie das Einfügen und Anfordern von Vorlagendateien in WordPress-Projekten bis hin zu einer ganzen Serie in der Einstellungs-API, aber ich denke, es gibt immer Raum für ein einfaches How -Das umfasst eine einzelne, spezifische Aufgabe im Kontext von WordPress.
In dieser zweiteiligen Serie wollen wir uns also mit der Einführung eines jQuery-Datumsauswahlprogramms in unserem Post-Editor befassen, damit wir einem bestimmten Post ein Datum zuordnen können.
Über das Plugin
Wir werden dies alles im Rahmen eines Plugins tun, so dass der Quellcode einfach über GitHub heruntergeladen werden kann und ein praktisches Beispiel für das Tutorial liefert.
Das erste, was zu beachten ist, ist die Einbindung der jQuery-Datumsauswahl nicht soll das Veröffentlichungsdatum des Beitrags ersetzen. Es soll stattdessen eine einfache Möglichkeit bieten, ein Datum auszuwählen, in den Post-Metadaten zu speichern und dann für andere Zwecke anzuzeigen, z. B. wenn ein Ereignis eintritt.
Planung des Plugins
Für jeden, der einen meiner vorherigen Beiträge gelesen hat, weißt du, dass ich von Anfang an ein Fan der Planung des Projekts bin und dann jeden Schritt einzeln implementiere, um sicher zu gehen, dass alles klar ist, was passiert.
Also machen wir das jetzt:
Wir stellen die Skeleton-Klasse für das Plugin zur Verfügung
Wir schreiben den Code, der für die Generierung der Post-Meta-Box verantwortlich ist, mit der der Benutzer das Datum auswählen kann
Wir implementieren die jQuery-Datumsauswahl, sodass Benutzer tatsächlich ein Datum auswählen können
Wir speichern die Daten, wenn der Beitrag veröffentlicht und / oder aktualisiert wird
Das Datum wird am vorderen Ende des Beitrags angezeigt
Unkompliziert, richtig? Nachdem dies gesagt ist, lasst uns anfangen.
Plugin erstellen
Am Ende dieses Artikels ist das gesamte Plugin in diesem GitHub-Repository verfügbar. Ich empfehle jedoch dringend, den Code selbst mitzuschreiben und selbst zu schreiben, um sicherzustellen, dass Sie alles, was wir tun, befolgen.
Der Code werden kommentiert werden, so sollte es leicht zu folgen sein. Wenn nicht, zögern Sie nicht, Kommentare nach dem Beitrag zu hinterlassen.
1. Stub die Plugin-Klasse aus
Vorausgesetzt, Sie haben das bereits erstellt WordPress-jQuery-Date-Picker Verzeichnis in Ihrem WP-Inhalt / Plugins Verzeichnis, gehen Sie vor und erstellen Sie zwei Dateien:
plugin.php
README.txt
Wir werden das wieder besuchen README file in ein bisschen, aber lass uns die Klasse, die als unser Plugin dient, durchstreichen.
Hier ist der Code mit weiteren Erklärungen nach dem Snippet:
Offensichtlich ist noch nicht viel dabei. Wir haben einfach die Klasse definiert, einen leeren Konstruktor gesetzt und das Plugin außerhalb der Klasse instanziiert.
Bevor wir weitergehen, bereiten wir das Plugin für die Lokalisierung vor. Dazu müssen wir mehrere Dinge tun:
A einführen lang Verzeichnis
Hinzufügen lang / plugin.po
Legen Sie die Textdomäne für das Plugin im Konstruktor fest
Denken Sie daran, dass die Lokalisierung verwendet wird, um sicherzustellen, dass Übersetzer unser Plugin mit anderen Sprachen kompatibel machen können und dass Poedit das Werkzeug der Wahl ist.
Das plugin.po Die Datei sollte etwa Folgendes enthalten (Ihre Datei wird sich offensichtlich je nach Datum, Uhrzeit und Konfiguration von Poedit unterscheiden):
msgid "" msgstr "" "Projekt-ID-Version: WordPress jQuery Date Picker 1.0 \ n" "Report-Msgid-Bugs-To: \ n" "POT-Erstellungsdatum: 2013-02-07 13: 36-0500 \ n "" PO-Revision-Date: 2013-02-07 13: 36-0500 \ n "" Letzter Übersetzer: Tom McFarlin \ n "" Sprach-Team: Tom McFarlin \ n "" Sprache: de_US \ n "" MIME-Version: 1.0 \ n "" Inhaltstyp: text / plain; charset = UTF-8 \ n "" Content-Transfer-Encoding: 8bit \ n "" X-Poedit-KeywordsList: __; _ e \ n "" X-Poedit-Basepath:. \ n "" X-Generator: Poedit 1.5 .5 \ n "" X-Poedit-SearchPath-0:… \ n "
Als Nächstes müssen wir die Textdomäne im Konstruktor festlegen. Fügen Sie zunächst die folgende Zeile in Ihren Konstruktor ein:
Fügen Sie Ihrer Datei anschließend die folgende Funktion hinzu:
/ ** * Lädt die Plugin-Textdomäne für die Übersetzung * * @version 1.0 * @since 1.0 * / public Funktion plugin_textdomain () load_plugin_textdomain ('wp-jquery-date-picker'), false, Verzeichnisname (plugin_basename (__FILE__)). '/ lang'); // end plugin_textdomain
Das wichtigste, was hier zu beachten ist, ist die Verwendung von wp-jquery-date-picker Der Schlüssel ist, was wir verwenden werden, um die Strings im Rest des Plugins zu lokalisieren.
Zum Schluss noch einmal mit dem README Datei später im Tutorial.
2. Erstellen Sie die Meta-Box
An dieser Stelle können wir den Code definieren, mit dem die Meta-Box gerendert wird. Dies besteht aus mehreren Schritten:
Definieren des Hooks im Konstruktor
Registrieren Sie die Meta-Box bei WordPress
Definieren einer Funktion zum Rendern der tatsächlichen Meta-Box
Fügen Sie im Konstruktor die folgende Codezeile hinzu. So werden wir unsere Post-Meta-Box registrieren:
In der Funktion oben sagen wir WordPress, dass es nach einer Datums-Meta-Box in einer Funktion suchen soll add_date_meta_box, also müssen wir das jetzt definieren.
Fügen Sie in Ihrer Klasse den folgenden Code hinzu:
/ ** * Registriert die Meta-Box für die Anzeige der Option 'Date' im Post-Editor. * * @version 1.0 * @since 1.0 * / public function add_date_meta_box () add_meta_box ('the_date', __ ('Das Datum', 'wp-jquery-date-picker'), array ($ this, 'the_date_display') , 'post', 'side', 'low'); // end add_date_meta_box beenden
Wir haben in verschiedenen Tutorials ausführlich auf Meta-Boxen eingegangen, und der WordPress-Codex enthält einen großartigen Artikel, in dem erklärt wird, was die einzelnen Parameter bewirken. Ich möchte hier nicht näher darauf eingehen.
Das heißt, es gibt eine bestimmte Sache, die wir in dem obigen Aufruf beachten müssen. Beachten Sie, dass die Meta-Box versucht, ihre Anzeige mithilfe einer aufgerufenen Funktion zu registrieren the_date_display.
Daher müssen wir diese Funktion definieren. Glücklicherweise kann die Meta-Box sehr einfach sein: Um die Datumsauswahl auszulösen, benötigen wir nur ein einzelnes Element. Da wir das Datum rendern werden, verwenden wir ein einfaches Eingabefeld.
Als nächstes fügen Sie Ihrer Klasse die folgende Funktion hinzu:
/ ** * Rendert die Benutzeroberfläche zum Abschließen des Projekts in der zugehörigen Meta-Box. * * @version 1.0 * @seit 1.0 * / public function the_date_display ($ post) wp_nonce_field (plugin_basename (__FILE__), 'wp-jquery-date-picker-nonce'); Echo ''; // Ende der_Displayanzeige
Leicht zu verstehen, richtig?
Wir definieren aus Sicherheitsgründen einen Nonce-Wert, der uns die Sicherheitsfunktionen gibt, die wir benötigen, um sicherzustellen, dass der Benutzer über Berechtigungen zum Speichern von Werten für dieses Feld verfügt, und rendert ein Eingabeelement auf dem Bildschirm.
Notiere dass der Eingang Das Element enthält eine ID von "Datepicker" und einen Namen "Datum". Dies wird später importiert, speichern Sie jedoch Ihre Arbeit.
Wenn Sie das Plugin jetzt aktivieren, sollten Sie etwa Folgendes sehen:
Offensichtlich braucht es ein leichtes Styling, damit es nur ein bisschen besser aussieht. Also machen wir folgendes:
Danach fügen Sie diese Funktion Ihrem Plugin hinzu:
/ ** * Registriert admin-spezifische Stile. * * @version 1.0 * @since 1.0 * / public function register_admin_styles () wp_enqueue_style ('wp-jquery-date-picker'), plugins_url ('WordPress-jQuery-Date-Picker / css / admin.css'); // end register_admin_styles
Zu diesem Zeitpunkt sollte die Breite des Eingabefelds für die Datumsauswahl die Breite des Containers der Meta-Box umfassen. Lässt es meiner Meinung nach nur ein bisschen schöner aussehen.
3. Speichern Sie das Datum
Bevor wir mit der Implementierung der Datumsauswahl beginnen, stellen wir sicher, dass unsere neue Post-Meta-Box Informationen ordnungsgemäß speichern kann. Im Moment ist das nicht möglich, weil wir den Code dafür nicht geschrieben haben.
Dieser spezielle Schritt wird folgendes beinhalten:
Definieren einer Funktion zum Speichern der Daten
Vergewissern Sie sich, dass der Benutzer die Daten speichern kann
Speichern Sie die Daten tatsächlich
Zuerst müssen wir den Haken zum Speichern der Daten definieren. Fügen Sie Ihrem Konstruktor die folgende Zeile direkt unter der Zeile hinzu, in der wir den Hook zum Erstellen der Meta-Box definiert haben:
add_action ('save_post', array ($ this, 'save_project_date')); [php] Als Nächstes müssen wir das definieren save_project_date Funktion. Diese Funktion ist dafür verantwortlich, sicherzustellen, dass der Benutzer die Berechtigung zum Speichern der Daten hat, und speichert dann tatsächlich den Inhalt des Eingabefelds im Post-Meta für den zugehörigen Beitrag. Fügen Sie Ihrem Plugin daher die folgende Funktion hinzu: [php] / ** * Speichert die Projektabschlussdaten für die eingehende Post-ID. * * @param int Die aktuelle Post-ID. * @version 1.0 * @since 1.0 * / public function save_the_date ($ post_id) // Wenn der Benutzer die Berechtigung zum Speichern der Metadaten hat ... if ($ this-> user_can_save ($ post_id, 'wp-jquery-date-picker) -nonce ')) // Löschen Sie alle vorhandenen Metadaten für den Eigentümer if (get_post_meta ($ post_id,' the_date ')) delete_post_meta ($ post_id,' the_date '); // Ende wenn update_post_meta ($ post_id, 'the_date', strip_tags ($ _POST ['the_date'])); // Ende wenn // Ende save_the_date
Diese Funktion überprüft grundsätzlich, ob dieser Benutzer speichern kann. Wenn dies der Fall ist, werden alle vorhandenen Post-Meta gelöscht, um die Datenbank nicht zu stören, und fügen Sie das für diesen Post angegebene Datum hinzu.
Aber es gibt einen Haken: Wir rufen eine Funktion an user_can_save. Diese spezielle Funktion ist eine Hilfsfunktion, die definiert werden muss, da sie den Boilerplate-Code vereinfacht, der erforderlich ist, um sicherzustellen, dass der Benutzer die Berechtigung zum Speichern der Datei hat.
Fügen Sie im Bereich "Hilfsfunktionen" Ihrer Klasse die folgende Funktion hinzu:
/ ** * Bestimmt, ob der aktuelle Benutzer Metadaten speichern kann, die diesem Beitrag zugeordnet sind. * * @param int $ post_id Die ID des Beitrags wird gespeichert. * @param bool Ob der Benutzer den Beitrag speichern kann oder nicht. * @version 1.0 * @since 1.0 * / private Funktion user_can_save ($ post_id, $ nonce) $ is_autosave = wp_is_post_autosave ($ post_id); $ is_revision = wp_is_post_revision ($ post_id); $ is_valid_nonce = (isset ($ _POST [$ nonce]) & & wp_verify_nonce ($ _POST [$ nonce], plugin_basename (__FILE__))))? wahr falsch; // Gibt true zurück, wenn der Benutzer speichern kann. ansonsten falsch. Rückkehr ! ($ is_autosave || $ is_revision) && $ is_valid_nonce; // end user_can_save
Beachten Sie, dass diese Funktion die aktuelle Post-ID und den Nonce-Wert (den wir zuvor in diesem Post festgelegt haben) berücksichtigt. Schliesslich gibt diese Funktion true zurück, wenn es sich nicht um ein automatisches Speichern, eine Post-Revision handelt und die Nonce gültig ist.
Wenn dies der Fall ist, hat der Benutzer die Berechtigung zum Speichern.
Fazit
Lassen Sie uns an dieser Stelle ausprobieren, was wir haben. Aktivieren Sie das Plugin, und Sie sollten das Meta-Feld im Post-Editor-Dashboard sehen. Im Moment sollten Sie in der Lage sein, jeden gewünschten Wert in diesem Feld zu speichern.
Sie können eine Kopie des Plugins in der aktuellen Version für diesen Beitrag über diesen Link herunterladen.
Im nächsten Artikel werden wir einen Blick auf die Implementierung des Datumsauswahlprogramms werfen. Dazu gehören das Importieren der erforderlichen JavaScript-Abhängigkeiten, das Schreiben eines kleinen Teils unseres eigenen JavaScript und das Rendern des Datums am vorderen Ende des Beitrags.
Schließlich bereiten wir das Plugin für die Veröffentlichung vor, indem wir die Lokalisierungsdateien generieren und dann die README.
Share
Accentsconagua
