Entwickeln von Plugins mit WordPress-Boilerplates Erstellen eines Plugins

Im ersten Artikel dieser Serie haben wir untersucht, wie eine Boilerplate Ihre Entwicklungsanstrengungen verbessern kann, indem sie eine Grundlage bietet, auf der Ihr Projekt aufgebaut werden kann.

Im Idealfall sollten Boilerplates gerade genug Rahmen für den Einstieg bieten, während Sie sich auf die spezifische Geschäftslogik, die Kernbedürfnisse oder den domänenspezifischen Code konzentrieren können, den Sie schreiben müssen.

Insbesondere haben wir uns die WordPress Widget Boilerplates und die WordPress Plugin Boilerplate angesehen. In diesem Beitrag werden wir das Plugin Boilerplate nutzen, um unser eigenes Plugin zu schreiben, um zu sehen, wie Boilerplates sowohl die Grundlage für das Schreiben von gutem Code bilden als auch wie wir es als Ausgangspunkt für unsere zukünftige Arbeit verwenden können.

Ein Post Message Plugin

In diesem Beitrag erstellen wir ein Widget für Nachbenachrichtigungen, mit dem der Autor vor dem Inhalt seiner Seite eine neue Beitragsnachricht hinzufügen kann. Dies wird tatsächlich auf einem Plugin basieren, das bereits in der Wildnis ist, so dass Sie nach Abschluss des Projekts einen Bezugspunkt haben können.

Wie bei den anderen Tutorials plane ich das Projekt gerne im Voraus, also lassen Sie uns alles darlegen, was wir tun werden:

Laden Sie eine Kopie der WordPress Plugin Boilerplate herunter
Füllen Sie die TODOs mit den spezifischen Informationen für Ihr eigenes Projekt aus
Implementieren Sie den Code, der zum Anzeigen und Speichern von Informationen in einer Post-Meta-Box erforderlich ist
Überprüfen Sie, ob Post-Meta vorhanden ist, und rendern Sie sie im Inhalt
Beenden Sie die Readme-Datei und die Lokalisierung

Insgesamt handelt es sich um ein relativ einfaches Plugin, aber es sollte ein solides Beispiel dafür sein, wie Sie mit Boilerplates sich auf Ihre spezifische Funktionalität konzentrieren können, während Sie im Rahmen der bewährten Vorgehensweisen von WordPress arbeiten.

Widget erstellen

1. Laden Sie die WordPress Plugin Boilerplate herunter

Um zu beginnen, müssen Sie eine Kopie der WordPress Plugin Boilerplate herunterladen. Sie können dies tun, indem Sie zu ihrer GitHub-Seite navigieren, dann auf die Schaltfläche "zip" klicken, die Sie oben auf der Seite sehen, oder indem Sie hier klicken.

Extrahieren Sie anschließend den Inhalt des Downloads in Ihre Plugins Verzeichnis. Es sollte zunächst ein Verzeichnis mit dem Namen schreiben Plugin-Boilerplate.

Benennen Sie dies in um POST-Meldung. Jetzt können wir mit dem Quellcode für die Heizplatte beginnen.

2. Füllen Sie die TODOs in der Heizplatte aus

Als nächstes öffnen Sie die POST-Meldung Verzeichnis in Ihrer bevorzugten IDE. Das erste, was wir tun wollen, ist offen plugin.php und suchen Sie dann alle TODOs, die im Code vorhanden sind.

Der Code sieht wie folgt aus:

Als Nächstes müssen wir jedes TODO-Plugin-spezifisch machen, damit wir alle Instanzen mit einer Variation des Namens des Plugins platzieren können.

Zum Beispiel:

Ersetzen Sie den Namen des Plugins durch POST-Meldung
Ersetzen Sie die URL des Plugins durch Ihre gewünschte URL
Füllen Sie den Namen, die E-Mail-Adresse und alle persönlichen Informationen mit den Funktionsweisen aus
Benennen Sie die Klasse POST-Meldung
Benennen Sie alle für das Gebietsschema relevanten Zeichenfolgen, Klassennamen und IDs POST-Meldung

Als Nächstes können wir auch alle JavaScript- und Stylesheet-Aufrufe entfernen außer das admin.css Stile. Wir werden diese Datei später verwenden. Stellen Sie außerdem sicher, dass Sie die folgenden Dateien aus der Boilerplate entfernen:

ansichten / display.php
css / plugin.css
js / admin.js
js / plugin.js

Das sollte Ihnen die folgende Verzeichnisstruktur geben:

Beachten Sie, dass dies eine Sache bei einer Boilerplate ist: Wenn überhaupt, sollten Sie etwas davon entfernen. Wenn Sie etwas hinzufügen müssen, das Ihnen beim Start helfen kann - oder das ist eher grundlegend -, könnte dies eine Möglichkeit sein, es zu verbessern.

Wie auch immer, obwohl wir noch nicht fertig sind und obwohl wir werden Wenn Sie das Plugin hinzufügen, sollte die Datei an dieser Stelle ungefähr so aussehen:

Als Nächstes müssen wir tatsächlich an unserer Kerngeschäftslogik arbeiten.

