Hey, Hi und Hallo.

Previously on 361° Blog: Einstieg in die WordPress Plugin-Entwicklung – Teil 1

„Wenn man von eins bis vier zählt, so ist Zwei irgendwo mittendrin.“

– Richard Thiel, April 2014

Im ersten Teil haben wir uns mit der Planung eines Moduls befasst. Dieses Modul soll ein „Vorher-Nachher-Slider“ werden.
Hier kurz die Funktionsweise noch einmal erklärt:

• Im WordPress-Backend erstellen wir einen neuen Beitrag in einem von uns definierten Custom-Post-Type (im Folgenden nur noch CPT genannt)
• In diesem Beitrag geben wir neben einem Titel zwei Bilder an. Diese Bilder sollten wenn möglich die gleichen Bildmaße haben. (Ein Text, der als Beschreibung dient, ist optional.)
• Nach dem Erstellen des Beitrags können wir in einem Artikel unseren Slider einbetten.

Dieser zweite Teil beschäftigt sich mit der generellen Erstellung des Backend-Parts des Plugins.
Dazu zählen zwei Bereiche:

1. Erstellung des CPT
2. Hinzufügen der Felder für die beiden zu vergleichenden Grafiken

Und das Plugin war wüst und leer …

„…, und es war finster im Editor; und die Finger Richards schwebten über der Tastatur.“
(Ich bedanke mich beim ersten Buch Mose, so oder ähnlich steht es da nämlich drin)

Bevor wir uns an die drei Punkte der Liste ranwagen können, müssen wir zunächst ein Plugin-Grundgerüst erstellen.
Dazu erstellen wir im Ordner Plugins, der im Ordner „wp-content“ liegt, einen neuen Ordner. Ich habe diesen Ordner einmal „361_before-after“ genannt. In diesem Ordner erstellen wir als Nächstes eine PHP-Datei. Benannt habe ich diese mit „361_before-after.php“

Nun können wir die ersten Zeilen unseres Plugins erstellen.
Es gibt für diese ersten Zeilen sogar eine Standard-Definition, die hier im WordPress-Codex zu finden ist. Dieser Code sorgt, nebenbei bemerkt, auch schon dafür, dass wir erfolgreich ein funktionierendes Plugin erstellt haben. Woohoo! Genug gefreut, weiterarbeiten.

How I met your Custom Post Type

Nach der erfolgreichen Erstellung eines Plugins können wir dieses nun mit unseren Inhalten befüllen. Fangen wir als Erstes an mit der Erstellung eine CPT, damit wir unsere Slider schön alle beisammen haben. Unterhalb des bisherigen Codes in unserer PHP-Datei tragen wir nun Folgendes hinzu:
Die Funktion „add_action“ dient dem Hinzufügen einer Funktion (hier: „create361_BeforeAfterPostType“) während eines Ladeschritts im WordPress (hier beim Initialisieren „init“ des Systems).

Dieser Aufruf ruft unsere Funktion „create361_BeforeAfterPostType()“ auf. In dieser Funktion werfen wir mit der nächsten Funktion um uns: „register_post_type„. Mit dieser Funktion erstellen wir einen CPT und können diesen auch bereits ein wenig anpassen.
Als Erstes kommt der Name des CPT („361_BeforeAfter“), anschließend kommt ein Array mit Optionen.
Wenn wir nun alles richtig gemacht haben, wird unserem WordPress-Backend ein neuer Punkt zwischen „Seiten“ und „Kommentare“ hinzugefügt: „Vorher/Nachher“. (Könnte dann so aussehen)

Code in a Box

Toll, 40% haben wir schon, fehlen noch 60. Einfacher wird es nicht, aber auch nicht unbedingt schwerer. Im nächsten Schritt erstellen wir eine zusätzliche Box, in der Post-Erstellen/Bearbeiten-Ansicht, in der wir zwei Bilder hochladen können. Der Code dafür sieht wie folgt aus:

Und die Erklärung kommt jetzt:
Als Erstes erstellen wir einen add_action-Funktionsaufruf, wie im ersten Schritt, anschließend widmen wir uns dieser Funktion. Die Funktion ruft die Funktion „add_meta_box“ auf, mit deren Hilfe wir in der unserer „Post hinzufügen“-Ansicht eine zusätzliche Box erstellen können. Diese Box definieren wir mit der nun folgenden Funktion „createBeforeAfterBox“.

In dieser Box haben wir verschiedene Aufrufe für einige WordPress interne Scripte und noch eine CSS- und eine JS-Datei für unser Plugin. Der Rest an dieser Funktion ist keine Magie: Wir lesen ein Feld aus und überprüfen, ob bereits Grafiken vorhanden sind, wenn nicht, geben wir andere Klassen und Texte und lassen uns den Spaß am Ende ausgeben.

Im dritten und vorletzten Teil werden wir uns dann näher mit dem genutzten JavaScript und CSS, dem Speichern der Boxen und der Generierung eines Shortcodes beschäftigen.