Das WordPress Plugin Boilerplate 101: Erste Schritte

Seit der Einführung von WordPress-Plugins vor ungefähr 10 Jahren hat sich an der Art und Weise, wie wir sie schreiben, nicht viel geändert. Es gibt eine Haupt-Plugin-Datei mit einem Header, gefolgt vom Wilden Westen. Abgesehen von der Verwendung von Hooks gibt es keine standardisierte Methode zum Erstellen von Plugins.


Dies ist nicht unbedingt ein Problem. Es gibt viele einfache Plugins, die kein maßgebliches Framework benötigen, und es gibt einige Leute, die perfekt kohärenten Verfahrenscode schreiben können. Die Qualität des Codes in Plugins ist jedoch im Allgemeinen nicht die beste. Ein Framework oder eine Methodik würde einen großen Beitrag zur Erhöhung des Codes leisten.

In diesem Artikel werde ich eine mögliche Lösung untersuchen: WordPress Plugin Boilerplate. Es soll ein Ausgangspunkt für die Plugin-Entwicklung sein, eine objektorientierte Methode zur Erstellung eines standardisierten Plugins. Da es mit OOP-Prinzipien codiert ist, ist es hauptsächlich für Zwischencodierer gedacht, aber Sie können es auch als Anfänger problemlos verwenden, wenn Sie wissen, was wohin geht. Am Ende dieses Artikels sollten Sie wissen, was was ist und wie Sie damit beginnen können – unabhängig von Ihrer Codierungserfahrung.

Allgemeine Dateistruktur

Das Boilerplate soll als Github-Repository verwendet werden, daher enthält das Hauptverzeichnis Dateien, die häufig in Github-Repos enthalten sind. Die Datei README.md ist eine allgemeine Readme-Datei und wird auf Ihrer Haupt-Repository-Seite als Beschreibung angezeigt. Die Datei CHANGELOG.md dient zum Aufzeichnen von Änderungen zwischen der Version und der .gitignore-Datei zum Festlegen von Dateien, die git beim Arbeiten mit Dateien ignorieren sollte.

Der Hauptordner hier Plugin-Name ist, wo das Plugin gespeichert ist. Seine Struktur folgt dem WordPress-Repository, und Sie können "Check-In" diesen Ordner zum SVN Plugin Repo. Standardmäßig enthält es den Assets-Ordner, in dem Bilder und Screenshots für Ihr Plugin gespeichert sind, und den Trunk-Ordner, der den Code für das Plugin enthält.

Der Trunk-Ordner enthält das Plugin. Sie können diesen Ordner in eine WordPress-Installation einfügen und Ihr Plugin aktivieren. Wir werden uns den Inhalt dieses Ordners etwas später genauer ansehen. Bevor wir das tun, richten wir den Shop ein.

neues Plugin

Alles einrichten

Es ist schön und gut, all diese Ordner und die großartige SVN / Git an einem Ort zu haben, aber wie können Sie das tatsächlich nutzen? Sie können nicht den gesamten Ordner direkt in Ihren Plugins-Ordner auschecken, es funktioniert einfach nicht. Das Auschecken nur des Trunk-Verzeichnisses ist mühsam, und Sie haben keinen Zugriff auf Dateien außerhalb dieses Verzeichnisses.

Lassen Sie mich Ihnen meine bevorzugte Art der Einrichtung zeigen. Ich habe einen Ordner auf meinem Computer mit der folgenden Struktur:

  • Github
    • Top-Autoren
    • Einfache Bilder
    • Twitter-User-Timelines
  • html
    • wp-admin
    • wp-Inhalt
    • wp-enthält
    • andere WordPress-Dateien
  • WordPress
    • Top-Autoren
    • einfache Bilder
    • Twitter-User-Timelines

Im HTML-Ordner wird WordPress installiert. Der Github-Ordner enthält alle meine WordPress-Plugins von Github. Der WordPress-Ordner enthält dieselben Plugins, die über SVN aus dem WordPress-Repository abgerufen wurden.

Erstellen eines Symlinks

Der erste Schritt, den ich mache, ist das Erstellen einer Vanille-Version von WordPress Plugin Boilerplate auf Github. Ich checke das dann in meinem Github-Ordner aus. Als nächstes erstelle ich einen Symlink zwischen dem Trunk-Ordner im Verzeichnis wp-content / plugins meiner WordPress-Installation.

Symlinks ist ein Verweis auf eine Datei oder einen Ordner, der wie erwartet in das Ziel aufgelöst wird. Das Endergebnis davon ist, dass wenn Sie ein Plugin von irgendwo auf Ihrem System mit Ihrem WordPress-Verzeichnis verknüpfen, es gut funktioniert. Dies bietet Ihnen folgende Vorteile:

  • Sie können Plugins an anderer Stelle speichern.
  • Sie können einen Ordner in einem größeren Repository mit einem Symlink verknüpfen.
  • Sie können dasselbe Plugin mit mehreren Installationen verknüpfen.

