Ein WordPress Plugin erstellen: So einfach geht’s!

Wir lieben WordPress und WordPress Plugins – das ist wirklich kein großes Geheimnis! Ein Blick auf unser Portfolio macht das deutlich. Doch wie kann man eigentlich ein WordPress Plugin erstellen?

WordPress: das beliebteste CMS

WordPress ist das derzeit beliebteste Content Management System der Welt. Es bringt bereits eine Vielzahl an Grundfunktionen mit sich. WordPress ist zudem in PHP geschrieben und kann sehr einfach mit eigenen Funktionen erweitert werden.

Jeder, der mit WordPress arbeitet, hat sich schon mal gefragt: Wie kann ich eigene Funktionen zu WordPress hinzufügen?

Auf stackoverflow und Co findet man unzählige PHP-Skripte. Diese werden einfach per Copy-&-Paste in die functions.php eingefügt. Im Anschluss nur noch schnell die Datei speichern und die neue Funktion wird ausgeführt.

Das ist aber nicht wirklich super sexy. Warum?

Die Antwort dazu lautet: wiederverwendbarer Code. Ein Update des Themes und die Änderungen sind wieder weg. Ich kann meine Funktion nicht einfach in anderen Projekten wiederverwenden. Deshalb muss ich den Code bei jeder neuen Webseite erneut einfügen.

Die Lösung: Ein WordPress Plugin erstellen

Aus diesem Grund packen wir unsere Funktion in ein eigenes WordPress Plugin. Das hat einige Vorteile: Der Code und die Inhalte werden sauber voneinander getrennt. Zudem kann ich meine Funktion auch in anderen Projekten ganz einfach wieder verwenden.

Durch die Einbindung in WordPress hat man Zugriff auf die internen Funktionen. Zusätzlich wird das Plugin durch die Veröffentlichung im Repository von WordPress anderen Nutzern zugänglich.

In diesem Beitrag erhälst du das Grundwissen, um ein eigenes WordPress Plugin zu erstellen.

In unserem Beispiel erstellen wir ein sehr simples Plugin. Es gibt im Admin-Bereich Sprüche von Chuck Norris aus. ;-)

Dabei wird bei jedem Reload der Seite zufällig ein neuer Spruch ausgegeben. Als Vorlage für unser Plugin dient das bekannte „Hello Dolly“ Plugin. Warum aber gerade Chuck Norris?

Deshalb: Wenn Chuck Norris dividiert, dann bleibt kein Rest ;)

Ein WordPress Plugin erstellen ist nicht kompliziert. Es reichen bereits ein paar Zeilen Code – Legen wir los!

Den Pluginordner für das WordPress Plugin erstellen

Als Erstes erstellen wir einen lokalen Ordner auf unserem Rechner. Der Name des Ordners sollte sich am Name des Plugins orientieren. Ich schreibe immer alles in kleinen Buchstaben. Zudem trenne ich die Wörter mit Bindestrichen.

Leerzeichen und Umlaute sollte man vermeiden. Zudem wähle ich einen aussagekräftigen Namen. Für das Beispiel nenne ich den Ordner hello-webchuck.

Die Bootstrap Datei: Der Eintrittspunkt

In dem erstellten Ordner lege ich die erste PHP-Datei an. Den Dateinamen kann man dabei frei wählen. Man muss lediglich auf die Dateiendung achten.

Deshalb verwende ich hello-webchuck.php als Dateiname. Damit weiß ich direkt, dass es sich um den Eintrittspunkt für mein Plugin handelt. Wenn ich später weitere Dateien hinzufügen möchte, kommen auch diese in denselben Ordner.

Bei sehr umfangreichen Plugins können auch weitere Unterordner angelegt werden. Wie man dabei am besten vorgeht, sehen wir uns in einem anderen Beitrag an.

Der Pluginheader: Der Kopf der Funktion

Im nächsten Schritt öffne ich die hello-webchuck.php Datei mit einem Editor. Ich bevorzuge dabei das kostenlose Visual Studio Code. Atom oder Sublime Text sind zum Beispiel weitere gute Alternativen.

In der ersten Zeile füge ich das Zeichen <?php und am Ende der Datei noch ein ?> ein. Damit lege ich fest, dass es sich bei der Datei um ein PHP-Skript handelt.

Alle Zeilen die wir nun dazwischen einfügen, werden als PHP-Code verarbeitet. Anschließend füge ich eine Reihe von Kommentarzeilen ein. Darin befinden sich alle wichtigen Informationen zu dem Plugin. Diese werden später auf der Plugin Seite im Admin Bereich angezeigt.

<?php
/*
Plugin Name: Hello Webchuck
Plugin URI: https://gitlab.com/webpunks-wordpress/hello-webchuck
Description: This is a simple plugin, when activated you will see a random quote from Chuck Norris in the upper left of your admin screen.
Author: webpunks
Author URI: https://www.webpunks.at
Version: 1.0.0
Text Domain: hello-webchuck
*/

Hier die Erklärung zu den einzelnen Zeilen:

