Seit mehreren Jahren betreibe ich meinen Blog mit dem Content-Management-System WordPress. Schon lange wollte ich mich mit dem internen Ablauf eines solchen Werkzeugs auseinandersetzen. Jetzt habe ich die verfügbare Zeit genutzt, um endlich die Grundlagen zu erlernen. Damit das nicht reine Theorie bleibt, habe ich mir ein eigenes „Theme“ gebaut, eine Sammlung von Vorlagen, die das Aussehen und das Verhalten des Blogs bestimmen.
Da ich meine Programmierkenntnisse in den letzten 18 Jahren nur spärlich gepflegt und weiterentwickelt habe, musste ich beinahe bei Null anfangen. Zunächst besteht eine WordPress-Webseite am Ende nur aus klassischen HTML Elementen, die mit CSS-Befehlen gestaltet werden. An wenigen Stellen wird eine Aktion mit der Programmiersprache JavaScript ausgeführt. Im Hintergrund, also auf der Seite des Webservers, laufen die Prozesse unter der Sprache PHP.
Zu meiner Studienzeit haben wir diese Kombination belächelt, doch inzwischen sind diese Bausteine des Internets richtig erwachsen geworden. Die Programmentwicklung richtet sich nach dem Paradigma der objektorientierten Programmierung (OOP). Die übrigen Elemente trennen endlich sauber zwischen Inhalt und Darstellung.
Aufbau eines WordPress-Themes
Ein Theme besteht aus mehreren Vorlagen, die für verschiedene Zwecke herangezogen werden. Ein Teil liefert die Auflistung von Beiträgen im Kurzformat aus, ein anderer stellt einen Einzelbeitrag im langen Format dar, weitere kümmern sich um das Menü, die Seitenleiste oder den Fußtext.
Um die Elemente richtig anzusprechen, habe ich mir zuerst ein statisches Modell gebaut, wie die Seite hinterher aussehen soll. Ein einzelner Beitrag und die Übersichtsseite sollten für den Anfang genügen. Darin konnte ich die Bestandteile identifizieren, die sich wiederholen. Außerdem habe ich die Teilaufgaben HTML, CSS und JavaScript dadurch bereits gelöst.
Anhand eines englischsprachigen Schulungsprogramms habe ich meine Kenntnisse in der Sprache PHP aufgefrischt und auf aktuellen Stand gebracht. Mit dem Wissen konnte ich den Aufbau von WordPress und eines Themes analysieren. Mein eigenes Projekt startet. Damit ich nicht jedes Element von Hand neu schreiben muss, verwende ich ein sogenanntes Starter-Theme, das alle grundlegend nötigen Bausteine für die Gestaltung einer individuellen Blog-Vorlage enthält.
Nach dem Aufbau der Theme-Elemente habe ich mich an die Besonderheiten herangewagt, die ausschlaggebend für den Wunsch nach einem persönlichen Thema waren:
Eigener Beitragstyp – Custom Post Type
Um mehr Struktur in meine Beiträge zu bekommen, mache ich mir schon länger Gedanken darüber, welche Elemente typisch sind. Bei Büchern ist das einfach, denn bei Buchbesprechungen habe ich seit einiger Zeit Tabellen mit bestimmten Angaben zu den Werken angehängt (Autor, Titel usw.).
Diese möchte ich nun bei dem jeweiligen Beitrag speichern und bei der Ansicht hübsch formatiert ausgeben. Also habe ich einen Beitragstyp „Buch“ angelegt. Der enthält neben den üblichen Elementen noch Platz für meine eigenen Felder.
Eigene Felder – Custom Fields
Für den neu geschaffenen Datentyp Bücher lege ich mehrere spezielle Datenfelder an, z.B. den Autor, den Titel oder die ISBN Nummer. Diese werden bei der Ausgabe in einer Tabelle angeführt. Weiterhin habe ich einen Zahlenwert für meine persönliche Bewertung angelegt, aus dem ich bei der Anzeige eines Beitrags eine Einstufung in Form von Sternchen darstelle.
Übersetzung
Die Vorlage für das Theme war in englischer Sprache. Ich habe die Sprache beibehalten und für die Texte eine deutsche Übersetzung angelegt. Dazu verwende ich ein externes Tool-Programm namens PoEdit. Damit lese ich den Quelltext meines Themes ein und identifiziere die übersetzbaren Ausdrücke. Den Katalog übersetze ich anschließend in die Zielsprache. Sind weitere Sprachen erwünscht, kann ich diesen Vorgang beliebig wiederholen.
Damit das funktioniert, müssen im Quelltext die übersetzbaren Ausdrücke speziell gekennzeichnet sein. Im PHP-Code gebe ich das Wort nicht einfach aus, sondern packe es in einen Befehl, der bei der Anzeige prüft, ob ein Ausdruck in der Zielsprache vorliegt.
Beispiel: Statt das Wort „Kategorien“ einfach auszugeben
<?php echo 'categories'; ?>verwende ich die Übersetzungsfunktion, die über den richtigen Katalog informiert werden muss, der heißt bei mir „bookreview“ – wie das Theme.
<?php _e( 'categories', 'bookreview'); ?>Aus der Übersetzungstabelle wird dabei das deutsche Wort „Kategorien“ herausgesucht und ausgegeben.
Entwicklungsumgebung
Meine Experimente sollen nicht auf dem echten Server laufen, daher habe ich mir ein Backup der kompletten Blog-Umgebung gezogen. Auf einem lokalen Webserver läuft jetzt eine Kopie. Mit dem Tool XAMPP kann ich auf dem PC einen vollständigen Webserver mit Datenbanksystem betreiben. Darauf läuft eine lokale Installation von WordPress und die Kopie meines Blogsystems. Alle Änderungen bleiben auf dem PC, bis ich sie zusammengefasst in einem eigenen Theme auf dem Server veröffentliche.
Für die eigentliche Programmierung verwende ich den Editor „Visual Studio Code“ von Microsoft, der als freie Software für alle gängigen Betriebssysteme verfügbar ist. Plugins erleichtern mir die Entwicklung. Mit mehreren Internetbrowsern prüfe ich die Ergebnisse nach jedem Zwischenschritt.
Verwendete Werkzeuge (Auszug)
- WordPress 4.9.8 mit dem Gutenberg-Editor
- XAMPP für den lokal installierten Webserver
- Underscores Starter-Theme als Basis
- Plugin Custom Post Type UI
- Plugin Advanced Custom Fields
- Plugin All-in-One WP Migration für die Sicherung und Übertragung der Daten
- PoEdit Pro für die Übersetzung. Ich habe mir für 30€ die Lizenz gekauft.
- Visual Studio Code Editor mit einigen Plugins, u.a.:
- PHP IntelliSense
- WordPress Snippets und ACF Snippets
- Live SASS Compiler
- Google, Bing und StackOverflow :-)
Lessons Learned – Erfahrungswerte
Nach der Fertigstellung des ersten Teilabschnitts hatte ich eine PHP-Datei mit fast 200 Zeilen Befehlscode – total unübersichtlich. Aber es hat funktioniert. Mit etwas Zeitaufwand habe ich dann aufgeräumt, zusammengefasst, ausgelagert und aufgeteilt. Jetzt passen die einzelnen Elemente jeweils auf eine Bildschirmseite. Das erleichtert die Fehlersuche und Nachbesserung erheblich.
Man muss das Rad nicht neu erfinden. Viele Probleme sind bereits gelöst, insbesondere bei weit verbreiteten Tools wie WordPress. Die Kombination aus vorhandenen Werkzeugen und eigenen Ideen macht am Ende den Reiz aus.
Programmieren ist wie Fahrradfahren – man verlernt es nicht. Natürlich waren die Fertigkeiten etwas „eingerostet“. Vor allem musste ich die Weiterentwicklung der letzten Jahre nachholen. Es genügt nicht, sich theoretisch mit objektorientierter Programmierung zu befassen – man muss es tun.
Ich bin kein Designer. Nicht, dass ich mich als unkreativ bezeichnen würde, aber die Gestaltung der Webseite fällt mir schwerer als die technische Umsetzung. Respekt für alle, die einen echten Blick für Schönheit haben und diese auch darstellen können.
CSS sucks. Die Gestaltung von Web-Elementen hat mich viel mehr Zeit gekostet, als vorher vermutet. So manches habe ich nur durch Versuch und Irrtum herausgefunden.
Vor allem aber: Es hat Spaß gemacht!
Fazit und Ausblick
Was noch zu tun bleibt: Einige kleinere Fehler werde ich noch beheben. Die Übersetzung funktioniert noch nicht an allen Stellen und die Darstellung des Kommentarbereichs ist nicht zufriedenstellend.
Nächste Schritte: Für die Rezensionen von Filmen und Musik kann ich weitere Beitragstypen anlegen und einpflegen. Anschließend möchte ich das Erstellen eines Plugins lernen, dazu habe ich mir ein Thema aus dem Bereich Datenschutz ausgesucht. Näheres gibt es demnächst auf dieser Seite.
Die Umsetzung meines lang gehegten Plans hat mir viel Freude bereitet. Ich habe alte Kenntnisse aufgefrischt und neue Fertigkeiten gelernt. Das konkrete Ziel, das ich mir gesetzt habe, ist erreicht. Das Ergebnis dürft ihr hier bewundern.