WordPress Plugin erstellen

In diesem Tutorial werden wir gemeinsam ein WordPress Plugin erstellen. Um ein WordPress Plugin zu erstellen muss man lediglich innerhalb einer PHP-Datei, die sich in einem „gezippten“ Ordner befindet, einen beliebigen unbenutzten Namen und die Details für das WordPress Plugin definieren. Das ist bereits alles, was es braucht, um das Plugin im Backend von WordPress aktivieren zu können. Den Namen und die Details werden über folgenden PHP-Code definiert.

 

Schritt für Schritt

 

PHP-Datei erstellen

Eine PHP-Datei zu erstellen ist bei jedem Betriebssystem anders. Um es uns einfach zu machen, biete ich euch mit einem Klick auf diesen Link eine leere PHP-Datei an. Ihr müsst diese Datei lediglich noch entpacken.

 

WordPress Plugin aktivieren

Öffnet nun diese PHP-Datei mit einem Text-Editor eurer Wahl, ich empfehle Atom von GitHub. Kopiert den Code von oben in diese Datei und speichert sie. Um das Plugin nun funktionsfähig zu machen, benötigen wir lediglich einen Ordner, in den wir unsere PHP-Datei reinlegen. Gebt der PHP-Datei und dem Ordner den selben Namen, ansonsten kann es zu Fehlern kommen. Dieser Ordner muss noch „gezippt“ werden und das wars.  Falles ihr es bis hierhin nicht geschafft habt, stelle ich euch hier die fertige Version bis jetzt zur Verfügung. Nun müsst ihr lediglich das Plugin durch eurer WordPress-Backend hochladen und aktivieren. Nun sollte eurer Plugin in eurem Plugin-Verzeichnis erscheinen.

 

Plugins VS functions.php

Das Plugin macht noch nichts, da bis auf den Namen nichts definiert ist. Wir können jetzt in diesem Plugin alle möglichen Funktionen definieren und sie werden genau so funktionieren, als wenn wir sie in die functions.php schreiben. Alles was in der functions.php Datei steht, könnte auch in einem Plugin stehen und vice versa. Man bräuchte quasi kein Child Theme einrichten, sondern könnte lediglich ein neues WordPress Plugin erstellen, in dem man alle individuellen Funktionen unterbringt, was auch viele Vorteile hat.

 

Aufgabe

Unsere Testaufgabe lautet nun wie folgt: Auf den Blogseiten wird standardmässig der Link „ältere/ neuere Posts“ angezeigt, wie auf dem Foto:

Foto-Aufgabe

Der Name lässt sich über das WordPress-Backend nicht verändern, sondern nur über PHP-Funktionen. Es soll ein eigenes Plugin erstellt werden, in dem der Nutzer über das WordPress-Backend innerhalb des Einstellungsmenüs einen belieben Linktext einfügen kann und dieser dann den „ältere/ neuere Posts“-Link überschreibt.

 

Zu verwendete Techniken

Um das Plugin zu erstellen benötigen wir folgende Techniken:

  • erstellung individueller Menüeinträge im WordPress-Backend
  • Funktion zum speichern des Eintrags in der WordPress-Datenbank
  • Funktion zum Auslesen der gespeicherten Daten aus der WordPress-Datenbank
  • die Funktion zum ersetzen des gewünschten Textes

 

Problem erkennen

