Internetkurse Köln

Wer sich eine Website auf Basis von WordPress einrichtet, bekommt ein Theme von Haus aus gleich mitgeliefert. Aktuell ist dies das Theme twentyfifteen. In unserem Blogbeitrag Welches WordPress Theme ist für mich geeignet? hatten wir uns schon der Frage gewidmet, welche Themes gerade für Einsteiger besonders geeignet sein können. Heute geht es weiter mit der Frage: Was mache ich denn, damit meine Änderungen in dem Theme bei Updates nicht verloren gehen?

Die Antwort auf diese Frage lautet:

Sie erstellen ein Child Theme!

Ein Child Theme basiert auf einem installierten Theme, das dann zum sogenannten Parent Theme wird. In der Folge benutzt das Kind die zur Verfügung gestellte Funktionalität der Mutter (oder auch des Vaters, wenn Ihnen die Idee besser gefällt), kann aber abgewandelt und verändert werden, ohne dass Sie Gefahr laufen, nach einem Parent Theme Update alle Ihre Änderungen zu verlieren. Würden Sie Ihre Anpassungen direkt im Parent Theme vornehmen, wären diese nach dem nächsten Update nämlich futsch!

Wie erstelle ich ein Child Theme?

Für die Erstellung eines Child Themes gibt es zwei unterschiedliche Wege. Beide setzen voraus, dass Sie für das Kind ein Unterverzeichnis anlegen und dort all jene Dateien hineinkopieren, die Sie bearbeiten wollen. Allen voran ist dies die style.css, die Sie um einige Angaben ergänzen.

Der bisherige Weg fügte der style.css einen @import-Befehl hinzu. Das neue Vorgehen arbeitet ohne den @import-Befehl in der style.css. Stattdessen erstellen Sie eine Datei mit dem Namen functions.php, in die Sie einige Zeilen PHP-Code hineinkopieren.

Drei Schritte zur Erstellung eines Child Themes

1. Verzeichnis für das Child Theme anlegen

Zuerst legen Sie im Verzeichnis wp-content/themes ein neues Verzeichnis an, also zum Beispiel wp-content/themes/mychild. Sie können den Ordner ganz nach Belieben benennen, es sollten jedoch keine Leerzeichen und Umlaute im Namen vorkommen.

In den Child Theme-Ordner kopieren Sie nun die style.css, die Sie im Parent Theme-Ordner finden. Wenn Sie nur einzelne Elemente farblich oder in Hinblick auf Größe, Schriftart, etc. anpassen wollen, ist dies die einzige Datei, die Sie brauchen. Wollen Sie auch Einfluss auf die strukturelle Darstellung nehmen (hierfür sind dann allerdings PHP-Kenntnisse nötig!), können Sie auch wesentliche PHP-Dateien wie die archive.php, die index.php, die single.php, die page.php etc. kopieren. Bemerke: In diesem Fall könnte dann aber auch das Child Theme Dilemma zuschlagen.

Die functions.php sollten Sie nicht kopieren! Der Grund hierfür: Die functions.php des Child Themes überschreibt nicht die functions.php des Parent Themes, sondern ergänzt diese. Die doppelte Nennung der Befehle würde zu fatalen Fehlern führen.

2. Angaben in der style.css des Child Themes

Damit WordPress das Child Theme erkennt, ist es nötig, zusätzliche Angaben in der style.css zu machen.

Direkt zu Beginn der Datei finden Sie eine Reihe von Angaben, die zwischen den Zeichen /*………*/ stehen. Löschen Sie diese und schreiben Sie stattdessen folgendes hinein:

/* Theme Name: Mein Child Theme
Description: Mein wunderbares Child Theme
Author: Mein Name
Author URI: http://www.meineDomain.de
Template: name_des_parent-theme-ordners
Version: 1.0
Tags:
*/

Bemerke: Die Angaben für Theme Name und Template sind obligatorisch. Die Angabe des Templates erfolgt zwingend in kleinbuchstaben!