Das Erstellen eines Symlinks ist einfach über das Terminal oder die Eingabeaufforderung unter Windows. Ich schlage vor, eine zu öffnen und zum Plugins-Verzeichnis Ihrer WordPress-Installation zu navigieren. Geben Sie dann den folgenden Befehl ein:

# Für OSX oder Linux
ln -s / absolute / path / to / github / Mein-Plugin-Name / Mein-Plugin-Name / Trunk Mein-Plugin-Name

# Für Windows
mklink / j C: \ absoluter \ Pfad \ zu \ github \ Mein-Plugin-Name Mein-Plugin-Name

Dadurch wird eine Verbindung vom ersten zum zweiten Pfad hergestellt. Der erste Pfad ist der absolute Pfad zum Trunk-Verzeichnis in Ihrem Github-Repository. Der zweite ist nur der Name des Ordners, mit dem Sie ihn verknüpfen möchten, wenn Sie sich bereits im Plugins-Verzeichnis Ihrer WordPress-Installation befinden.

Sobald Sie fertig sind, sollte Ihr neues Plugin angezeigt werden, genau wie im obigen Bild. Wir müssen die Dinge anpassen, aber jetzt läuft unser Plugin aus dem Github-Repository, sodass die Entwicklung a Menge einfacher.

Umbenennung

Das Trunk-Verzeichnis enthält viele Ordner und Dateien. Beginnen wir mit dem Umbenennen! Zunächst empfehle ich Ihnen, Ihr Repository mit Bindestrichen und Großbuchstaben zu benennen, etwa so: My-Awesome-Plugin. Der Hauptordner sollte “my-awesome-plugin” heißen. Ich empfehle diese Konvention im gesamten Plugin zu verwenden.

Das Umbenennen der Dateien ist in OSX einfach. Öffnen Sie alle Ordner und wählen Sie alle Dateien aus, die den Namen des String-Plugins enthalten. Klicken Sie mit der rechten Maustaste, um alle 14 Dateien umzubenennen und das Los stapelweise umzubenennen.

umbenennen

Unter Windows wird es etwas schwieriger. Schauen Sie sich das an HowToGeek Artikel für weitere Informationen, oder gehen Sie einfach eins nach dem anderen.

Begriffe wie "Plugin-Name" und andere Variationen sind auch über den gesamten Dateiinhalt verteilt. Sie können verwenden Sublimieren, Atom.io oder andere fähige Texteditoren, die in mehreren Dateien massenweise ersetzt werden können. Hier ist eine Liste der zu ersetzenden Elemente (stellen Sie sicher, dass bei der Suche zwischen Groß- und Kleinschreibung unterschieden wird).

  • Plugin-Name sollte my_awesome_plugin werden
  • Plugin_Name sollte My_Awesome_Plugin werden
  • Plugin-Name sollte mein-awesome-Plugin werden

Wenn Sie fertig sind, füllen Sie unbedingt den Header-Kommentar der Hauptdatei (my-awesome-plugin.php) aus, um ihn an Ihre Bedürfnisse anzupassen.

Inhaltsverzeichnis

In WordPress Plugin Boilerplate ist viel enthalten. Die Idee ist, strenge Richtlinien festzulegen, wo Sie Dinge platzieren können. Es gibt einen bestimmten Ort, an dem Sie Ihre Hooks hinzufügen können, z. B. einen Standardplatz, an dem Sie Front-End-Funktionen hinzufügen können. Werfen wir einen Blick auf die Hauptteile des Frameworks.

Beachten Sie, dass ich auf die Dateien verweise, die umbenannt wurden, zum Beispiel: include / class-my-awesome-plugin.php. Wenn Sie Ihr Plugin in etwas anderes umbenannt haben, müssen Sie sich daran erinnern, dass der my-awesome-plugin-Teil des Dateinamens für Sie anders ist.

Aktivierung, Deaktivierung und Deinstallation

Jeder Code, den Sie ausführen möchten, wenn das Plugin aktiviert ist, sollte in / my-awesome-plugin-name-activator.php enthalten sein. In dieser Datei befindet sich eine Klasse mit dem Namen My_Awesome_Plugin_Activator, in der sich eine enable () -Methode befindet, die Sie verwenden sollten.

Machen Sie sich keine Sorgen, wenn Sie noch nicht mit Objekten vertraut sind. Wenn Sie wissen, wo Sie die Dinge ablegen müssen, können Sie loslegen.

Der Code, den Sie zum Deaktivieren ausführen müssen, sollte in include / my-awesome-plugin-name-deactivator.php abgelegt werden. Die Methode activ () im My_Awesome_Plugin_Deactivator müssen Sie verwenden.

Findest du das etwas zu komplex? Ich beschuldige dich nicht! Wenn Sie anfangen, objektorientierte Konzepte zu verwenden, werden Sie den Vorteil gegenüber prozeduralem Code sehen. Wenn nichts anderes, bietet es einen sehr offensichtlichen Ort, um Ihren Code zu platzieren, was an sich schon eine große Hilfe ist.

