Hey, Hi und Hallo.

361° BLOGGT RICHTIG AB.

Einstieg in die WordPress Plugin-Entwicklung – Teil 1

Einstieg in die WordPress Plugin-Entwicklung – Teil 1

14.03.2014 / geschrieben von Richard
in Entwicklung

14.03.2014 / geschrieben von Richard / in Entwicklung

Wenn man eine Zeit lang mit dem System WordPress gearbeitet hat, bekommt man auch mal das Verlangen etwas Verrücktes zu tun. Etwas zu tun, mit dem man die Funktionalität erweitern möchte. Vielleicht auch ein Feature einbauen, das auf verschiedenen Websites funktionieren soll, die unter Umständen auch auf unterschiedlichen Themes laufen.

Dieses Verlangen kann mit der Entwicklung einer Erweiterung / eines Plugins / eines Moduls gestillt werden.

Ich für meinen Teil unterscheide da gerne zwischen drei Sorten von Plugins: Frontend-, Backend- und „Eierlegendewollmilchsau“-Plugin. Der Unterschied zwischen einem Backend- und einem Frontend-Plugin ist dabei jedoch nur marginal. Was können diese Sorten von Plugins?

Frontend- / Backend-Plugin

Ein reines Frontendplugin ändert nur die Ausgabe im Frontend. So könnte zum Beispiel automatisch ein bestimmtes Element nach jeder Seite eingefügt werden unabhängig zum Template.
Ein „gemischtes“ Plugin kann beispielsweise automatisch die Ausgabe des Seitentitels im <title></title> beeinflussen auf Basis eines im Backend angegebenen Wertes.

„Eierlegendewollmilchsau“-Plugin

Dieses Plugin kann alles und will auch alles. Man könnte zum Beispiel ein Plugin bauen, das es in der Administration erlaubt einen eigenen Inhaltstypen zu kreieren, mit eigenen Feldern, einem eigenen Ausgabetemplate und sogar einer eigenen einstellbaren URL-Struktur.


Im Folgenden möchte ich auf die grundlegende Pluginentwicklung eingehen. In diesem ersten Teil geht es um die reine Planung des Plugins. Um Skizzen, Notizen und das Ganze was VOR der reinen Code-Arbeit kommt. Im zweiten Teil werden wir uns dann um den Backendbereich des Plugins kümmern. Im dritten Teil wird es an die Ausgabe gehen.

Was möchten wir bauen?

"Und ich sehe immernoch verdammt gut aus." - Richard Thiel, November 2013

„Und ich sehe immernoch verdammt gut aus.“ – Richard Thiel, November 2013

Im November entstand dieses wunderbare Bild von mir, das uns hier als inspirierende Idee für das Plugin zur Seite stehen wird. Lasst uns einen „Vorher-Nachher“-Slider bauen.
Auf ein solches Feature bin ich zum ersten Mal gestoßen, als ich mir Vergleichssatellitenbilder von der Tsunami-Katastrophe in Japan angesehen habe. (siehe hier)

Dieses Prinzip der Bilddarstellung lässt sich auch wunderbar auf viele andere Bilder anwenden. Soweit erstmal der Plan. Klingt gut, gefällt mir,lasst es uns so machen.

Der erste Schritt ist getan

Die Idee steht, jetzt geht es an die Planung. Von einigen vollgekritzelten Blättern, hin zu einem Papier-Versuchsaufbau des Ganzen bis hin zu einem kleinen Photoshop-Entwurf. (Ok, seien wir ehrlich: Ein Entwickler sollte nicht anfangen zu basteln 😉 ) Während einer kleinen Recherche-Arbeit bin ich auf ein jQuery-Plugin gestoßen, mit der der Vorher-Nachher-Effekt gut dargestellt wird. Somit kann ich mich voll und ganz auf die Entwicklung des Plugins konzentrieren. Die Rede ist von ZURBs TwentyTwenty-Plugin.

  • planung_1
  • planung_2
  • plugin_result

Auf Basis dieser ersten wundervollen Planung sind wir nun imstande im zweiten Teil das Plugin zu bauen. Zumindest den Teil, der im Backend auf uns zukommen wird.

Über den, der's geschrieben hat:

Macht Code. Träumt von Code. Würde, wenn möglich, sogar Code essen. Behauptet WordPress sei ein gutes CMS und das Internet habe keine Zukunft. Als Mediengestalter a.D. codet er sich fröhlich durch die Weltgeschichte. Wenn er nicht gerade versucht zu gestalten oder mit Code spielt, kocht er gerne (auch mal für die Kollegen). Mag übrigens Züge.