Der bisherige Weg: der @import-Befehl

3.1 Pfad der parent style.css importieren

Nach dem schließenden */-Zeichen ergänzen Sie in der nächsten Zeile nun den @import Befehl. Der stellt die Verbindung zur CSS-Datei des Parent Themes her.

@import url("../name_des_parent-theme-ordners/style.css");

Nun wird das Child Theme von WordPress im Backend erkannt. Sie können es im Backend Ihrer WordPress-Installation aktivieren. Änderungen, die Sie in der style.css vornehmen, realisieren sich sofort im Frontend Ihrer Website.

Der bessere Weg: enqueue in der functions.php

Die ersten beiden Schritte sind dieselben wie bisher. Einzig der dritte Schritt ändert sich. Die Verbindung zur style.css des Parent Themes stellen Sie über die functions.php Ihres Kindes her. Dieses Vorgehen wird explizit auf https://codex.wordpress.org/Child_Themes so empfohlen.

3.2 style.css per PHP-Befehl einreihen

Statt also den @import-Befehls in Ihrer style.css zu hinterlegen, erstellen Sie mit einem Texteditor (z.B. Notepad++) eine Datei mit dem Namen functions.php, setzen in die erste Zeile (KEINE Leerzeile vorweg!)

<?php

und geben folgende Codezeilen ein:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Das Child Theme sollte automatisch geladen werden. Passiert dies nicht, ist alternativ ein erweiterter Code nötig:

function theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Enqueue heißt auf Deutsch übrigens einreihen, und genau das ist es, was hier passiert: Die beiden CSS-Dateien des Parent und des Child Themes werden in eine Reihe gebracht.

Wiederum können Sie nun Ihr Child Theme im Backend aktivieren. Dann können Sie Ihre Änderungen in der style.css und/oder in einzelnen PHP-Dateien vornehmen, die sich sofort im Frontend Ihrer Installation realisieren.

Probleme des enqueue-Befehls

Dieses Vorgehen funktioniert allerdings nur für Themes, die nur über eine style.css verfügen, in der sie alle style-Definitionen auflisten. Arbeitet das Theme mit mehreren CSS-Dateien – weil es zum Beispiel Angaben für die mobile Darstellung und für Printangaben in getrennten Dateien auslagert -, lautet der Befehl schon wieder anders. Auch kann es problematisch werden, wenn der Theme-Autor seine CSS-Datei nach althergebrachter Weise mit einem link-Befehl in der header.php verbunden hat. In diesem Fall müssten Sie die header.php erst einmal durch eine Variante ohne diesen link-Befehl ersetzen.

Sie merken: Hier kommen wir ganz schnell in Bereiche, die nicht länger einsteigerfreundlich sind. Auch fortgeschrittenen Nutzern brummt da schnell mal der Schädel. Wir befinden uns in einer Umbruchphase, in der noch sehr viele Themes am Markt sind, die auf das neue Vorgehen nicht vorbereitet sind. Auch bleibt es fraglich, ob sich die Theme-Entwickler weltweit in näherer Zukunft auf einen Standard einigen, der auf einen konkreten enqueue-Befehl anspricht.

Was also tun?

Lassen Sie sich nicht entmutigen: Wenn Sie ohnehin nur Änderungen in der style.css vornehmen und nicht auch noch PHP-Dateien modifizieren wollen, erscheint uns der bisherige Weg, also das Arbeiten mit dem @import-Befehl, als der erheblich einfachere.

Ungeachtet, für welchen der beiden Wege Sie sich entscheiden: Nun beginnt die eigentliche Arbeit. Und das Gute ist: Kein Theme-Update kann Ihnen die Ergebnisse Ihres Schaffens überschreiben – umgekehrt können Sie hingegeben immer wieder zum Original zurück, denn das Parent Theme bleibt von all Ihren Änderungen völlig unberührt.