Wenn man in WordPress das Aussehen des gewählten Themes ändern will, dann macht man das am Besten über ein Child Theme. Hier wird erklärt wie das gemacht wird und warum man so vorgeht.
Warum sollte man immer mit Child-Themes arbeiten?
Ein Child Theme erbt immer alle Eigenschaften vom Eltern-Theme. Beide Themes bleiben vom jeweils anderen unangetastet. Updates am Eltern-Theme haben keine Auswirkungen auf das Child-Theme und Änderungen am Child-Theme haben keine Auswirkungen im Eltern-Theme.
Ebenso kann man im Child-Theme sehr gut die jeweiligen Änderungen im Projekt verfolgen. Es ist mittlerweile eine allgemein übliche Praxis sofort nach der Auswahl des Themes ein Child-Theme anzulegen.
Wie Child-Themes funktionieren?
Ein Child-Theme wird in einem eigenen Verzeichnis gespeichert. In diesem Verzeichnis gibt es immer zumindest zwei Dateien mit den Namen style.css und functions.php. Weitere Dateien können angelegt werden, aber diese zwei müssen immer vorhanden sein.
Man kann sich das Ganze als Überlagerung vorstellen. Zuerst kommt das Eltern-Theme und darauf werden die Einstellungen des Child-Theme angewendet.
Ein Child-Theme erzeugen
Die folgenden Ausführungen beziehen sich auf das aktuelle TwentyTwenty Theme, sie funktionieren aber auch mit jedem anderem Theme.
Um auf dem Web-Server ein Verzeichnis anzulegen gibt es verschiedene Möglichkeiten. In dieser Anleitung wird dafür das WordPress Plugin WP File Manager verwendet. Dieses Plugin ist bei unserem WordPress Hosting in der Pro Version immer dabei. Wenn Sie das Plugin also noch nicht installiert haben öffnen Sie die WordPress Plugin Seite und installieren Sie das WP File Manager Plugin. Sobald das Plugin installiert ist finden Sie im WordPress Menü den WP File Manager.
Wählen Sie den Ordner wp-content und dann themes. Hier sehen Sie alle installierten Themes, jedes in einem eigenen Verzeichnis. Das Verzeichnis twentytwenty sollte hier zu sehen sein.
Legen Sie hier ein neues Verzeichnis mit dem Namen twentytwenty-child an. Achten Sie immer darauf das Sie in dem Namen keine Leerzeichen verwenden.
In dem twentytwenty-child Ordner erzeugen Sie jetzt eine neue Datei style.css und schreiben Sie folgenden Inhalt hinein.
/*
Theme Name: Twenty Twenty Child
Theme URL: http://meinedomain.com
Description: Twenty Twenty Child
Theme Author: Name
Author URL: http://meinedomain.com
Template: twentytwenty
Version: 1.0.0
Text Domain: twentytwenty-child
*/
Ändern Sie die Werte nach Ihren Bedürfnissen. Das wichtigste Feld ist das Template-Feld, hier muss die Referenz auf das Eltern-Theme stehen. Sobald Sie alle Werte eingetragen haben speichern und schließen Sie die Datei.
Nun kommen wir zu der zweiten Datei, der functions.php. Die functions.php gehört in den selben Ordner und soll folgenden Inhalt haben:
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>
Wenn man dem neuen Child-Theme einen schönen Umhang geben möchte, kann man in das Child Verzeichnis noch ein Bild hinein kopieren. Das Bild sollte 1200 x 900 Pixel groß sein, im png-Format gespeichert sein und den Namen screenshot.png haben.
Jetzt muss das neue Child-Theme nur noch aktiviert werden. Dazu wählen Sie im WordPress Menü Design und Themes und aktivieren das neue Child Theme.
Das Child-Theme weiter anpassen
Für die weitere Anpassung benötigen Sie ein grundlegendes Verständnis von CSS und HTML. Sie können zum Beispiel in der styles.css folgenden Code eintragen und damit die Hintergrundfarbe ändern.
.site-content-contain {
background-color: #DEF0F5;
position: relative;
}
Oder hier die Hintergrundfarbe der Seitenleiste:
.widget {
background: #B9EBFA;
padding: 25px;
}
Sie können so nahezu ihre gesamte WordPress Seite gestalten und sind unabhängig von Updates des Eltern-Theme. Für ein tieferes Verständnis sollte man unbedingt ein WordPress Buch (zum Beispiel WordPress 5, Das umfassende Handbuch, Rheinwerk Verlag) zu Rate ziehen.
