Ich erlebe es immer wieder: Bei der Entwicklung einer (Unternehmens-) Website wird nicht selten mehr Zeit in die Auswahl der Schriften und Farben gesteckt als in Inhalte und Struktur. Dabei stellen sich mir die Haare zu Berge, wenn ich lese “mit Photoshop erstellt” — eine Website… (da sollte man sich einmal den Code genauer ansehen — darum heißt diese Site auch strg-u)
Wie passe ich ein Theme in WordPress an?
In WordPress steuert das Theme (Template) nicht nur das Aussehen, sondern auch einen Teil der Funktionalität, zum Beispiel um Widgets plazieren zu können und hilft indirekt bei SEO (z. B. Verwaltung <title>-Tag). Deshalb gibt es neben Core und Plugins gelegentlich auch ein Update für das scheinbar passive Theme. Alles kein Problem, im Gegenteil — es sei denn, man hat individuelle Anpassungen vorgenommen…
Theme anpassen “quick & dirty”
Updates werden natürlich nur für Designs (Themes) angeboten, die über das zentrale WordPress-Verzeichnis verteilt werden. Im Gegensatz zum Core werden Updates für Plugins und Themes allerdings nicht automatisch durchgeführt, man muß ein Kreuzchen setzen. Leider gibt es keine Funktion, ein Theme generell vom Update auszunehmen. Solange es automatisch in der Liste erscheint, besteht die Gefahr, daß man es versehentlich mitaktualisiert — und damit alle individuellen Anpassungen verliert.
Was kann man am besten unternehmen?
- Man spielt aus dem Backup — wir machen doch regelmäßig ein Backup? — einfach die alten Dateien für das Theme wieder ein. Einmal davon abgesehen, daß dies sehr umständlich ist, ändert es nichts am grundsätzlichen Problem.
- Man benennt den Ordner um — schon wird das Theme nicht mehr erkannt, funktioniert aber trotzdem noch.
- Man bekommt Kinder: Mit Hilfe eines sog. Child Themes kann man Änderungen ohne Pfusch einpflegen.
Natürlich ist die dritte Möglichkeit die beste — und sie ist gar nicht so kompliziert. Denn: Man muß nicht bei Null anfangen, sondern kümmert sich nur um die Kür.
Glückliche Kindheit: Child Theme in WordPress
Es ist verführerisch, kleinere Änderungen direkt am “offenen Herzen” vorzunehmen, denn immerhin ist in WP sogar ein entsprechender Editor eingebaut und man sieht sofort die Ergebnisse. Andererseits besteht o. g. Gefahr bei einem Update alles zu verlieren. Und: Wenn man auf ein anderes Theme wechseln oder die Anpassungen auch auf einer anderen Website nutzen möchte, muß man dies alles mühsam wiederholen.
Deshalb lohnt es sich — wie so oft — zu Beginn ein paar Minuten mehr zu investieren: Mit einem sog. Child-Theme geht es dann nicht nur einfacher, sondern auch sauber. Diese Theme-Erweiterung wird von einem Update nicht überschrieben und kann mit winzigen Modifikationen — zwei Zeilen — in andere Themes oder andere Websites kopiert werden. Außerdem kann man so die Entwicklung eines eigenen Themes starten ohne bei Null anfangen zu müssen, denn im Child darf man sich nur auf die gewünschten Änderungen konzentrieren. Man muß sich nicht um das notwendige Grundgerüst kümmern, da dieses vom Parent kommt.
So legt man ein Child Theme an
(1) Zuerst im Theme-Verzeichnis einen neuen Ordner anlegen. Den kann man entweder abgewandelt nach dem Haupttheme (z. B. Coraline-child) oder einer Funktionalität benennen. Ich nenne ihn “erweiterungen”, weil ich dort Theme-unabhängige Textauszeichnungen unterbringen möchte, zum Beispiel für Zitate.
(2) In dem Verzeichnis wird eine neue Datei style.css angelegt, die im Kopfbereich weitgehend der style.css aus dem Haupttheme entspricht. Nur die rot hervorgehobenen Passagen sind wirklich wichtig.
/*Theme Name: Coraline Theme MODIFIZIERT [child]
URI: http://wordpress.org/extend/themes/coraline/
Description: Erweiterungen für das Theme Coraline
Author: Automattic / Thorsten Luhm
URI: http://automattic.com/
Template: coralineVersion: 1.4.1
License: GNU General Public License v2 or later License
URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, brown, ...*/
@import url("../coraline/style.css");
/* =gewünschte Änderungen unterhalb der Linie
-------------------------------------------------------------- */
Ab hier die CSS-Beschreibungen...
Auf diese Weise wird das child nach dem parent geladen und kann so dessen Einstellungen überschreiben. Dies betrifft natürlich erstmal nur die Eigenschaften, die in einer CSS-Datei hinterlegt werden können. Sollen auch andere Eigenschaften bearbeitet werden, legt man eine Kopie der entsprechenden Datei in das “child”-Verzeichnis (Dateiname bleibt gleich!) und ändert den Inhalt entsprechend.
Auch wenn sich das Child-Theme an das Vorbild anhängt, muß man in der Theme-Übersicht das Child als aktives Theme auswählen, damit die Änderungen übernommen werden.
(3) In der Theme-Übersicht im Backend von WordPress erscheint nun ein graues Kästchen mit dem Namen aus “Theme Name” (hier: Caroline [Erweiterungen]). Die graue Fläche stellt die fehlende Vorschau da. Es ist eine 450 x 600 Pixel große PNG-Datei, die man selbst anlegen kann.
Das Child-Theme (ganz rechts) hat noch kein Vorschaubild.
Am einfachsten geht es, indem man die Vorschau aus dem Original (Parent) kopiert und modifiziert (damit man sie vom Original unterscheiden kann): Runterladen, z. B. in Irfanview einen Text hinzufügen, hochladen — fertig.
Fazit Child Theme
Die Änderungen des Aussehens über ein Child-Theme bieten m. E. nur Vorteile:
- man fummelt nicht in fremden Dateien rum
- man kann nicht versehentlich Funktionalität zerstören
- Änderungen gehen bei Theme-Updates nicht verloren
- die Änderungen sind gesammelt in einer Datei bzw. einem Verzeichnis
- alle Änderungen sind nachvollziehbar
- an den Child Dateien kann man nach Belieben experimentieren
- das Child Theme kann man leicht auf andere WP-Sites übertragen