Wordpress Child-Themes
Wenn man nicht gerade ein eigenes Wordpress Theme komplett selbst aufbaut, kommt man schonmal auf die Idee, die Dateien eines heruntergeladenen Themes zu bearbeiten. Doof nur, wenn die eigenen Änderungen auf einmal unwiederbringlich überschrieben werden.
Denn auch Themes unterliegen wie Plugins einem Aktualisierungszyklus. Gleichermaßen möchte man aber auf diese Aktualisierungen aus Sicherheitsgründen auch nicht verzichten.
Die Lösung: ein sogenanntes Child-Theme.
Was genau ist ein Child-Theme?
Ein Wordpress Child-Theme ist technisch gesehen ein separates Theme im theme-Ordner der Wordpress-Installation, das aber Design und Templates eines anderen Themes übernimmt – sofern diese Dateien im Child-Theme nicht ebenfalls existieren und somit "überschrieben" werden.
Das initiale Anlegen eines Child-Themes ist überraschend leicht und bedarf (zunächst) keiner Programmierkenntnisse. Erstaunlicherweise erfolgt die Registrierung eines Themes allein anhand einer CSS-Datei.
Anatomie eines Child-Themes
Angenommen, wir möchten das Wordpress Theme "Twenty Twenty" bearbeiten, und dieses tun wir, indem wir hierfür ein Child-Theme erstellen. Lege hierzu im Themes-Ordner Deiner Wordpress-Installation einen neuen Ordner mit dem Namen (z. B.) "mychildtheme" an.
Die Mindestanforderung an ein Child-Theme sind die folgenden Dateien:
- index.php
- functions.php
- style.css
Die index.php kopierst Du fürs Erste am Einfachsten aus dem Parent-Theme.
Dann erstellst Du eine leere style.css und eine functions.php Datei im selben Ordner.
style.css
/*
Theme Name: Mein Twenty Twenty Child-Theme
Text Domain: mychildtheme
Template: twentytwenty
Version: 1.0.0
Description: Mein Twenty Twenty Child-Theme
Author: Dein Name
Author URI: https://deine-website.de/
*/
Fig. 2: Inhalt der style.css
Der Theme Name ist der sprechende Name Deines Themes. Dieser kann frei gewählt werden. Ebenso die Text Domain; hier solltest Du aber nur ein Kürzel nur aus Kleinbuchstaben wählen. Die Angabe eines Templates ist der Unterschied zu einem regulären Parent Theme. Als Wert trägst Du hier die Text Domain des Parent Themes ein. In diesem Falle also twentytwenty. Du findest das Kürzel Deines Parent Themes in der style.css des jeweiligen Themes.
functions.php
<?php
/**
* Meine Child Theme functions.php
*
*/
//Register and Enqueue Styles.
function mychildtheme_register_styles() {
$theme_version = wp_get_theme()->get( 'Version' );
wp_enqueue_style( 'twentytwenty-style', get_template_directory_uri() . '/style.css', array(), $theme_version );
wp_enqueue_style( 'my-style', get_stylesheet_directory() . '/style.css', array(), $theme_version );
}
add_action( 'wp_enqueue_scripts', 'mychildtheme_register_styles' );
Fig. 3: Inhalt der functions.php
Das Besondere bei der functions.php ist, dass beide Versionen – also die functions.php des Parent Themes, sowie Deine im Child-Theme geladen werden. Diese Info ist wichtig beim Erstellen neuer Funktionen, denn diese dürfen nicht denselben Namen besitzen, sonst gibt's unschöne PHP Fehler, bzw. das Laden Deiner Seite wird verhindert.
Wenn Du aus Neugier bereits versucht hast, das Child-Theme zu aktivieren, wirst Du festgestellt haben, dass die Seite ohne wirkliches Design dargestellt wird. Damit die Seite nun korrekt dargstellt wird, sollten wir noch das Stylesheet des Parent Themes einbinden. Das erreichen wir am Elegantesten per Function wp_enqueue_style(), s. Fig. 3.
Bei der Pfadangabe zum Stylesheet musst Du unbedingt get_template_directory_uri() benutzen, um im Ordner des Parent Themes zu landen.
Letzter Schritt: Aktivieren unter Design / Themes
Wie geht es von hier weiter?
Von jetzt an kannst Du in Deinem eigenen Theme-Ordner Dateien hinzufügen und verändern, wie Du möchtest, ohne dass diese Änderungen beim nächsten Update des Parent Themes verloren gingen.
Wenn Du nun Deinen eigenen Header (header.php) erstellen möchtest, oder das Template fürs Blogarchiv (archive.php) verändern möchtest, kopierst Du Dir am Besten die entsprechende Datei vom Parent Theme in den Child-Theme Ordner und nimmst dort Deine Anpassungen vor. Ab diesem Moment wird Deine Dateiversion geladen und nicht mehr die des Parent Themes.
Happy Coding.
Gib mir Deinen Senf dazu
Kommentare sind für diesen Eintrag derzeit nicht aktiviert.
Kommentare zu diesem Beitrag