Jeder, der in WordPress mehr möchte, als nur fremd-produzierte Themes zu administrieren, kommt früher oder später dazu, ein Child Theme zu bearbeiten bzw. herzustellen.
Was ist ein Child Theme?
Ein Child Theme ist zunächst einmal ein Abkömmling (eben das „Child“) eines anderen Themes. Ist man mit dem bisher genutztes Theme für WordPress nicht zufrieden, ist ein Child Theme der beste Ansatzpunkt, um individuelle Lösungen einzubinden.
Das Child Theme übernimmt alle Eigenschaften des Eltern Themes – solange sie nicht im Child Theme expliziert überschrieben werden (was ja Sinn der ganzen Sache ist).
Das (Child)-Theme darf man dann ohne Gefahr manipulieren, wobei das Eltern Theme niemals angefasst wird. Dies hat mehrere Vorteile:
- Falls eine Änderung (vielleicht unwiederbringlich) misslingen, kann man das Child Theme einfach verwerfen und auf das Eltern Theme zurückgehen – oder einfach ein neues Child Theme anlegen.
- Sollte das Eltern Theme durch ein Update aufgefrischt werden, so gehen die eigenen Änderungsmaßnahmen im Child Theme nicht verloren, denn dieses Theme bleibt von Updates unberührt.
- Wenn man sich zwischen zwei (oder mehr) Änderungen nicht entscheiden kann, so legt man einfach weitere Child Themes an, um schnell zwischen die Änderungen hin- und herzuspringen.
Wichtige Regel daher: NIEMALS im Eltern Theme Änderungen vornehmen. NIEMALS NIEMALS NIEMALS
Was kann man im Child Theme machen?
Das child Theme bietet zwei große Gebiete, auf denen man sich nach Belieben austoben darf.
Design in Child Theme
HTML, CSS und Mediendateien
Im Child Theme darf (sollte) man den HTML Code anpassen. Aber nicht nur. Auch CSS Styles dürfen geändert werden. Ebenso liegt hier die beste Möglichkeit vor, Bilder, z.B Background-Images, oder andere Mediendateien permanent einzubinden. So erspart man sich den Umweg über den Medien-Upload von WordPress.
PHP Funktionalität
Ebenso lassen sich auch Funktionalitäten nachrüsten, die man sonst in einem extra anzulegenden Plugin speichern müsste. PHP-Code-lastige Teile des Themes kann man wunderbar in einer Datei namens functions.php auslagern, die man im Hauptverzeichnis des Child Themes anlegt.
Child Theme angelegen – Schritt für Schritt
1. Verzeichnis anlegen
- per FTP mit dem Server verbinden
- im Verzeichnis wp-content/themes/ ein Verzeichnis anlegen. Dieses Verzeichnis bekannt den Namen des um die Endung -child erweiterten Namens des Eltern Themes. Heißt das Verzeichnis des Eltern Themes twentytwenty, so landet das Child Theme im Verzeichnis twentytwenty-child.
2. Style Datei anlegen
Die wichtigsten Informationen über das Child Theme werden (vielleicht ungewohnterweise) in der anzulegenden Datei style.css eingefügt. Der Kopf der Datei sollte folgendermaßen aussehen:
/*
Theme Name: Twenty Twenty Child
Description: Ein Child Theme
Author: Clark Kent
Author URI: https://domain.de
Template: twentytwenty
Version: 1.0
Text Domain: twenty-twenty-child
*/Nicht alle diese Angaben sind verpflichtend. Lediglich zwei davon sind absolut notwendig:
Theme Name – Muss eindeutig sein.
Template – Der Verzeichnisname des Eltern Themes (hier also twentytwenty)
3. functions.php anlegen
In der Datei functions.php wird PHP Code eingebunden, der gezielt nur für dieses Child Theme zur Anwendung kommt. Zunächst einmal begnügen wir uns mit den befehlen zum Einbinden des Style Sheets der Eltern. Das Style Sheet des Child Themes wird automatisch korrekt eingebunden
<?php
/**
* Style sheets des Eltern Themes einbinden
*/
function my_child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_styles' );
?>Jetzt sollte unser Verzeichnis so aussehen.
4. Screenshot anlegen
Ich lege gerne eine Screenshot Datei an, um bei mehreren Themes nicht die Übersicht zu verlieren. Am schnellsten geht es, wenn man die Datei screenshot.png aus dem Verzeichnis des Eltern Themes anpasst.
Das Verzeichnis sieht jetzt so aus:
Jetzt können wir unsere noch „nacktes“ Child Theme erstmalig in WordPress auswählen.
Wenn wir jetzt den Source Code unserer Seite im Browser anzeigen lassen (in der Regel mit dem Tastaturbefehl STRG+U) sollte es genau so aussehen:
Wie man sehen kann, werden hier die Style Sheet des Parent Themes und des Child Themes eingebunden.
Das war es für jetzt. Wir werden im Weiteren noch lernen, wie man im Child Theme eigene CSS Styles einbindet bzw. die des Eltern Themes anpasst und/oder überschreibt.