WordPress Plugins werden häufig objektorientiert programmiert. Objektorientierte Programmierung bietet sich an bei komplexen Programmen. In unserem Rahmen werden wir das Plugin jedoch Funktional programmieren. Zu aller erst schreiben wir die Funktion, die wir brauchen, um den „ältere/neuere Posts“ Link zu ersetzen. Die passende Funktion kann von Theme zu Theme variieren. Ich werde in diesem Rahmen nun das Divi Theme von Elegant Themes benutzen. Um die benötigte Funktion zu erstellen, müssen wir zunächst herausfinden, durch welche Funktion der „älter/neuere Posts“ Link ausgegeben wird. Dazu bietet es sich an in der WordPress Dokumentation nachzuschauen. Eine leichte Google Suche nach „next posts link wordpress“ gibt einem sofort die passende Referenz. Jetzt muss man einmal kurz aufpassen, da es die Funktion „next_post_link“ und die Funktion „next_posts_link“ (Plural) gibt. Wir benötigen die Funktion next_posts_link, da wir nach dem Link unter dem Blog suchen und nicht nach dem Link unter den Posts. Nun suchen wir in dem Divi-Theme wie diese Funktion aufgerufen wird. Die meisten Funktionen in den meisten Themes sind in der functions.php. Divi muss sich jedoch nicht an die WordPress-Best-Practices halten und hat eine eigene Struktur. Der Name der einzelnen PHP-Dateien gibt bereits Aufschluss, wo die gesuchte Funktion liegen könnte. Divi enthält eine seperate navigation.php Datei, in der sich unsere gesuchte Funktion befindet:

 

 

Lösungsansatz

Es gibt nun verschiedene Möglichkeiten um unser Problem zu lösen. Man könnte lediglich diese navigation.php Datei in einem Child Theme überschreiben und hätte das Problem schon gelöst. Es gibt aber noch eine andere Methode. Dazu suchen wir nun die Stelle, an der die navigation.php aufgerufen wird. Die navigation.php befindet sich in einem Unterordner wodurch sie durch den Pfad „includes/navigation“ von einer Funktion hinzugefügt wird. Wir müssen deshalb nach diesem Kürzel suchen. Ein erster Blick in der index.php liefert bereits die gesuchte Funktion.

 

 

Problem lösen: Plugin entwickeln

Hier sehen wir bereits, dass die navigation.php nur aufgerufen wird, falls keine Funktion existiert, die wp_pagenavi heißt. Diese If-Bedingung dient dazu, dass das Plugin WP_Pagenavi ohne Probleme die navigation.php ersetzen könnte. Wir benutzen nun nicht das Plugin, wodurch wir uns einfach unsere eigen Funktion erstellen können, die wp_pagenavi heißt und die navigation.php von Divi damit ersetzt. Diese Funktion können wir einfach zu unserem Plugin hinzufügen.

 

 

Die Funktion macht im Moment noch nichts, wir können jedoch jetzt einfach die navigation.php von Divi dort reinkopieren und dann nach belieben anpassen. So wird dann die enthaltene navigation.php von Divi nicht aufgerufen, sondern nur unser Code.

 

 

In der Zeile 21 und 22 sehen wir bereits, wo der „ältere/neure Posts“ Text definiert ist. Wir können dort einfach unsere eigenen Werte eintragen, wobei die gesamte Zeile „esc_html__(‚« Older Entries‘,’Divi‘)“ ersetzt werden muss.

 

Übersetzungsfunktionen

Esc_html__ ist eine Funktion die einen zu übersetzenden Text ausgibt. Je nach der Sprache der WordPress Installation, wird der angegebene Text in eine andere Sprache übersetzt. Es gibt eine ganze Reihe von Übersetzungsfunktionen, die alle etwas andere Argumente enthalten, diese entählt nun ebenfalls den Namen Divi, als Übersetzungshilfe.

 

Testfunktion

Wenn wir nun die Zeile „esc_html__(‚« Older Entries‘,’Divi‘)“ mit einem beliebigen Satz ersetzen, können wir testen, ob unser Plugin funktioniert. Wir benennen den Link nun testweise in „Dies ist ein Testlink“ um.

 

 

Wenn das Plugin nun aktiviert ist, und den Code enthält, können wir bereits unter unserem Blog den geänderten Link sehen.

 

Individuelle Menüeinträge erstellen

Die benötigte Funktion haben wir nun. Wir könnten das Plugin jetzt einfach in der programmierfreundlichen Version lassen und den Namen der Links beliebig ändern. Wir wollen das Plugin aber nutzerfreundlich machen und dem Nutzer die Möglichkeit geben, über das WordPress-Backend, innerhalb der Einstellungen, den Link-Namen frei wählen zu können. Dafür benötigen wir mehr Informationen aus dem WordPress-Codex. Wir benötigen die Informationen, wie man individuelle Menü-Einträge registriert, wie man die Seiten dieser Einträge anpasst und wie dann die eingegebenen Informationen in der WordPress Datenbank gespeichert wird. Nach einer kleinen Suche im WordPress-Codex lässt sich die passende Referenz finden. Auf der Seite werden 2 gute Beispiele gegeben, wie man unsere Aufgabe erfüllt. Zum einen wird der Beispiel Code zur Erstellung individueller Menü-Einträge gegeben:

 

 