Für die Deinstallation wird empfohlen, uninstall.php zu verwenden, wie es WordPress Plugin Boilerplate tut. Ihr Code sollte ganz unten in dieser Datei stehen.

Hooks hinzufügen

Hooks werden von WordPress Plugin Boilerplate erstaunlicherweise gehandhabt, aber es mag auf den ersten Blick etwas unhandlich erscheinen. Alle Ihre Hooks sollten in der Datei include / class-my-awesome-plugin.php platziert werden. Genauer gesagt, innerhalb der My_Awesome_Plugin-Klasse innerhalb von zwei Methoden:

  • define_public_hooks () beim Hinzufügen eines Hooks, der im Frontend verwendet wird
  • define_admin_hooks () beim Hinzufügen eines Hooks, der im Backend verwendet wird

Anstatt wie gewohnt add_action () oder add_filter () zu verwenden, müssen Sie die Dinge etwas anders machen. So ändern Sie beispielsweise den Inhalt des Beitrags.

$ this->Lader->add_action (‘the_content’, $ plugin_public, ‘modify_post_content’);

Der erste Parameter ist der Name des Hooks, der zweite ein Verweis auf das öffentliche oder das Admin-Objekt. Für öffentliche Hooks sollte dies $ plugin_public sein, für Admin-Hooks sollte es $ plugin_admin sein. Der dritte Parameter ist die Hakenfunktion.

Während es komplizierter erscheint, standardisiert es das Hinzufügen von Haken vollständig und teilt sie dabei in zwei verschiedene Gruppen auf.

Öffentliche und administrative Inhalte

Das WordPress Plugin Boilerplate teilt Hooks in Administrator- / öffentliche Gruppen auf, aber das ist noch nicht alles. Der gesamte Code wird auf die gleiche Weise aufgeteilt, indem Sie aufgefordert werden, öffentlich zugänglichen Code in den öffentlichen Ordner und Code für den Administrator in den Ordner admin zu schreiben.

Beide Ordner enthalten CSS-, JS- und Teilordner. Sie sollten gebrauchte CSS / JS-Assets in diesen Ordnern ablegen und Vorlagen und andere wiederverwendbare HTML-Teile in den Teilordner schreiben. Es ist in Ordnung, neue Dateien im Teilordner zu erstellen. Dafür ist es da!

Sie sollten Ihre Hooked-Funktionen auch in diese Ordner innerhalb der Klasse in den jeweiligen Verzeichnissen schreiben. Als wir die Funktion “modify_post_content” mit dem obigen Inhalt verknüpft haben, haben wir WordPress Plugin Boilerplate mitgeteilt, wo auch danach gesucht werden soll. Da wir dies der öffentlich zugänglichen Seite hinzugefügt haben, erwartet WordPress Plugin Boilerplate, dass es in der My_Awesome_Plugin_Public-Klasse definiert wird, die sich im öffentlichen Ordner befindet. Erstellen Sie einfach diese Funktion innerhalb der Klasse und schreiben Sie alles andere wie gewohnt.

Ressourcen und Abhängigkeiten

Wenn Sie externe Ressourcen verwenden möchten, z Aktivierung des TGM-Plugins, Sie sollten das zum Includes-Ordner hinzufügen. TGM ist eine einzelne Datei mit dem Namen class-tgm-plugin-activity.php, die in der Datei class-my-awesome-plugin.php in der Methode load_dependencies () enthalten sein sollte:

require_once plugin_dir_path (dirname (__FILE__)). ‘enthält / class-tgm-plugin-activity.php’;

Überblick

Sind Sie durch alle Dateinamen und Funktionen verwirrt? Mach dir keine Sorgen, du wirst es ziemlich schnell verstehen. Tatsächlich ändern Sie normalerweise nur drei Dateien:

  • In / class-my-awesome-plugin.php fügen Sie alle Ihre Hooks und Abhängigkeiten hinzu.
  • In public / class-my-awesome-plugin-public.php fügen Sie alle öffentlich zugänglichen Funktionen hinzu.
  • In admin / class-my-awesome-plugin-admin.php befinden sich alle Funktionen für Administratoren.

Die Verwendung von WordPress Plugin Boilerplate mag zunächst mühsam erscheinen, zahlt sich aber am Ende aus. Sie werden ein Jahr später wiederkommen und wissen, wo sich alles befindet. Ihre Plugin-Entwicklung wird produktübergreifend standardisiert, und andere Entwickler können herausfinden, was ebenfalls vor sich geht.

Vergessen Sie nicht, dass ein Plugin, das ein einfaches Widget bereitstellt, möglicherweise kein solches Framework benötigt. Die Verwendung von WordPress Plugin Boilerplate verlangsamt Ihr Plugin zwar nicht, verstopft jedoch die Ansicht, wenn Sie nur ein paar einfache Codezeilen benötigen!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map