WordPress-Plugin erstellen – Einfache Anleitung für Anfänger

In diesem Tutorial zeige ich Dir, wie Du Dein eigenes WordPress Plugin erstellen kannst. Ich baue diese Anleitung ganz bewusst sehr einfach auf. Daher ist sie besonders für Anfänger sehr gut geeignet.

Welches Plugin programmieren wir?

Für diese Anleitung werden wir uns ein WordPress Plugin erstellen, welches am Ende von jedem Blog-Artikel einen Text platziert. Diesen Text nutzen wir, um uns für den Besuch zu bedanken und auf den kostenlosen Eintrag im Newsletter zu verweisen.

Natürlich wäre es um einiges leichter, für dieses Vorhaben die entsprechende single.php anzupassen, jedoch möchten wir das mit einem selbst programmierten Plugin lösen. Beginnen wir!

Entwicklungsumgebung einrichten

Für die Programmierung des neuen WordPress Plugins richten wir uns zunächst eine Entwicklungsumgebung ein. Du hast im Grunde die Wahl, ob Du direkt auf dem Server arbeiten möchtest oder Dir einen lokalen Server einrichtest. Für letzteres wäre unter macOS MAMP mein Favorit. Für Windows empfehle ich XAMPP. Da die Einrichtung eines lokalen Servers für dieses Tutorial zu weit geht und es ja hauptsächlich darum gehen soll, ein WordPress Plugin zu erstellen, werde ich darauf nicht näher eingehen. Die Einrichtung eines lokalen Servers ist jedoch sehr leicht über Google zu finden 🙂

Gehen wir davon aus, dass Du die Entwicklungsumgebung eingerichtet und WordPress darauf installiert hast. Weißt Du, wo sich die Plugins befinden? Schau dafür in folgendem Ordner nach: wp-content/plugins

Genau dort legen wir einen neuen Ordner an. In diesem neuen Ordner werden sich die Dateien und damit der Code unseres neuen Plugins befinden. Geben wir diesem Ordner beispielsweise den Namen mein_eigenes_plugin

Die erste Datei

Die erste Datei in Deinem Plugin ist eine wichtige Datei. Sie enthält alle Informationen, die WordPress benötigt, um Dein Plugin in der Plugin-Liste anzuzeigen. Ohne diese Datei kann ein Plugin nicht aktiviert werden.

Wir erstellen in unserem Ordner mein_eigenes_plugin eine Datei, die wir mein-eigenes-plugin.php nennen. Die Datei kann grundsätzlich jeden beliebigen Namen haben, es gehört jedoch zur Best Practice, einen ähnlichen wie den Ordner zu verwenden.

Meta-Informationen

Unserer Datei geben wir zunächst ein paar Meta-Informationen mit. Diese Informationen werden in der jeweiligen Plugin-Übersicht dargestellt oder sind Informationen, die WordPress dabei helfen, zu verstehen, um welche Art Plugin es sich hierbei handelt.

Wir fügen folgenden Code ein:

Eine Übersicht aller Plugin-Informationen, die Du angeben kannst und die entsprechende Erklärung dazu, findest Du im offiziellen WordPress-Codex. Die Mindestvoraussetzung, die ein Plugin benötigt, ist der Plugin Name.

Tipp: Verwende unseren Plugin Header Generator, um Dir den Plugin-Header zuverlässig und schnell generieren zu lassen.

Plugin im Backend anschauen

Sobald wir die Meta-Informationen in unserer ersten Datei angegeben haben, weiß WordPress, dass es sich um ein Plugin handelt und zeigt es als solches im Backend an. Lasst uns mal nachsehen, ob wir unser neues Plugin unter Plugins bereits sehen können.

Sieht gut aus! Lass uns das neue Plugin aktivieren.

Programmierung der Funktionalität

Beim Erstellen unseres WordPress-Plugins möchten wir sauber programmieren. Deshalb ist die beste Vorgehensweise die Trennung des Codes in gut strukturierte Dateien und Ordner.

Die Hauptaufgabe unser ersten erstellten Datei besteht darin, die Meta-Informationen zu enthalten. Deshalb ist es sinnvoll, den restlichen Code des Plugins in separate Dateien unterzubringen, auf die mit Hilfe der PHP-Funktion include zugegriffen werden kann.

Wir möchten in unserem Hauptordner einen neuen Unterordner mit dem Namen inc erstellen. Im neuen Ordner inc erstellen wir eine Datei, die wir plugin-functions.php nennen.

Wir möchten unserer Hauptdatei, die wir am Anfang erstellt haben, nun mitteilen, dass es eine andere Datei gibt, deren Code wir ausführen möchten. Aktualisieren wir daher unsere Datei mein-eigenes-plugin.php wie folgt:

Die Datei wurde erfolgreich eingebunden. Nun können wir dort unsere gewünschte Funktionalität programmieren.

Erstellung einer Funktion

Das Fundament ist gelegt. Somit können wir nun mit dem loslegen, was das Plugin können soll. In unserem Beispiel möchten wir unter jeden Blog-Artikel einen statischen Text einbinden.

