WordPress übt eine geradezu magnetische Anziehungskraft aus auf Blogger, die die Sache selbst in die Hand nehmen wollen. Du erhältst die totale Kontrolle und es existiert nichts, was du nicht mit einigen Zeilen PHP, CSS oder HTML anpassen könntest. Im Netz schwirren zudem hunderte von kleinen Funktionen zur Erweiterung des CMS herum. Die Welt von WordPress könnte so schön sein, wenn da nicht die Theme-Updates wären. Mit Child-Themes nimmst du ihnen den Schrecken.
Kennst du das Problem? Du installierst ein Theme, passt es nach deinen Vorstellungen an und bist zufrieden und glücklich damit. Dann jedoch kommt das nächste Theme-Update und alle Änderungen sind futsch.
Damit dir das nicht passiert, lernst du in diesem Beitrag, ein Child-Theme zu erstellen und zu nutzen.
Was ist ein Child-Theme und wofür benötige ich es?
Ein Child-Theme ist sozusagen das Kind eines vollwertigen, normalen Themes. Es nutzt die Dateien des Parent (Eltern)-Theme zur Darstellung. Also alle Template-Dateien, das Stylesheet für das Design, die JavaScripte – einfach alles. Daher müssen auch immer beide Themes im Theme-Ordner wp-content/themes vorhanden sein.
Alle Änderungen bleiben auch nach einem Update erhalten
Ein frisch aufgesetztes Child-Theme sieht exakt aus wie dein »richtiges« Theme. Das ist der Ausgangspunkt für jede Personalisierung deines Designs. Denn hier kannst du gefahrlos jedwede Änderung vornehmen, diese bleibt dann auch nach einem Update deines eigentlichen Themes erhalten. Das ist der große Vorteil.
Jedes WordPress Theme, das fähig ist, Updates zu bekommen, sollte heute nur noch mit einem Child-Theme eingesetzt werden. Es geht sehr einfach und die wenigen Fallstricke, die auftreten können, werden wir dir in diesem Beitrag beibringen.
Die Vorbereitung für das Erstellen eines Child-Themes
Zur Erstellung eines Kind-Designs benötigst du ein FTP-Programm und einen HTML-Editor. Beides bekommst du kostenlos. Für die Arbeit mit dem FTP-Programm benötigst du zudem noch die FTP-Zugangsdaten für dein Webhosting. Diese Daten stellt dir dein Hoster zur Verfügung.
- Ich kann dir das FTP-Programm »FileZilla« ans Herz legen, es ist wirklich gut und für Windows und Mac kostenfrei zu bekommen.
- Als HTML-Editor empfehle ich dir das Programm »Brackets«. Es ist ebenfalls kostenlos und kann mit vielen Erweiterungen auf deine persönlichen Bedürfnisse angepasst werden.
Natürlich existieren noch weitere, gute HTML-Editoren. Wir haben dazu eine Liste erstellt mit Programmen für Windows und für Mac.
- Die 9 besten kostenlosen HTML-Editoren für Webentwickler (Windows-Edition)
- Die 5 besten kostenlosen HTML-Editoren für Webentwickler (Mac-Edition)
Child-Themes erstellen und nutzen
Als Beispiel für die Erstellung eines Child-Themes nehme ich das beliebte Twenty Fiftteen Standard-Theme von WordPress. Du wirst jetzt lernen, ein Child-Design zu erstellen, ein eigenes Stylesheet für das CSS zu verwenden und Theme-Dateien anzupassen. Die Stolpersteine in der Arbeit mit Child-Layouts werde ich dir ebenfalls nahe bringen.
1 – Ein Basis Child-Theme erstellen und aktivieren
Ein Child-Theme benötigt nur drei Dinge: das Verzeichnis zum Parent-Theme, eine style.css Datei und eine functions.php.
Erstelle zunächst einen Ordner auf deinem Desktop mit dem Namen »twentyfifteen-child«. Als Zweites erstelle bitte mit dem HTML-Editor eine leere Datei namens style.css. Füge folgendes in die CSS-Datei ein:
View the code on Gist.
Mit diesem Header hast du folgende Dinge festgelegt:
- Den Namen deines Themes
- Die Beschreibung, dass es ein Child Theme des Twenty Fifteen Themes ist
- Unter Template steht die „Adresse“, die dein Child benötigt, um die Template-Dateien anzeigen zu können. Es ist der Name des Theme-Ordners des Parent-Themes. Erstellst du ein Child-Theme für ein anderes Theme, muss dort natürlich der Ordnername deines Themes hinein. Wenn du also für das beliebte »Hueman« Theme ein Child benötigst, wird dort »hueman« stehen.
- Unter Text Domain findet dein Child-Theme die Übersetzungs-Dateien, damit dein Theme weiterhin auf Deutsch angezeigt wird.
Lege als Nächstes eine leere Datei Namens functions.php an. In diese Datei muss folgendes zwingend hinein:
View the code on Gist.
Optional: Erstelle eine Grafik für dein Theme
Jedes Theme besitzt einen Screenshot, damit man es im Dashboard gut von den anderen Themes unterscheiden kann. Alles, was du dafür tun musst, ist eine Grafik mit dem Namen screenshot.png anlegen. Diese Grafik kommt dann in den Ordner des Child-Themes hinein. Dort muss es im Hauptverzeichnis liegen, nicht in einem eigenen Ordner.
Die empfohlene Größe beträgt 880 x 660 Pixel. Angezeigt wird es allerdings in den Maßen 387 x 290 Pixel. Die große Dateigröße gewährleistet jedoch, dass der Screenshot auch auf Retina-Bildschirmen gut dargestellt wird. Du darfst auch andere Bildformate wie JPG oder GIF nehmen, empfohlen wird jedoch PNG. Ich habe für das Child-Theme folgende Grafik erstellt:
Du darfst diese Grafik gern herunterladen und benutzen.
2 – Child-Theme aktivieren
Lade nun den Ordner twentyfifteen-child in das Theme-Verzeichnis (wp-content/themes) deines WordPress hoch und aktiviere dein neues Child-Themes unter „Design => Themes“.
Nun ist das neue Child-Theme aktiviert. Dank des neuen Screenshots lässt es sich sehr leicht in deinem Theme-Verzeichnis auffinden. Eine Änderung des Designs ist natürlich noch nicht eingetreten, deine Anpassungen müssen noch folgen.
3 – Child-Theme anpassen – CSS
Alle Anpassungen schreibst du nun in das style.css deines Child-Themes hinein. Einige sehr einfache Anpassungen wären vielleicht die Farbe des Hintergrunds, die Farbe, Größe und Schriftart der Überschriften und ähnliches. Mit nur einigen wenigen Zeilen CSS haben wir bereits das Theme komplett anders gestaltet:
View the code on Gist.
4 – Die Arbeit mit Template-Dateien
Dein neues Theme ist komplett anpassbar, du kannst auch eigene Templates verwenden oder die Dateien des Parent-Themes überarbeiten. Denn WordPress überprüft zuerst den Ordner des Child-Themes nach Template-Dateien. Sind dort keine vorhanden, werden die Dateien des Parent-Themes genutzt.
Das bedeutet, dass eine Datei header.php im Child-Theme Ordner verwendet wird, und eben nicht die Datei des Parent-Themes. Möchtest du die Anzeige einer bestimmten Datei ändern, kopiere sie einfach aus dem Parent-Theme in dein Child hinein. Nun kannst du die Anzeige komplett ändern oder bestimmte Elemente hinzufügen.
Zwei Beispiele: Beitragsbilder ändern und statische Share-Buttons
Beispiel 1: Die Anzeige der Beitragsbilder umkehren
Kopiere dir die Datei content.php aus dem Parent- in den Child-Ordner. Der Original-Code der Datei in den Zeilen 14 bis 27 sieht so aus:
View the code on Gist.
Spaßeshalber kehren wir den Code nun einmal um und setzen das Beitragsbild unterhalb der Überschrift ein.
View the code on Gist.
Natürlich muss unser CSS noch etwas angepasst werden, damit das Endergebnis richtig gut aussieht.
View the code on Gist.
Das Endergebnis im Screenshot:
Beispiel 2: Statische Share-Buttons hinzufügen
Auch diese Aufgabe erledigen wir mit der content.php Datei. Du musst also keine andere Datei in den Child-Ordner legen.
Teil 1: Das Snippet für die functions.php
View the code on Gist.
Die Buttons benötigen gleich zwei Funktionen. Nummer eins erzeugt die Buttons und Nummer zwei fügt den für die korrekte Anzeige nötigen Icon-Font »Font Awesome« deinem Header hinzu.
Teil 2: Das CSS
Damit die Buttons korrekt angezeigt werden, benötigen wir noch etwas CSS. Je nach Theme muss die Breite der einzelnen Buttons in Zeile neun noch angepasst werden. Für unser Twenty Fifteen Child habe ich es bereits erledigt.
View the code on Gist.
Teil 3: Die korrekte Positionierung in der content.php
View the code on Gist.
Die korrekte Position ist noch innerhalb des DIVs .entry-content gleich oberhalb des schließenden </div> Tags.
Das Endergebnis unserer Bemühungen:
Wir erhalten wunderschön formatierte Share-Buttons mit dazu passenden Icons für Facebook, Twitter, Google+, die Facebook-Seite und einen Button, der die Druck-Funktion des Browsers aktiviert.
5 – Es wird ernst. Dateien inkludieren
Einer der Fallstricke in der Arbeit mit Child-Themes. Viele unbedarfte Anfänger scheitern an dieser so einfach erscheinenden Aufgabe, weil die Snippets aus dem Internet immer für eigenständige Themes gedacht sind. Daher können sie nicht funktionieren.
Wenn man eine Datei inkludieren möchte oder muss, bekommt man im Internet zum Beispiel den folgenden Code:
require_once( get_template_directory() . '/my_included_file.php' );
Dieser kleine Tag versucht eine Datei aus dem Parent-Theme zu laden. Denn die genutzten Templates des Child-Themes liegen dort. Da wir mit unserem Stylesheet das CSS des Parent-Themes überschreiben, muss stattdessen der folgende Tag genutzt werden:
require_once( get_stylesheet_directory() . '/my_included_file.php' );
Der obige Tag sucht sich die benötigte Datei nun aus dem Child-Ordner heraus. Nutze also stets die get_stylesheet_directory() Variante, dann bekommst du das gewünschte Ergebnis.
Prüfe jedes Snippet aus dem Internet, ob es auf diesen kleinen Unterschied modifiziert werden muss.
6 – Widget-Bereiche hinzufügen
Auch zusätzliche Widget-Bereiche sind problemlos möglich. Wir könnten zum Beispiel einen Bereich erstellen, der eigentlich nicht vorgesehen ist, Widgets zu beherbergen – der Footer. Füge den folgenden Code in die functions.php deines Child-Themes hinein:
View the code on Gist.
Danach kopierst du dir die footer.php aus dem »Twenty Fifteen« Theme Ordner in deinen Theme-Ordner hinein und fügst vorher noch diesen kleinen Code hinzu:
View the code on Gist.
An dieser Stelle in der footer.php scheint der Code gut aufgehoben zu sein:
View the code on Gist.
Das Endergebnis:
Child-Theme Download
Das soeben erstellte Child-Theme für Twenty Fifteen kannst du herunterladen.
Das Erstellen eines Child-Themes aus einem vorhandenen, modifizierten Theme
Es ist so viel einfacher, ein Child-Theme von Anfang an zu gestalten. Wenn du jedoch bereits ein Theme stark modifiziert hast, ohne ein Child-Theme zuvor angelegt zu haben, dann ist auch das möglich. Du musst alle Änderungen in das Child-Theme übertragen, um damit sicherzustellen, dass eine etwaige Aktualisierung des Parent-Themes nicht alle Änderungen löscht.
Lies dir die folgenden Schritte genau durch, damit du sie exakt Punkt für Punkt abarbeiten kannst. Diese Arbeit ist kompliziert, schwierig und mit viel Fummelei verbunden.
- Mache zuerst ein Backup deines Themes. Nutze dazu deinen FTP-Zugang und kopiere deinen Theme-Ordner auf deinen Desktop. Erstelle von diesem Ordner noch ein Backup und speichere es an einer anderen Stelle. Einen dieser Ordner wirst du zum Arbeiten nutzen, der andere dient als Backup, falls alles schief läuft.
- Erstelle nun ein Child-Theme nach der Anleitung oben. Ein Ordner, ein leeres Stylesheet, eine leere
functions.php, und gegebenenfalls einen Screenshot. - Besorge dir eine frische, nicht modifizierte Version deines Themes.
- Teile deinen HTML-Editor mittig, damit du jeweils links die Original-Datei anzeigen kannst und rechts die aus deinem modifizierten Theme. Prüfe für jede Template-Datei, ob du Änderungen getätigt hast.
- Übertrage alle Modifizierungen aus der
functions.phpin die Version deines Child-Themes. - Die geänderten Dateien wandern in den Child-Theme-Ordner hinein. Prüfe hierbei noch, ob du
get_template_directory()gegenget_stylesheet_directory()tauschen musst. Siehe weiter oben im Artikel. - Nun kommt der Part, der wirklich etwas »Tricky« ist. Du musst nun die frische Style.css-Version mit der von dir geänderten Datei vergleichen. Vielleicht hat dein HTML-Editor eine Funktion, die zwei Dateien auf Differenzen vergleichen kann. Das wäre hilfreich. Ich habe eine solche Funktion noch nie benötigt. Verfügst du nicht über diese hilfreiche Funktion, dann musst du die Dateien dem Augenschein nach vergleichen. Alle Änderungen wandern in eine eigene
style.cssDatei. Diese kommt dann mit allen Modifikationen versehen in den Child-Theme-Ordner hinein. - Nachdem du das Gefühl hast, alle geänderten Theme-Dateien und das erweiterte CSS in den Child-Theme-Ordner gepackt zu haben, lade den Ordner in dein Theme-Verzeichnis
wp-content/themes. Achte darauf, dass sich die frische Version deines Themes ebenfalls im Theme-Verzeichnis befindet. - Logge Dich in dein WordPress ein und navigiere zu den Themes. Nutze die Live-Vorschau, um dein frisch erstelltes Child-Theme zu prüfen. Wenn alles korrekt angezeigt wird, gut. Wenn nicht, prüfe, in welchen Bereichen du noch etwas übersehen haben könntest.
- Arbeite die fehlenden Punkte ab.
- Prüfe erneut die gesamte Website auf alle nötigen Funktionen und auf eine korrekte Anzeige mit der Live-Vorschau. Wenn wirklich alles passt, aktiviere dein Child-Theme und erfreue dich daran.
- Mach so einen Scheiß nie wieder:-)
Fazit
Nun hast du so ziemlich alle wichtigen Punkte in der Erstellung eines Child-Themes kennengelernt und weißt auch, warum du immer eines nutzen solltest. Alle anderen Schwierigkeiten, die sich dir stellen, musst du wie immer googeln. Denn leider ist es kaum möglich, alles wissenswerte in einen Artikel zu bringen, da sich viele Probleme erst bei der Entwicklung eines Child-Themes zeigen.
(dpe)