Eintrag	Bedeutung
Plugin Name	Selbsterklärend: Der Name des Plugins, der im Admin Bereich angezeigt wird.
Plugin URI	Auf dieser Seite kann das Plugin runtergeladen werden.
Description	Eine kurze Beschreibung zur Funktion des Plugins.
Version	Die aktuelle Versionsnummer. Wie empfehlen das Semantic Versioning Format.
Author	Der Name des Plugin Authors.
Author URI	Die Webseite des Authors.
License	Die Lizenz unter der das Plugin erstellt wurde.
Text Domain	Die genaue Schreibweise des Ordners in dem sich das Plugin befindet.

Aus Gründen der Sicherheit füge ich folgende Zeilen direkt darunter ein. Dadurch wird verhindert, dass das Skript direkt aufgerufen wird. In diesem Fall kann es nur mehr innerhalb von WordPress verwendet werden.

// Make sure we don't expose any info if called directly
if ( !function_exists( 'add_action' ) ) {
	echo 'This is just a plugin. Nothing to do when called directly.';
	exit;
}

Funktionen erstellen: Actions nutzen

Nun ist es an der Zeit die erste Funktion zu erstellen. Diese ist ebenfalls sehr simpel. Die Funktion hello_webchuck holt sich von einer anderen Funktionen (auf die ich später noch kurz eingehe) ein Zitat und gibt HTML-Code aus. Ich verwende dort einige CSS-Regeln um die Ausgabe zu stylen. Zusätzlich lege ich noch eine Action an.

Wird eine WordPress Seite geladen, wird eine Reihe von Actions ausgeführt. In diesem Fall verwende ich die Action admin_notices. Dadurch wird im Admin Bereich eine Nachricht ausgegeben.

Eine Action ist ebenfalls eine Funktion und erwartet sich zwei Parameter. Dabei ist der erste Parameter der Name der Action. Als zweiten Parameter übergebe ich den Namen meiner Funktion.

// This method will retrieve and echo the quote
function hello_webchuck() {
	$quote = hello_webchuck_get_quote();
	echo '

‚; } // Now we set that function up to execute when the admin_notices action is called add_action( ‚admin_notices‘, ‚hello_webchuck‘ );

Um die Ausgabe optisch zu gestalten, füge ich einige CSS Styles hinzu. Auch hier ist der Ablauf wieder sehr ähnlich. Wir erstellen wieder eine kleine Funktion. Diese gibt bestimmte CSS Styles aus. Zusätzlich wird wieder eine Action erstellt. Diesmal wähle ich die Action admin_head. Damit wird Code dem Head-Bereich des HTML-Dokuments hinzugefügt.

// We add some css to position the container
function add_webchuck_css() {
	echo '

 

‚; } // Set the function to execute when the admin_head action is called add_action( ‚admin_head‘, ‚add_webchuck_css‘ );

Abschließend sehen wir uns noch die Funktion hello_webchuck_get_quote an.

Diese liefert per Zufall ein Zitat aus einer Liste zurück. In diesem Beispiel ist diese Liste direkt im Plugin gespeichert. In einem weiteren Beitrag werde ich erklären, wie diese Liste dynamisch mit einem HTTP-Aufruf geladen werden kann. Man kann ein WordPress Plugin erstellen, um Daten von anderen Diensten wie zum Beispiel Facebook oder Google zu laden.

function hello_webchuck_get_quote() {
  // Some random quotes form Chuck Norris 
  $quotes = "Chuck Norris isst keinen Honig, er kaut Bienen.
  Chuck Norris sucht nicht - er findet.
  Chuck Norris schälft nicht - er wartet.
  Wenn Chuck Norris dividiert, dann bleibt kein Rest.
  // ... and a lot more";

  // Here we split the string into lines
  $q = explode( "\n", $quotes );

  // Then we randomly choose one line and return it
  return wptexturize( $q[ mt_rand( 0, count( $q ) - 1 ) ] );
}

Plugin Archiv erstellen, hochladen und aktivieren

Unser WordPress Plugin ist erstmal fertig. Nun kann es auf unserer WordPress Seite installiert werden.

Dafür erstelle ich aus dem Plugin Ordner ein Archiv. Das Dateiformat für das Archiv sollte ZIP sein. Zusätzlich muss das Archiv den selben Namen haben wie der Ordner.

In meinem Fall also hello-webchuck.zip. Im Anschluss kann die Datei hochgeladen werden. Danach öffnet man im WordPress Menü den Menüpunkt Plugins –> Installieren.

Am nächsten Bildschirm klickt man dann auf Plugin hochladen. Daraufhin kann die ZIP-Datei ausgewählt werden und wird hochgeladen. Abschließend gelangt man auf die Übersicht der Plugins. Dort kann das Plugin aktiviert und anschließend verwendet werden.

Das erste WordPress Plugin – Grundlage für weitere Funktionen

Die Funktionen des Plugin sind nicht allzu umfassend. Das Beispiel zeigt aber, wie einfach und schnell WordPress um Funktionen erweitert werden kann.

Für WordPress Einsteiger liefert das Beispiel eine gute Grundlage für weitere Plugins. Wenn du das Plugin runterladen oder dir den Code anschauen möchtest, findest du hier das Repository.

Du brauchst Hilfe beim Erstellen eines WordPress Plugins? Melde dich bei uns. Wir helfen gerne weiter!