3. Implementieren Sie den Code, der zum Anzeigen und Speichern von Informationen in einer Post-Meta-Box erforderlich ist

Zunächst müssen wir genau feststellen, wie das funktionieren wird:

Wir zeigen eine Post-Meta-Box direkt unter dem Content-Editor an
Sie enthält einen Textbereich, in dem Benutzer ihren eigenen Inhalt bereitstellen können
Wenn der Beitrag aktualisiert wird, muss er den Inhalt des Textbereichs speichern

Als Erstes müssen wir einen Hook und eine Funktion einführen, um die Daten in der Post-Meta-Box zu erfassen. Fügen Sie im Konstruktor die folgende Zeile hinzu:

add_action ('add_meta_boxes', array ($ this, 'add_notice_metabox'));

Als nächstes müssen wir die Funktion definieren add_notice_metabox Damit wir die Meta-Box tatsächlich rendern können, stellen wir diese Funktion jetzt zur Verfügung:

 Funktion add_notice_metabox () add_meta_box ('post_message', __ ('Post Message', 'post-message'), Array ($ this, 'post_message_display'), 'post', 'normal', 'high');  // end add_notice_metabox beenden

Danach müssen wir eine Funktion schreiben, die für das tatsächliche Rendern des Post-Inhalts verantwortlich ist:

 Funktion post_message_display ($ post) wp_nonce_field (plugin_basename (__FILE__), 'post_message_nonce'); // Das Echo des Textfelds und des Vorschaubereichs ''. esc_textarea (get_post_meta ($ post-> ID, 'post_message', true)). '';  // post_message_display beenden

Beachten Sie, dass wir aus Sicherheitsgründen ein Nonce-Feld eingeführt haben. Beachten Sie auch, dass wir dies gegeben haben Textbereich die ID von POST-Meldung so dass wir es leicht mit CSS gestalten können, und wir haben ihm den Namen gegeben POST-Meldung was sich als nützlich erweisen wird, wenn wir den Inhalt der speichern Textbereich zu den Metadaten der jeweiligen Post.

Schließlich haben wir das ausgenutzt esc_textarea Funktion, um sicherzustellen, dass wir unsere Daten richtig kodieren, um sie im Textbereich wiederzugeben.

Lassen Sie uns an dieser Stelle ein wenig Licht mit der admin.css Datei, um der Post-Nachricht ein etwas anderes Aussehen und Verhalten als den Inhalt zu geben:

 # post-message width: 100%;

Daraus sollte sich etwa Folgendes ergeben:

Natürlich sind wir immer noch nicht fertig. Wir müssen die Daten tatsächlich speichern und abrufen, wenn der Benutzer auf die Schaltfläche "Veröffentlichen" oder "Aktualisieren" klickt. Dazu müssen wir einen Rückruf zum Speichern der Postdaten einrichten.

Das letzte, was wir tun müssen, ist eine save_notice Funktion. Zuerst registrieren wir dies im Konstruktor mit folgendem Code:

add_action ('save_post', array ($ this, 'save_notice')));

Dann definieren wir die folgende Funktion:

 Funktion save_notice ($ post_id) if (isset ($ _POST ['post_message_nonce']) && isset ($ _POST ['post_type'])) // Nicht speichern, wenn der Benutzer die Änderungen nicht übermittelt hat (wenn definiert) ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;  // end if // Vergewissere dich, dass die Eingabe aus der richtigen Form kommt if (! wp_verify_nonce ($ _POST ['post_message_nonce'], plugin_basename (__FILE__))) return;  // end if // Stellen Sie sicher, dass der Benutzer die Berechtigung zum Posten hat. if ('post' == $ _POST ['post_type']) if (! current_user_can ('edit_post', $ post_id)) return;  // Ende, wenn // Ende, wenn / else // Lies die Post-Nachricht $ post_message = isset ($ _POST ['post_message'])? $ _POST ['post_message']: "; // Wenn der Wert für die Post-Nachricht vorhanden ist, löschen Sie ihn zuerst. Sie möchten keine zusätzlichen Zeilen in die Tabelle schreiben. If (0 == count (get_post_meta ($ post_id, ' post_message '))) delete_post_meta ($ post_id,' post_message ');) // Ende, wenn // für diesen Beitrag aktualisieren. update_post_meta ($ post_id,' post_message ', $ post_message); end save_notice

Wir haben in früheren Artikeln ausführlich über das Speichern des Inhalts von Post-Meta-Daten gesprochen, daher möchte ich hier nicht näher darauf eingehen, aber es genügt zu sagen, dass die Funktion Folgendes tut:

Überprüft, ob der Benutzer berechtigt ist, diese Informationen zu speichern
Löscht alle vorhandenen Post-Meta-Daten
Speichert die Daten in den zugehörigen Post-Metadaten

An diesem Punkt können wir das Plugin testen, also füllen Sie das aus Textbereich, Speichern Sie die Daten, und wenn die Seite aktualisiert wird, stellen Sie sicher, dass die Daten auch im angezeigt werden Textbereich.

Wenn ja, sind wir bereit weiterzugehen; Stellen Sie andernfalls sicher, dass Ihr Code dem obigen Code entspricht.

