Ein WordPress Plugin erstellen

Ein eigenes WordPress Plugin programmieren.

Dieses Tutorial ist ein schneller und einfacher Einstieg in die Entwicklung von eigenen WordPress Plugins. Dank der Schnittstellen, die WordPress anbietet, kommen wir mit relativ wenig Aufwand und geringen Programmierkenntnissen zu einem funktionierenden Plugin. Am Ende dieses Beitrags haben wir ein Plugin erstellt, welches die Besucher unserer Seite beim Verlassen bittet, wieder zurück zu kommen und weiter zu lesen.

Eine kleine Animation, wie das Plugin in Aktion aussieht:

Beim Verlassen der Seite bitten wird den Besucher zurückzukommen.

Beim Verlassen der Seite bitten wird den Besucher zurückzukommen.

Plugin vorbereiten

Als erstes erstellen wir lokal einen neuen Ordner mit dem Namen unseres Plugins „BleibDa“:

Unser Plugin Ordner.

Unser Plugin Ordner.

In diesem Ordner speichern wir dann alle Dateien, die das Plugin benötigt.

Um das Plugin über die WordPress Administrationsoberfläche aktivieren zu können, müssen wir eine PHP Datei mit einem vorgegebenen Definitionstext anlegen. Erst dadurch kann WordPress alle benötigten Informationen auslesen und unser Plugin auch wirklich als Plugin erkennen.

Wir erstellen die PHP Datei „bleibda.php“ Datei mit folgendem Inhalt:

<?php
defined('ABSPATH') or die("No script kiddies please!");
/**
* Plugin Name: BleibDa
* Plugin URI: http://www.wprockstars.de
* Description: Ein Plugin, welches unsere Besucher bittet wieder zurückzukommen.
* Version: 1.0.0
* Author: Ein WordPress Rockstar
* Author URI: http://www.wprockstars.de
* Text Domain: Optional. Plugin's text domain for localization. Example: mytextdomain
* Domain Path: Optional. Plugin's relative directory path to .mo files. Example: /locale/
* Network: Optional. Whether the plugin can only be activated network wide. Example: true
* License: GPL2
*/
?>

In diesen Zeilen können wir das Plugin beschreiben. Wer ist der Autor und wie lautet die dazugehörige Internetseite? Was macht das Plugin überhaupt und unter welcher Lizenz wird es veröffentlicht.

Den ganzen Ordner inklusive der soeben erstellten PHP Datei laden wir jetzt über FTP in unseren Plugin Ordner unter „wp-contents/plugins“:

Der Plugin Ordner unserer WordPress Installation.

Der Plugin Ordner unserer WordPress Installation.

Melden wir uns jetzt als Administrator an und schauen unter Plugins, dann sehen wir auch schon unser Plugin:

Unser Plugin wird von WordPress erkannt.

Unser Plugin wird von WordPress erkannt.

Falls ihr hier anstatt einem „ü“ das Symbol � seht, dass müsst ihr darauf achten die PHP Datei mit der Kodierung „UTF-8 ohne BOM“ abzuspeichern. Nach dem erneuten Hochladen werden die Umlaute dann korrekt dargestellt.

Wir könnten das Plugin jetzt schon aktivieren, aber da es noch keine Intelligenz besitzt, kümmern wir uns nun um den eigentlichen Code.

Wir definieren erst einmal in unseren Worten und so kurz wie möglich, was das Plugin denn machen soll: Wenn der Besucher die Seite verlässt, dann soll sich der Text des Tabs ändern. Und der Tab zeigt immer den Titel unsere Seite an.

Also etwas genauer:
Wenn der Besucher die Seite verlässt, dann müssen wir den Titel unserer Seite ändern.

In einzelnen Schritten müssen wir also:

  1. Erkennen, dass der Besucher die Seite verlässt
  2. Dann den Titel unserer Seite ändern
  3. Wenn der Besucher zurück kommt
  4. Den Titel wieder ändern

Code lokal erstellen

Um die Funktionalität des Plugins einfach testen zu können, bauen wir uns eine leere HTML Seite mit folgendem Inhalt:

<html>
<head>
</head>
<body>
</body>
</html>

Jetzt stellt sich die Frage, wie wir ganz einfach erkennen können, dass ein Besucher die Seite verlässt. Da während des Verlassens keine neue Seite aufgerufen oder eine andere Anfrage ausgeführt wird, müssen wir dieses Ereignis clientseitig abfrage. Dafür kommt nur JavaScript in Frage.

Da WordPress standardmäßig das JavaScript Framework JQuery beinhaltet, nutzen wir dieses. Dazu müssen wir den Kopfbereich unserer HTML Seite anpassen und laden die aktuelle Version von JQuery:

<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>

Um zu testen, ob JQuery bei uns funktioniert, schreiben wir in den Body:

<script>
$(document).ready(function() {
alert("Hi Rockstar!");
});
</script>

Die HTML Seite führen wir jetzt direkt mit einem Doppelklick aus und sehen folgendes:

Wir testen unseren JavaScript Code lokal.

Wir testen unseren JavaScript Code lokal.

Super! JQuery funktionert und wir können auf die Funktionen dieses Frameworks zurückgreifen.

Wie erkennt man, dass JQuery funktioniert?
Die Funktion

$(document).ready(function() {
});

ist eine JQuery Funktion, welche alles, was in ihr steht erst ausführt, wenn die HTML Seite fertig geladen ist.

Wir können direkt mit dem nächsten Punkt auf unserer ToDo Liste weiter machen und einmal testen, ob wir den Titel unserer Seite ändern können.
Das machen wir, indem wir die Zeile:

alert("Hi Rockstar!");

ersetzen durch:

document.title = "Hey, komm zurück";

Und das passiert, wenn wir die HTML Seite nach dem erneuten abspeichern wieder starten:

Unser Code ändert sofort den Titel unserer Seite.

Unser Code ändert sofort den Titel unserer Seite.

Somit wäre auch schon einmal die Frage geklärt, wie wir mit JavaScript den Titel unserer Seite ändern. Was war noch auf unserer ToDo Liste? Richtig: Erkennen, dass der Besucher die Seite verlässt.

Wir wollen also über JavaScript herausfinden, dass der Besucher zum Beispiel auf einen anderen Tab wechselt oder vielleicht auch den Browser schließen möchte.

Also benötigen wir ein Ereignis, auf welches wir reagieren können. Wir versuchen einmal den Mauszeiger zu überwachen:
Wenn der Mauszeiger des Besuchers unsere Seite verlässt, dann ist die Wahrscheinlichkeit, dass uns der Besucher verlassen möchte, ziemlich hoch.

Wie erkennen wir nun mit JQuery, dass die Maus die Seite verlässt?
In dem wir auf das Ereignis „mouseleave“ für unseren Body reagieren.

Wir passen unsere HTML Seite an, denn wir wollen als nächsten Schritt den Titel der Seite ändern, wenn der Besucher die Maus raus bewegt:

$('body').mouseleave(function() {
document.title = "Hey, komm zurück";
});

Wenn wir die HTML Seite jetzt aufrufen, wird der Titel unseres aktiven Tabs erst geändert, wenn wir die Maus aus der Seite bewegen.

Im Prinzip ist der Code für die Funktionalität ja schon fertig. Wir möchten es aber noch etwas verfeinern und erweitern unseren JavaScript Code noch um die folgenden Funktionen:

Bevor wir den Titel der Seite ändern, speichern wir uns den aktuellen Titel um ihn später wieder verwenden zu können. Zusätzlich erstellen wir Variablen und füllen diese mit den Texten, welche wir anzeigen wollen.

var seitentitel= document.title;
var bleibdatext = 'Hey, komm zurück!';
var danketext= 'Danke :) ';

Unser Ereignis „mouseleave“ passen wir an und verwenden direkt unsere Variable:

$('body').mouseleave(function() {
document.title = bleibdatext;
});

Wir möchten dem Besucher ja unsere Dankbarkeit zeigen und reagieren deswegen auf das JQuery Ereignis „mouseenter“:

$('body').mouseenter(function() {
if(document.title == bleibdatext){
document.title = danketext + seitentitel;
}
});

Wenn wir die HTML Seite jetzt aufrufen, dann wird der Titel unseres aktiven Tabs erst geändert wenn wir die Maus aus der Seite bewegen und wir danken dem Besucher, wenn er wieder zurückkommt.

Wir haben jetzt ein funktionierendes Script in einer HTML Datei. Das können wir so aber nicht auf unsere WordPress Seite in den Plugin Ordner hochladen.

Code für WordPress vorbereiten

Wir müssen das JavaScript in eine eigene Datei auslagern. Diese erstellen wir im selben Ordner, in dem wir bereits unsere „bleibda.php“ Datei liegen haben:

In die .js Datei kommt unser JavaScript Code.

In die .js Datei kommt unser JavaScript Code.

In diese fügen wir den JavaScript Code ein und passen die Zeile unserer Funktion

$(document).ready(function() {

etwas an:

jQuery(document).ready(function( $ ) {

Das machen wir aus Kompatibilitätsgründen. Eine Alternative wäre es, jedes „$“ Zeichen durch das Wort „JQuery“ zu ersetzen. Wir wissen nicht, welche JavaScript Frameworks auf unserer WordPress Seite zusätzlich verwendet werden. Hätten wir eins, welches ebenfalls mit dem Bezeichner „$“ arbeitet, dann könnte es zu Konflikten kommen. Deswegen erwartet WordPress von uns, dass wir das JQuery eindeutig auszeichnen.

Kommen wir abschließend noch einmal zu unserer PHP Datei zurück. Das ist die Datei, die WordPress als erstes ausführt. Wir müssen in dieser Datei jetzt sagen, dass wir unser Script laden möchten.

Das passiert, in dem wir eine Funktion erstellen:

function bleibda_script_laden(){
wp_register_script( 'bleibda-script', plugins_url( 'bleibda.js', __FILE__ ),array( 'jquery' ) );
wp_enqueue_script( 'bleibda-script' );
}

Mit wp_register_script registrieren wir unserer JavaScript Datei in dem wir sagen, wo sie liegt und dass sie von JQuery abhängig ist.

Der folgende Aufruf wp_enqueue_script ist dann das tatsächliche Einbinden unserer JavaScript Datei in den Kopfbereich  unserer WordPress Seite. Zur Erinnerung: Am Anfang haben wir unseren Code ja direkt im Kopfbereich unserer HTML Seite gehabt.

Diese Funktion muss jetzt noch aufgerufen werden, wenn alle Scripte für unsere Seite geladen werden und deshalb teilen wir auch dies WordPress mit:

add_action( 'wp_enqueue_scripts', 'bleibda_script_laden');

Jetzt können wir unsere zwei Dateien hochladen und durch das Aktivieren unser Plugin endlich in Aktion sehen!

Mögliche Fehler

Sollte dabei eine Fehlermeldung wie folgende sichtbar werden:

„Das Plugin verursachte eine Fehlermeldung X Zeichen unerwartete Ausgabe während der Aktivierung.“

Fehlermeldung beim Aktivieren unseres Plugins.

Fehlermeldung beim Aktivieren unseres Plugins.

Dann hat unsere PHP Datei sicher leere Zeilen am Anfang oder am Ende:

Leider oft Ursache für Fehlermeldungen.

Leider oft Ursache für Fehlermeldungen.

Entfernt man diese Leerzeichen und lädt die Datei erneut hoch, kann man das Plugin problemlos aktivieren.

Schauen wir rein aus Neugierde einmal in den Quellcode sehen wir auch, dass unsere JavaScript Datei tatsächlich erst nach JQuery geladen wird:

WordPress erledigt es für uns JQuery rechtzeitig zu laden.

WordPress erledigt es für uns JQuery rechtzeitig zu laden.

 Habt ihr es mit Hilfe dieses Beitrags geschafft euer erstes WordPress Plugin zu erstellen?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.