Zum anderen wird ein Beispiel zur Gestaltung des Menü-Eintrages gegeben:

 

 

Wir müssen diese beiden Funktionen nun miteinander kombinieren, sodass unser Menü-Eintrag direkt die Beispiel-Menüseite darstellt. Dazu müssen wir lediglich den Funktions-Inhalt der Funktion my_plugin_options aus dem vorletztem Code mit dem Funktions-Inhalt der Funktion mt_settings_page aus dem letzten Code ersetzen.

 

 

Diesen Code können wir jetzt einfach ans Ende unseres Plugins hängen und dadurch wird unser individueller Menü-Eintrag mit der Beispielseite im WordPress-Backend erscheinen:

 

 

Du kannst das Plugin jetzt testen und den neuen Menü-Eintrag anschauen. Der neue Menü-Eintrag sollte bei dir so aussehen:

 

WordPress Plugin - Menüeintrag

WordPress Plugin - Menüseite

 

Wir sind nun fast schon am Ziel. Wir haben nun ein Plugin, welches den „ältere/neuere Posts“-Link ändert, einen individuellen Menü-Eintrag erstellt und eine benutzerdefinierte Variable in der WordPress-Datenbank speichert. Alls was wir nun benötigen ist eine Funktion, die den gespeicherten Textstring aus der Datenbank liest und in unsere Funktion einfügt, die den „ältere/neuere Posts“-Link ersetzt. Dazu müssen wir uns den Code genauer anschauen. Die eingegebene Variable wird durch die Funktion update_option in der Datenbank gespeichert. Nun können wir durch die Funktion get_option die gesuchte Variable auslesen. Diese Funktion müssen wir nun lediglich innerhalb der Funktion wp_pagnavi aufrufen und unsere Variable aus der WordPress-Datenbank auslesen. Diese Variable können wir dann einfach in den Funktionskopf der Funktion next_posts_link einsetzen und dadurch wird die Variable ausgegeben. Hier unsere bearbeitete wp_pagenavi Funktion:

 

 

Diese ersetzen wir jetzt einfach mit unserer bisherigen wp_pagenavi Funktion und schon haben wir unser erstes WordPress-Plugin erstellt. Natürlich muss man jetzt noch ein paar Details ausarbeiten. Im Moment kann man lediglich nur einen der zwei Links ändern und die Namen der Variablen, des Plugins und der Beschreibungen haben immer noch die Beispiel-Werte aus dem WordPress-Codex. Diese Aufgabe überlasse ich aber dem interessierten Leser. Zum Abschluss noch einmal unser finaler Code:

 

 

Falls irgendwo etwas schief gegangen ist, habt ihr hier die finale Version als richtiges Plugin. Einfach im WordPress-Backend hochladen und in den Einstellungen den gewünschten Link definieren, wobei ihr jetzt aufpassen müsst, dass ihr nicht zweimal ein Plugin mit dem selben Namen installiert, weil das ebenfalls zu Fehlern führt. (Details müssen immer noch ausgearbeitet werden, nur mit Divi Theme getestet) Ich hoffe ihr habt Spaß mit eurem neuen Plugin!

 

Verwendete Links

 

Atom (Texteditor von GitHub)
WordPress Codex
Child Theme
functions.php
Administrations Menüs erstellen
esc_html__
update_option
get_option

 

 

Habt Ihr Fragen oder Anregungen? Schreibt mir ein Kommentar und ich werde auf jede Frage eingehen. Falls Ihr individuelle Fragen oder Probleme mit WordPress habt und mehr Hilfe braucht könnt ihr auch ein privates WordPress Coaching mit mir buchen.