Child-Theme erstellen – So wird es gemacht!

Wie und Wieso Sie ein Child-Theme erstellen sollten – erkläre ich Ihnen anhand von praktischen Beispielen im folgenden Tutorial.

Wieso ein Child-Theme erstellen?

Ein Child-Theme ist wohl der eleganteste Weg, Änderungen an ihrem Theme vorzunehmen, ohne die originalen Dateien zu überschreiben.

Das bringt zum einem den Vorteil, immer den Urzustand wiederherstellen zu können, aber viel wichtiger noch, bei einem Theme-Update die Änderungen nicht zu verlieren.

Diese Dinge können Sie mit einem Child-Theme ändern:

  • CSS Anweisungen einfügen oder ändern
  • Aufbau des Themes verändern
  • Theme Funktionen abändern oder hinzufügen
  • Spezielle Seiten-Templates anlegen

Doch Child-Themes haben auch Nachteile, welche das sind, finden Sie hier.

Die rote oder die blaue Pille?

Wie auch in der Matrix, müssen Sie sich für einen Weg entscheiden, gehen Sie den Weg mit einem WordPress Plugin oder erstellen Sie es selbst?

Ich habe für Sie 3 kostenlose Child-Theme-Plugins getestet, mehr dazu erfahren Sie am Ende dieses Beitrages.

Child Theme erstellen in 2 Schritten – Let´s Go!

Schritt 1: Die Child-Theme Grundstruktur

Als erstes verbinden Sie sich mit einem FTP-Programm mit ihrem Server/Webspace und navigieren zu ihrer WordPress-Installation in den Ordner /wp-content/themes . Hier sehen Sie alle Themes die installiert sind.

Auf dieser Ebene erstellen Sie nun einen neuen Ordner und benennen ihn nach folgender Struktur: themename_child
also z.B. twentyseventeen_child,
wenn Sie ein Child Theme für das neue Twenty Seventeen Theme erstellen wollen.

Erstellen Sie eine neue leere Datei mit der Bezeichnung „style.css“ in den eben angelegten Ordner.

Damit WordPress ihr Child-Theme als Theme erkennt, müssen Sie ein paar Zeilen Code in ihre neuen „style.css“ einfügen.

Hier ein Beispiel für das Twenty Seventeen Theme:

1

2

3

4

5

6

7

8

/*

Theme Name: Twenty Seventeen Child-Theme

Description: Ein Child-Theme für Twentyseventeen

Author: IB-IT

Author URI: https://ib-it.com

Template: twentyseventeen

Version: 1.0

*/

 

In Zeile 2 finden Sie den Namen, unter dem Sie Child-Theme später im Backend unter Design / Themen finden.

Am wichtigsten ist hier allerdings Zeile 6, denn hier müssen Sie den Verzeichnis-Namen ihres Parent-Themes, also des Themes für das Sie ein Child-Theme erstellten, einfügen.

Zur Grundstruktur eines Child-Themes gehört eine weitere Datei, die „functions.php“.

Legen Sie also eine neue, leere Datei mit dem Namen „functions.php“ in Ihrem Child-Theme Ordner an.

Mit der „functions.php“ können wir nun unsere CSS-Datei im Theme einbinden, da Sie aber sicherstellen müssen, dass ihre Child-CSS-Datei nach der originalen CSS-Datei geladen wird, müssen Sie erst die originale Datei deregistrieren und danach in der richtigen Reihenfolge wieder registrieren.

Wie das gemacht wird, zeige ich Ihnen hier:

1

2

3

4

5

6

7

8

9

10

<?php

function twentyseventeen_child_styles() {

wp_deregister_style( ‚twentyseventeen-style‘);

wp_register_style(‚twentyseventeen-style‘, get_template_directory_uri(). ‚/style.css‘);

wp_enqueue_style(‚twentyseventeen-style‘, get_template_directory_uri(). ‚/style.css‘);

wp_enqueue_style( ‚childtheme-style‘, get_stylesheet_directory_uri().’/style.css‘,

array(‚twentyseventeen-style‘) );

}

add_action( ‚wp_enqueue_scripts‘, ‚twentyseventeen_child_styles‘ );

?>

 

Der Code schnell erklärt:
In Zeile 2 erstellen Sie eine function, die Sie in Zeile 8 mit der Funktion add_action() einhängen/aufrufen.

In Zeile 3 deregistrieren Sie die Originale CSS-Datei ihres Themes, der Handler (in diesem Fall „twentyseventeen-style“) ist von Theme zu Theme unterschiedlich und muss aus der Parent-Theme functions.php herausgesucht werden.

