WordPress individualisieren: das eigene Child-Theme erstellen

Zunächst zum Grundverständnis: Was ist ein WordPress-Theme?

In WordPress und vielen anderen Content-Management-Systemen wird möglichst strikt getrennt zwischen Programmlogik, Inhalten und Gestaltung. Der grundlegende Programmcode sorgt für die Funktionalität des Systems und bei der Bildschirmausgabe schließlich für die Zusammenführung der Inhalte und deren Präsentation nach Maßgabe der Design-Vorgaben. Diese gestalterischen Vorgaben werden bei WordPress innerhalb eines sogenannten Themes gespeichert. Dank der Trennung von Inhalt und Gestalt ist es möglich, ein Theme einfach per Mausklick zu wechseln. Die Inhalte, also die vom Autor eingegebenen Texte, Bilder, Musik- und Videodateien, bleiben hiervon unberührt. Sie werden bei der Bildschirmpräsentation lediglich in eine andere Form gefüllt.

Solch ein Theme bestimmt zum einen die grobe Struktur der Bildschirm-Präsentation - wo und wie groß das Hauptmenü erscheinen soll, ob ein zweites Menü links, rechts, oben oder unten platziert werden soll... all dies wird durch ein WordPress-Theme festgelegt. Zum anderen werden aber auch alle Detailfragen geklärt: Welche Schrifttype für die Hauptüberschriften benutzt wird, in welcher Farbe der Hintergrund erscheinen soll, mit welcher Umrandung die Abbildungen versehen werden... alle Fragen bezüglich der Darstellung am Monitor werden über ein Theme beantwortet. Ein Beispiel: Um einem Text eine bestimmte Schriftgröße zuzuweisen, wird in einer Datei des Themes die Anweisung font-size:12px; gespeichert. Der Text, auf den sich diese Angabe bezieht, wird dadurch 12 Pixel (px) groß dargestellt.

Ein kostenloses Theme auswählen, ein kostenpflichtiges benutzen oder ein eigenes Theme erstellen?

Unzählige von sehr guten Themes werden auf wordpress.org bereitgestellt und lassen sich im Backend über den Menüpunkt Design -> Themes auf einfachste Art installieren und dann aktivieren. Hinzu kommen die kostenpflichtigen Themes, die möglicherweise noch besser durchkonzipiert sind und vielleicht erweiterte Möglichkeiten oder zusätzliche Funktionen bieten (entgegen der einführenden, bewusst vereinfachten Erläuterungen können Themes auch die Programmlogik beeinflussen). Sollte man sich überhaupt die Mühe machen, ein eigenes Design zu entwerfen? Die Antwort lautet hier zunächst sicherlich: nein! Die Entwicklung eines WordPress-Themes ist durchaus eine komplexe Arbeit, die man denen überlassen sollte, die dafür Lust und Zeit haben. Andererseits entsteht beim Bloggen häufig früher oder später der Wunsch, Kleinigkeiten am ausgewählten Theme zu ändern. Dies ist mit wenigen Grundkenntnissen durchaus machbar.

Ein vorhandenes Theme bearbeiten

Die Themes verstecken sich innerhalb der WordPress-Ordnerstruktur in den Unterordnern wp-content -> themes. Jedes Design ist dort mit einem eigenen Ordner vertreten, der in der Regel den Namen des Themes trägt. Innerhalb eines Theme-Ordners, der in weitere Ordner unterteilt sein kann, sind nun die zugehörigen Dateien gespeichert, und in denen finden sich alle Gestaltungsangaben. Mit einem simplen Texteditor (nicht aber mit einem Textverarbeitungsprogramm) lassen sich diese Dateien öffnen, bearbeiten und wieder speichern. Die gemachten Änderungen am aktiven Theme treten sofort in Kraft und werden beim Betrachten der Homepage nach Drücken des Reload-Buttons des Browsers sichtbar.

Ein Problem aber stellt sich spätestens bei einem Update des Themes ein: Hierbei werden einige Dateien komplett gelöscht und durch gleichnamige neue ersetzt. Sind hiervon auch die selbst editierten Dateien betroffen, sind alle gemachten Änderungen futsch! Abhilfe schafft hier ein sogenanntes Child-Theme. Dieses abgeleitete Design übernimmt zunächst alle Angaben des übergeordneten Vater-Themas, ohne dass diese Angaben im Child-Theme gespeichert werden müssten. Ein unbefülltes Kind ist daher im Aussehen vollkommen identisch mit seinem Vater. Sobald Angaben im abgeleiteten Thema gemacht werden, überschreiben oder ergänzen diese die Vorgaben des Ober-Themas - und das Schöne dabei: Das übergeordnete Theme kann problemlos geupdatet werden, das Child-Theme ist hiervon nicht betroffen.

Ein Child-Theme anlegen