WordPress verwendet für die Ausgabe des Inhalts die Hook the_content. Diese Hook können wir anvisieren, um das umzusetzen, was wir vor haben. Kurz und simpel ausgedrückt geben uns Hooks die Möglichkeit, bestimmten Inhalt vor der Ausgabe zu verändern.

Wir möchten in unsere Datei plugin-functions.php folgendes einfügen:

Erklärung: Mit der Funktion add_filter() teile ich WordPress mit, dass ich gerne bestimmte Inhalte filtern / verändern würde. Der erste Parameter bestimmt, um welchen Bereich es sich handelt. Der zweite Parameter bestimmt eine Funktion, die aufgerufen werden soll. Diese Funktion gibt den Wert zurück, der letztendlich ausgegeben werden soll.

In unserem Beispiel rufen wir die Funktion add_text_after_content auf. Mit der Abfrage is_single() beschränken wir unsere Funktionalität lediglich auf Detailseiten. In Archiv-Seiten, beispielsweise in einer Blog-Übersicht, benötigen wir diesen Textzusatz nicht. Als Parameter steht uns hier $content zur Verfügung. Dort ist der aktuelle Text zu finden, der ausgegeben wird. Den verändern wir, indem wir die Variable neu definieren. Durch die Schreibweise des Operators .= nehme ich den Inhalt, der aktuell enthalten ist und füge am Ende noch etwas hinzu, nämlich den Text inklusive aller HTML-Tags, der hier zu sehen ist.

Wenn wir diese Datei abspeichern und einen beliebigen Blog-Artikel öffnen, sehen wir, dass das alles wunderbar funktioniert hat.

Styling

Die HTML-Basis haben wir programmiert. Jetzt möchten wir noch dafür sorgen, dass die Ausgabe auch gut aussieht. Dabei lernen Du, wie Du in Deinem Plugin separate CSS-Dateien einbindest.

Eigene CSS-Datei einbinden

Zunächst erstellen wir uns einen neuen Unterordner, den wir css nennen. In diesen neuen Ordner erstellen wir eine neue Datei, die wir plugin-styles.css nennen. Natürlich sind die dir Namen der Ordner und Dateien absolut freigestellt.

Aktualisiere nun Deine Datei plugin-functions.php wie folgt:

Was haben wir hier gemacht? Zunächst haben wir add_action verwendet. Actions erlauben uns unter anderem - sehr simpel ausgedrückt - an verschiedenen Stellen etwas hinzuzufügen. In dem Fall sprechen wir die Action wp_enqueue_scripts an. Diese Action erlaubt uns, CSS- und Javascript-Dateien im Header oder Footer einzubinden. Der erste Parameter von wp_enqueue_style stellt die individuelle ID dar, der zweite den Pfad des Plugins, das wir hinzufügen möchten.

Ab jetzt können wir unsere CSS-Datei nutzen, um unsere Box etwas schöner zu gestalten.

Die CSS-Anweisungen

Öffne die eben erstellte Datei plugin-styles.css und füge folgenden CSS-Code ein:

Mit ein paar einfachen CSS-Anweisungen haben wir das Design der Box etwas aufgefrischt. Das ganze sieht nun so aus:

Perfekt! Du hast gerade erfolgreich Dein eigenes Plugin programmiert!

Empfehlungen, Tipps & Best Practice

Es gibt sehr viele Programmierer, die für WordPress Plugins erstellen. Ein großes Problem wird es, wenn die entsprechenden Programmierer die Namen der Funktionen nicht unterschiedlich benennen. Es kommt zu Kompatibilitätsproblemen und Abstürzen.

Als Programmierer solltest daher immer darauf achten, Deinen Funktionsnamen einen Präfix zuzuweisen, beispielsweise meinplugin_name_der_funktion, damit sichergestellt ist, dass der Name deiner Funktion einmalig existiert. Außerdem ist es sehr empfehlenswert und gehört zur Best Practice, im Code erstmal abzufragen, ob diese Funktion bereits existiert. Nur wenn nicht, soll sie aufgerufen werden. Wenn wir oben genanntes anwenden sieht der Code wie folgt aus:

So sollten sich in der Regel keine Funktionen in die Quere kommen.

Hinweis: Um das Tutorial einfach zu halten und mich auf die wichtigsten Punkte zu beziehen, habe ich diese Sicherheitsaspekte im Hauptbeispiel weggelassen. Wenn Du ein Plugin programmierst, welches Du danach produktiv verwendest, solltest Du unbedingt darauf Rücksicht nehmen.

Stark! Du weißt jetzt nicht nur, wie man für WordPress Plugins erstellen kann, sondern auch, worauf Du achten solltest, wenn Du vor hast, Dein Plugin in der WordPress-Plugin-Datenbank zu veröffentlichen.

Fragen?

Solltest Du hier und da noch Fragen haben, schreib gerne in die Kommentare. Dann wünsche ich Dir jetzt viel Spaß beim Programmieren Deines ersten Plugins!