Im Falle des Twenty Seventeen Themen finden Sie ihn in Zeile 376.
twentyseventeen_child slug

Danach (Zeile 4-6) registrieren Sie die gleiche Datei wieder und binden beide CSS-Dateien, also die Originale und die ihres Child-Themes, in der richtigen Reihenfolge wieder ein.

Schritt 2: Das Backend

Nachdem Sie nun die Grundstruktur ihres Child-Themes erstellt haben, loggen Sie sich in ihr WordPress-Backend ein und navigieren zu den Themes.

wordpress_backend_themes

Genau! Denn das müssen sie noch in ihren Child-Theme Ordner legen.
Hierbei ist lediglich zu beachten, dass die Datei „screenshot.png“ heißen muss und eine Auflösung von 600px mal 450px haben sollte.

Aktivieren Sie nun dein Child-Theme, wie jedes andere Theme auch, über den Button „Aktivieren“.

Schritt 3: Spezifische Seiten-Template erstellen

Wenn Sie spezifische Seiten wie z.B. Beitragsseiten ändern möchten, können Sie dies sehr einfach tun.

Kopieren Sie hierfür die Datei „single.php“ aus ihrem Parent-Theme in dem Child-Theme-Ordner und nehmen ihre Änderungen vor.

Ein Beispiel für einen kurzen Test.

Setzen Sie eine h3-Überschrift in die neue „single.php“ ein und laden diese in ihren Child-Theme-Ordner:

überschrift im child-theme

Öffnen Sie ihren Blog im Browser und navigieren zu einem ihrer Beiträge.

Je nachdem, wo Sie ihre Überschrift im Code platziert haben, sehen Sie sie nun bei jedem ihrer Beiträge.

frontend

Gibt es auch Nachteile von Child-Themes?

Warum legen wir doch gleich Child-Themes an?

Genau, damit Sie Änderungen am Theme vornehmen können, ohne sie bei einem Update zu verlieren.

Aber das heißt auch, eventuelle Sicherheitslücken im Theme werden bei einem Update zwar im Parent-Theme geschlossen, Sie überschreiben den Fix aber mit deiner alten anfälligen Datei im Child-Theme.

Damit ist die Sicherheitslücke praktisch von Ihnen konserviert und existiert auch nach einem Theme-Update.

Also doch kein Child-Theme?

Doch, allerdings mit einem zusätzlichen Plugin.

Mit dem Plugin „Template Checker“ können Sie ihr Child-Theme mit dem Parent-Theme vergleichen, wenn es Unterschiede gibt, bekommen Sie eine Warnung angezeigt und können so entscheiden, ob es Änderungen sind die Sie gemacht haben, oder ob Änderungen am Parent-Theme nach einem Update gemacht wurden.

Mehr Informationen gibt es in dieser Slideshow von Torsten Landsiedel:

Child-Theme erstellen – mit einem Plugin

Für alle die mit noch weniger Aufwand diese Aufgabe erledigen wollen, gibt es wie für alles andere natürlich auch Plugins.

Aus diesem Grund habe ich die 2 am meisten aktiv genutzten Plugins aus der WordPress.org Plugin Liste ausprobiert und mir den Code der produziert wird genauer angeschaut.

child-theme-plugins

Das Plugin mit den meisten aktiven Installationen ist Child Theme Configurator von Lilaea Media. Bereits ziemlich abgeschlagen liegt das Child Theme Creator by Orbisius von Svetoslav Marinov.

Child Theme Configurator

  • Sehr übersichtliches Backend
  • Optionen gut und einfach beschrieben
  • Spezifische Dateien können eingebunden werden
  • Sauberer Quellcode

Orbisius Theme Editor

  • Spezifische Dateien können eingebunden werden
  • Dateien können im Backend angepasst werden
  • Erstellt unnötig 3 Seiten im Backend – Unübersichtlich am Anfang
  • Erstellt ohne Nachfrage direkt header.php und footer.php im Child-Theme

Fazit

Mit wenigen Handgriffen ist ein Child-Theme erstellt – ganz egal ob mit oder ohne Plugin.

Die Vorteile liegen auf der Hand und ich empfehle jedem ein Child-Theme anzulegen. Auch wenn man bezüglich der oben genannten Möglichkeiten von Sicherheitslücken immer ein Auge darauf behalten sollte.
Ich wünsche dir viel Spaß beim editieren deines Designs!

 

Haben Sie noch Fragen zu diesem Thema?
Dann beantworte ich diese gerne in den Kommentaren!

 

0 Kommentare

Dein Kommentar

An Diskussion beteiligen?
Hinterlasse uns Deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.