4. Übertragen Sie die Post-Nachricht

Als nächstes können wir die Postnachricht im Inhalt rendern. Der Vorgang dafür wird wie folgt ablaufen:

Registrieren Sie eine Funktion mit der der Inhalt Filter
Überprüfen Sie, ob Post-Metadaten vorhanden sind
Rendern Sie es über dem Inhalt, wenn er vorhanden ist

Also lass uns genau das tun. Zuerst registrieren wir eine Funktion mit der Inhalt Filter:

add_filter ('the_content', array ($ this, 'prepend_post_message'));

Danach richten wir die eigentliche Funktion ein:

 Funktion prepend_post_message ($ content) // Wenn es eine Benachrichtigung gibt, stellen Sie diese dem Inhalt voran, wenn ("! = get_post_meta (get_the_ID (), 'post_message', true)) $ post_message = ''; $ post_message. = get_post_meta (get_the_ID (), 'post_message', true); $ post_message. = '
'; $ content = $ post_message. $ content;  // Ende wenn return $ content;  // Ende prepend_post_message

Beachten Sie, dass die Post-Nachricht in einer eigenen enthalten ist p Element mit einem eigenen Klassennamen, so dass Sie es beliebig gestalten können, wenn Sie möchten.

An diesem Punkt sollten wir alles haben, was wir brauchen, um die Post-Nachricht zu sehen, also testen wir es. Erstellen Sie eine Beitragsnachricht, veröffentlichen Sie sie und zeigen Sie den Beitrag in Ihrem Browser an.

Entfernen Sie anschließend den Beitragsinhalt und stellen Sie sicher, dass nichts angezeigt wird.

Leicht genug, nicht wahr??

5. Beenden Sie die Readme-Datei und die Lokalisierung

Schließlich müssen wir sicherstellen, dass wir die README-Datei bereinigen und das Plugin ordnungsgemäß lokalisieren.

Zunächst sollte die Readme-Datei die üblichen Informationen enthalten. Dies ist weitgehend subjektiv. Ich habe jedoch unten ein Beispiel für eine README bereitgestellt:

 === Post Message === Contributors: tommcfarlin Link für Spenden: http://tommcfarlin.com/single-post-message/ Tags: post Mindestens erforderlich: 3.4.1 Getestet bis: 3.5 Stable tag: 1.0 Lizenz: GPLv2 oder später Lizenz-URI: http://www.gnu.org/licenses/gpl-2.0.html Fügen Sie ganz einfach kurze Nachrichten und Ankündigungen über den Einträgen hinzu. Wird im RSS-Feed und im Blog angezeigt. == Beschreibung == Post Message ist ein Plugin, mit dem Sie benutzerdefinierte Nachrichten, Ankündigungen und Hinweise zu einzelnen Posts hinzufügen können. Es ist so gestaltet, dass es die Aufmerksamkeit des Lesers auf sich zieht und wird im Browser * und * in RSS-Readern dargestellt. Post Message… * Unterstützt die Verwendung von HTML-Tags im Nachrichteninhalt * Ist direkt im Post-Content-Editor verfügbar. * Ist vollständig lokalisiert und bereit für die Übersetzung == Installation == = Verwenden des WordPress-Dashboards = 1. Navigieren Sie zu 'Neu hinzufügen' 'Plugin-Dashboard 1. Wählen Sie' post-message.zip 'auf Ihrem Computer aus. 1. Hochladen 1. Aktivieren Sie das Plugin im WordPress-Plugin-Dashboard = Verwenden von FTP = 1. Extrahieren Sie' post-message.zip 'auf Ihren Computer. 1. Laden Sie das Plugin hoch "post-messsage" -Verzeichnis in Ihr "wp-content / plugins" -Verzeichnis 1. Aktivieren Sie das Plugin im WordPress-Plugins-Dashboard == Changelog == = 1.0 = * Erste Version

Und schließlich sollte die Lokalisierung ein Kinderspiel sein: Öffnen Sie einfach die 'plugin.po'Datei in der'lang'Verzeichnis in Ihrer IDE. Vergewissern Sie sich, dass Sie den Namen des Plugins und die Autorinformationen geändert haben, und öffnen Sie es in POEdit, um die Lokalisierungsdateien zu registrieren.

Speichern Sie Ihre Arbeit und Sie können loslegen!

Fazit

In dieser Serie haben wir genau untersucht, was erforderlich ist, um die Vorteile von WordPress-Boilerplates zu nutzen, wie sie unseren Workflow beeinflussen können und uns dabei helfen, uns mehr auf den Kern unseres Projekts zu konzentrieren, als das Rad neu zu erfinden und aufzustehen durch Wiederholen einer Menge von dem, was bereits benötigt wird.

Außerdem haben wir ein Plugin erstellt, das zur weiteren Überprüfung heruntergeladen werden kann.

Ich hoffe, dass diese Serie einen Grund gibt, warum Sie ggf. Boilerplate-Code verwenden sollten, und dabei geholfen hat, zu zeigen, wie sie die Mühe machen können, den gleichen Code in jedem Ihrer Projekte neu zu schreiben.

Code