WordPress kommt häufig mit einem fertigen oder sogar extra gekauften Design zum Einsatz. Nicht selten erfüllt dies die Anforderungen zwar weitgehend, aber kleinere Veränderungen wären dennoch wünschenswert. Dafür eignen sich Child Themes optimal: Es wird einfach ein neues Design erstellt, dass vom zu verändernden Theme erbt. So können eigene Komponenten hinzugefügt oder vorhandene modifiziert werden, ohne das originale Theme zu verändern. Dadurch bleibt es updatefähig, ohne nach jedem Theme-Update mühsam sämtliche Modifikationen erneut einfügen zu müssen. Zu diesem Thema findet man bereits einige Artikel die zwar funktionsfähig sind, jedoch beispielsweise performancetechnisch suboptimal oder unvollständig sind. Hier soll auch auf diesen Aspekt eingegangen werden.
Ein Child Theme erstellen
Zu allererst muss ein eigenes Child Theme erstellt werden. Dazu legt man ausgehend von WordPress-Root im Verzeichnis wp-content/themes einen neuen Ordner für das Design an. Dieser ist frei wählbar, darf jedoch keine Leer- oder andere Sonderzeichen enthalten. Darin werden zwei Dateien angelegt: style.css und functions.php. Am wichtigsten ist die CSS-Datei, da WordPress anhand dieser das Parent-Theme zuordnet. Sie muss mit folgendem Kommentar beginnen:
/*
Theme Name: U-Labs
Description: U-Labs Design
Author: Daniel Weber
Author URI: https://u-labs.de
Template: twentyfifteen
Version: 1.0
Tags:
*/
Diese Angaben sind im Adminbereich von WordPress sichtbar und bis auf Template frei wählbar. Hier muss der Name des Ordners im Verzeichnis wp-content/themes angegeben werden, in dem sich das Parent Design befinden. In obigem Beispiel wird das WordPress Standard-Theme Twenty Fifteen als Basis-Theme verwendet. Nun wird das neu erstellte Design im Adminbereich von WordPress unter dem Menüpunkt Design => Themes aufgelistet und kann aktiviert werden.
Allerdings wird es zerschossen aussehen, da die style.css des Parent-Designs nicht automatisch geladen wird. Dazu verwendet man am besten die automatisch geladene functions.php sowie die dafür vorgesehene WordPress-Funktion wp_enqueue_style:
add_action( 'wp_enqueue_scripts', 'ultheme_include_clientscript', 11 );
function mytheme_include_clientscript() {
wp_enqueue_style( 'parent-theme-stylesheet', get_template_directory_uri() . '/style.css' );
}
Das reicht bei vielen Themes bereits aus. Damit man CSS aus dem Parent Theme überschreiben kann ist jedoch die Reihenfolge wichtig, in der die zwei Stylesheets eingebunden werden: Das Stylesheet des Child Themes muss nach der style.css des Parent Designs geladen werden. Ansonsten werden eure Änderungen möglicherweise vom Originalen Design überschrieben. Dazu genügt es, auf der Startseite des Blogs im Quelltext (Strg + U) nach style.css zu suchen. Dazu drückt man am einfachsten Strg + F, um die browsereigene Suchfunktion zu verwenden.
Es werden zwei Dateien gefunden:
<link rel='stylesheet' id='my-theme-css' href='http://example.com/blog/wp-content/themes/my-theme/style.css' type='text/css' media='all' /> <link rel='stylesheet' id='parent-theme-stylesheet-css' href='http://example.com/blog/wp-content/themes/parent-theme/style.css' type='text/css' media='all' />
Diese lassen sich anhand des Theme-Ordners zuordnen. In diesem Beispiel wird das Stylesheet des selbst erstellten Designs (my-theme) vor dem des originalen (parent-theme) geladen, sodass oben beschriebenes Problem auftritt. Damit ihr nun das Stylesheet des originalen Designs überschreiben könnt, muss die Reihenfolge geändert werden. Das funktioniert nur, in dem das vom originalen Theme registrierte Stylesheet entfernt und nach Registrierung eures eigenen Stylesheets wieder eingebunden wird:
function mytheme_include_clientscript() {
// Stylesheet des Parent-Styles entfernen
wp_deregister_style( 'parent-style' );
// Zuerst das Stylesheet des Parent-Styles wieder einbinden
wp_enqueue_style( 'parent-theme-stylesheet', get_template_directory_uri() . '/style.css' );
// Anschließend das Stylesheet des aktuellen Themes, sodass dies zuletzt geladen wird
wp_enqueue_style( 'child-theme-style', get_stylesheet_uri() );
}
parent-style ist die Bezeichnung (handle), unter der das Stylesheet registriert wurde. Diese wird vom Entwickler des Designs festgelegt und lässt sich entweder durch Suchen im originalen Theme oder mit dem Plugin Debug Bar ermitteln.
Modifikationen vornehmen
Nun kann dieses Grundgerüst dazu verwendet werden, um das Parent Theme wie gewünscht anzupassen. Vieles lässt sich bereits über die CSS-Datei regeln. Alles was ihr dort einfügt überschreibt die Werte des ursprünglichen Designs. Sollte dies nicht funktionieren, hat der Theme-Entwickler seine Eigenschaft mittels !important als höher priorisiert definiert. Auch in diesem Fall ist das überschreiben möglich, in dem ihr einfach ebenfalls important verwendet:
h1 {
color: blue !important;
}
In diesem Fall wird nämlich die Eigenschaft übernommen, welches als Letztes definiert wurde. Und das ist bei unserem Child Theme der Fall, da dessen Stylesheet erst nach dem des originalen Designs geladen wird.
Für alle anderen Dinge die sich nicht im Stylesheet überschreiben lassen, gibt es die functions.php. Sie wird automatisch eingebunden und man kann dort sämtliche WordPress-Funktionen verwenden. Dies wäre beispielsweise nötig, wenn das originale Design ein bestimmtes Bildformat festlegt:
// [...] add_image_size( 'theme-thumbnail-small', 70, 70, true );
In diesem Fall nutzt man einfach die Action after_theme_setup, um dieses Format mit den gewünschten Werten zu überschreiben:
add_action( 'after_setup_theme', 'overwrite_image_sizes' );
/**
* Überschreibt die vom Parent-Theme gesetzten Bildgrößen
*/
function overwrite_image_sizes() {
// Vorschaubilder vergrößern und weich anstatt hart zuschneiden (https://codex.wordpress.org/Function_Reference/add_image_size)
add_image_size( 'theme-thumbnail-small', 150, 150, false );
}
Gerade bei diesem Beispiel ist zu beachten, dass sich diese Änderung nicht nachträglich auf bereits hochgeladene Bilder auswirkt! Die Änderungen werden erst sichtbar, wenn man ein neues Bild hochläd bzw. alle Vorschaubilder mit einem entsprechenden Plugin neu erstellen lässt. Dies sei nur am Rande erwähnt, um dem einen oder anderen die Fehlersuche zu ersparen.
Vorschau-Bild einfügen
Wenn man das Design im Admin-Panel aktiviert, wird es als leere Box angezeigt:
Das lässt sich ändern, in dem eine Bilddatei namens screenshot im PNG-Format in das Haupt-Verzeichnis des Themes (also wp-content/themes/mythemename) abgelegt wird. Dies kann beispielsweise ein Screenshot der WordPress-Startseite mit diesem Design sein. Oder aber auch ein selbst erstelltes Logo. WordPress zeigt dieses Bild automatisch in der gepunkteten Fläche an. Damit dies passt und gut aussieht, sollte das Bild 600 x 450 Pixel dimensioniert sein.
Schlechte Alternativen
CSS @import
Häufig wird empfohlen, das Stylesheet des Parent Themes einfach mittels der Import-Funktion in der eigenen style.css zu laden:
/*
Theme Name: U-Labs
Description: U-Labs Design
Author: Daniel Weber
Author URI: https://u-labs.de
Template: twentyfifteen
Version: 1.0
Tags:
*/
@import url("../twentytwelve/style.css");
Diese Lösung erzielt dasselbe Ergebnis wie die oben in diesem Artikel erklärte und ist zugegebenermaßen deutlich einfacher umgesetzt. Dennoch habe ich mich dagegen entschieden, weil durch @import das Rendering blockiert wird. Bei der regulären Einbindung als link-Element im HTML tritt dies nicht auf, hier wird bei modernen Browsern in der Regel parallel heruntergeladen.
Plugin
Grundsätzlich kann man auch ein kleines Plugin entwickeln – Etwa um ein zweites Stylesheet nachzuladen, welches bestimmte Eigenschaften aus der style.css des Designs überschreibt. Für solche trivialen Änderungen mag das sicher in einigen Fällen ausreichen. Allerdings kann es insbesondere bei den WordPress-Funktionen zu Problemen kommen: Das Überschreiben einer vom Theme gesetzten Bildgröße wie oben demonstriert funktioniert in Form eines Plugins beispielsweise nicht korrekt. Dies dürfte einer der Gründe sein, warum Child Themes in der WordPress-Dokumentation explizit zur Modifikation eines Designs empfohlen werden. Abgesehen davon passt es natürlich auch strukturell besser.
Es macht daher Sinn, für solche Anpassungen grundsätzlich Child Themes zu verwenden. Spätestens wenn einfaches überschreiben nicht möglich ist und man daher Änderungen an den PHP-Dateien vornehmen muss ist dies ohnehin die bessere Lösung. In diesem Fall kopiert man die betroffenen Dateien einfach in das Verzeichnis des Child Themes und passt diese an. Mit einem Plugin wäre etwas vergleichbares nicht ohne weiteres möglich – zumindest nicht ohne auf unsaubere und fragwürdige Methoden zurückzugreifen.