Lange Theorie, simpelste Praxis: Zur Erstellung eines eigenen Child-Themes benötigt Ihr ca. 30 Sekunden.

1. Einen leeren Ordner erstellen
Innerhalb des Theme-Ordners von WordPress (Euer WP-Verzeichnis -> wp-content -> themes) müsst Ihr zunächst einen leeren Ordner erstellen, den Ihr im Prinzip beliebig benennen könnt (allerdings ohne Leerzeichen zu verwenden). Falls Ihr Euch an die Konventionen der WP-Gemeinde halten wollt: ausschließlich Kleinbuchstaben benutzen, den Namen des Vater-Themes übernehmen und -child dranhängen, z. B. twentyfourteen-child. Ich verwende nachfolgend den Namen dreizehn, um anzudeuten, dass sich mein Design vom WordPress-Theme twentythirteen ableitet.

2. Eine Style-Datei erstellen
In diesem neuen Ordner erstellt Ihr nun eine Datei mit dem Namen style.css, die Ihr mittels eines einfachen Texteditors mit folgenden Zeilen befüllt und dann abspeichert:

/* 
Theme Name: Dreizehn
Description: Mein Design auf Basis von twentythirteen
Template: twentythirteen
*/
@import url(../twentythirteen/style.css);

Der Name wird später im Auswahlbereich des WordPress-Backends angezeigt, die Beschreibung (Description) ist schnuppe, bei Template wird das Vater-Theme eingetragen. Danach folgt eine Importanweisung, in der u. a. der Ordner des übergeordneten Templates bzw. Themes benannt wird. Falls Ihr ein Child-Theme auf Basis von twentyeleven gestalten wollt, lautet der Importbefehl also: @import url(../twentyeleven/style.css);
Das war's! Der nachfolgende Punkt ist rein kosmetischer Natur.

3. Vorschaubild erstellen
Um Euer Theme innerhalb der Auswahlmöglichkeiten des WP-Backends nicht nur am Namen, sondern auch per Bild erkennen zu können, dient ein Vorschaubild. Dieses könnt Ihr in einem Grafikprogramm mit den Maßen 880px x 660px erstellen, beliebig bemalen und schließlich im png-Format mit dem Namen sreenshot.png im eben erstellten Child-Ordner abspeichern (oder einfach: rechter Mausklick auf nachfolgende Abbildung und "Grafik speichern unter...").

4. Das eigene Child-Theme aktivieren
Schließlich muss nur noch das neue Child-Theme aktiviert werden, damit die darin zukünftig abgespeicherten Design-Änderungen auch zum Tragen kommen. Dazu müsst Ihr die Administrationsoberfläche (Backend) von WordPress öffnen, das Menü Design -> Themes aufrufen und dort das gerade erstellte Vorschaubild, das nun erscheinen sollte, anklicken und aktivieren.

Wenn Ihr Euch nun das Frontend Eures Blogs anschaut, hat sich gegenüber dem Basis-Theme noch nichts geändert, weil bisher nur die Grundlagen geschaffen wurden, um update-sichere Änderungen vornehmen zu können. Um eine erste Änderung zu bewirken, könnt Ihr zum Beispiel in einer neuen Zeile der eben erstellten style.css dies eintragen (anschließend Speichern nicht vergessen):
p { font-size:4px; }
Hiermit wird die Schriftgröße (font-size) des normalen Fließtextes (p) auf 4 Pixel festgelegt. Ein erneuter Blick auf Euer Frontend (ggf. Ansicht aktualisieren, "Neu laden" oder Reload-Button drücken) zeigt Euch, dass der immer wieder verschobene Kauf einer stärkeren Brille sich nun rächt :-) .

Hilfreiche Links für die zukünftige Theme-Arbeit

Das nötige Basiswissen (vor allem HTML und CSS) zur sinnhaften Umarbeitung der Theme-Dateien, vor allem der style.css, findet sich zahlreich im Netz. Empfehlenswert und seit vielen Jahren das Standardwerk ist selfhtml von Stefan Münz. Dieses Projekt wird zwar seit längerem nicht mehr aktiv gepflegt, bietet aber weiterhin einen leicht verständlichen und gut strukturierten Einstieg in die Technik der Internet-Sprache, der Hypertext Markup Language (HTML), und in die der Cascading Stylesheets (css), die für das Design einer HTML-Seite maßgeblich verantwortlich zeichnen.

Ein einfacher Texteditor reicht im Grunde aus, um die nötigen Codezeilen in die Theme-Dateien zu schreiben. Komfortabler wird es allerdings mit einem hierfür speziell entwickelten Programm, z. B. dem HTML-Editor Phase 5 (nur kostenlos für Privatanwender). Ich benutze das kostenlose Notepad++.

Und wer schließlich Gefallen an der Gestaltung der eigenen Internetseiten gefunden hat, kommt nicht an der offiziellen Dokumentation vorbei: WordPress Codex: Theme Development.