Child Theme Erstellung

Ein Child-Theme legt einer Maske gleich sein Layout und seine Funktionen auf das Parent-Theme und bietet dadurch die Möglichkeit Funktionen, Beitrags- und Seiten-Templates hinzuzufügen und zu ändern.

Seit der WordPress Version 4.7. (Vaughan 2019) können eigene CSS-Styles im Customizer unter ZUSÄTZLICHES CSS hinzugefügt. Vorher war die Manipulation des Seitenlayouts nur über ein Child-Theme möglich. Das Child-Theme ist allerdings weit mehr als ein CSS-Überträger. Es kann Funktionen, Templates und eine Vielzahl von Codes beinhalten die nicht bei einem UpDate des Eltern-Themes überschrieben werden. Gleichzeitig ist ein Child-Theme eine sichere Methode Änderungen vorzunehmen, die leicht zurückzuverfolgen und gleichzeitig problemlos revidierbar sind.

Child-Theme Verzeichnis anlegen

Ein Child-Theme wird wie das Parent-Theme im Theme-Ordner von WordPress hinterlegt. Es wird durch einen Codeschnipsel in der functions.php mit dem Parent-Theme verknüpft. Grundsätzlich hat ein Child-Theme seine eigene style.css und functions.php. Diese beiden Dateien bilden die Basis jedes Child-Themes. Zunächst geht man über einen SFTP oder FTP-Zugang mit Hilfe von FTP-Programmen wie Cyberduck oder Filezilla in das Verzeichnis der zu bearbeitenden WordPress-Installation (wp-content/themes). Für den Zugang zum Host werden Benutzername, Servername und Passwort benötigt – erhältlich im Kundenkonto des Hostes. Dort wird ein neues Verzeichnis angelegt, idealerweise mit dem Namen des Parent-Themes-Child, bspw. ihr-theme-child-theme. Alle in Kleinbuchstaben und mit Bindestrich getrennt.

functions.php und style.css

In das Child-Theme Verzeichnis müssen zwei Dateien abgelegt werden: functions.php und style.css. Diese Datein können mit Hilfe von Texeditoren wie Texedit oder Notepad erstellt werden. In die style.css des Child-Themes muss folgender Code eingefügt und dem eigenen Theme entsprechend angepasst werden:

/* 
Theme Name: Parent Theme Name Child
Theme URL: http://ihredomain.com
Description: Parent Theme Name Child
Theme Author: Ihr Name
Author URL: http://ihredomain.com
Template: parentthemename
Version: 1.0.0
Text Domain: parentthemename-child
*/

In die functions.php kommt ein action hook, der dem Child-Theme sagt, dass es das Parent-Theme integriert werden soll:

<?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() {    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); } ?>

In der style.css können alle Designanpassungen vorgenommen werden. Die functions.php ist für die Integration oder Entfernung von zusätzlichen Features zuständig.

Screenshot oder Icon integrieren

Um das Child-Theme deutlich zu kennzeichnen, kann ein screenshot.png in das Child-Theme-Verzeichnis eingebettet werden. Dabei handelt es sich um eine PNG Bilddatei mit der exakten Größe 880 x 660px und dem vorgegebenen Namen screenshot.png. Die deutliche Kennzeichnung ist vor allem bei der Arbeit mit Multisites oder einem geplanten Theme-Verkauf sinnvoll.

Aktivierung Child-Theme

Das Child-Theme kann im WordPress Dashboard über DESIGN * THEMES * IHR-CHILD-THEME * AUSWAHL aktiviert werden.

Nutzung Child-Theme

Im Child-Theme-Verzeichnis können eigene Template-Dateien für Seiten und Beiträge gespeichert werden. Wenn Modifikationen am Footer oder Header vorgenommen werden sollen, werden Kopien der original Dateien des Parent-Themes erstellt und anschließend im Child-Theme bearbeitet. Wichtig ist auf die Verzeichnisstruktur zu achten: liegt in der Eltern-Vorlage eine Datei in einem bestimmten Verzeichnis, muss dieses Verzeichnis auch in der Kind-Vorlage vorhanden sein. Gerade bei der Verwendung von Premium oder Third-Party-Themes sollte unbedingt ein Child-Theme für Veränderungen an Templates oder Funktionen genutzt werden. Damit bleibt der Support der Theme-Entwickler garantiert und Theme-Aktualisierungen überschreiben die persönlichen Anpassungen der Vorlage über das Child-Theme nicht.



Kontakt
WordPress Agentur Vlogger
IHR WEG ZU UNS
e-mail info@wordpress-agentur-vlogger.com
phone: +49/40/38073935
office: Wohlers Alee 54
22767 Hamburg