Verwendung von Child-Themes in WordPress

Sie wollen Ihrer WordPress-Seite ein individuelles Aussehen verpassen und müssen dafür einige Anpassungen in Punkto Optik und Funktionalität vornehmen?

Wenn Sie diese Anpassungen im Original-Theme vornehmen kann das wunderbar funktionieren…
…bis zum nächsten Update. Dann werden alle Änderungen überschreiben und Sie müssen erneut dran.

Abhilfe schafft hier die Verwendung eines Child-Themes.
Ein Child-Theme verwendet die Funktionalität des eigentlichen Themes, kann aber in Optik und Funktionalität erweitert werden.

Bei einem WordPress-Update wird das Original-Theme (Parent-Theme) mit den neuesten Änderungen überschrieben, das Child-Theme – und damit auch Ihre Anpassungen – wird bei einem Update nicht verändert.

Ein Child-Theme besteht aus mindestens 3 Dateien:

  • style.css // definiert das Parent-Theme, erweitert die Optik
  • functions.php // läd die style.css, erweitert die Funktionalität
  • screenshot.png // das Vorschaubild, kann z.B. vom Original-Theme kopiert werden

Das alles muss in einem Ordner mit dem Namen „Parent-Theme“-child befinden.
Als Beispiel soll hier ein Child-Theme für das Theme „Twenty Sixteen“ erstellt werden.

Zusätzlich können Sie auch noch eine Datei „ReadMe.txt“ in den Ordner legen und hier alle wichtigen Informationen für die Anpassung und Verwendung des Child-Themes zusammenfassen. Das ist eine hilfreiche Gedächtnisstütze, wenn Sie häufiger mal ein Child-Theme anlegen müssen.

style.css

Der Inhalt der style.css sollte mindestens folgenden Inhalt haben:

/*
Theme Name: Original-Theme Child // im Beisp: TwentySixteen Child
Template: twentysixteen
*/

/*Add your own styles here:*/

Die Einträge „Theme Name“ und „Template“ sind zwingend erforderlich.

Der Inhalt der „ReadMe.txt“ könnte demnach folgendermaßen aussehen:

// Diese Datei kann gelöscht werden!
// Informationen zu style.css
Zeile 2	: Theme Name:
    // unter dieser Bezeichnung wird das Theme im Backend angezeigt.
    // Ersetzen Sie "Parent-Theme" durch den Namen des Themes,  
    // welches Sie als "Parent" verwenden möchten
Zeile 3	: Template:
    // Diese Information findet man im "parent"-Theme 
    // unter dem Eintrag “Text Domain:” in der Datei "style.css"

screenshot.png kann gegen ein anderes Bild (mit gleichem Namen) ausgewechselt werden.

functions.php

nach WordPress Codex sollte der Inhalt der functions.php folgendermaßen aussehen:

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
	$parent_style = 'parent-style';		// z.B. 'twentysixteen-style' für das Twenty Sixteen Theme (siehe ReadMe.txt)
	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), wp_get_theme()->get('Version') );
}


// Fügen Sie ab hier ihre functions ein. Sie können auch einige der Parent-Theme functions in diese Datei kopieren. 
// WordPress wird dann diese functions anstatt der Original-functions verwenden.

Damit werden die beiden CSS Dateien bereits auf dem Server per PHP richtig „sortiert“.
Die Dateien des Child Themes werden anstatt der Dateien des Parent Themes mit gleichem Namen geladen. Dies gilt für alle Dateien eines Themes mit der Ausnahme der functions.php Datei. Hier werden die Inhalte beider Dateien nacheinander geladen. In der functions.php Datei des Child Themes sollten also nur solche Funktionen hinterlegt werden, die im Child Theme ZUSÄTZLICH benötigt werden.

screenshot.png

Um Ihrem Child-Theme ein Vorschaubild zu verpassen benötigen Sie eine Bilddatei mit der Bezeichnung „screenshot.png“ in dem Child-Theme-Verzeichnis.
Das Bild kann vom Parent-Theme kopiert werden und dann z.B. mit einer Bildbearbeitung mit dem Zusatz „child-theme“ versehen werden.

screenshot

Wie immer gilt: testen und Einsatz auf eigene Verantwortung

 

0 Kommentare

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.