Divi Child Theme erstellen in 4 einfachen Schritten

Wenn du das Divi-Theme auf deiner WordPress-Website installiert hast, kannst du den Divi Builder und die vorgefertigten Layout-Pakete nutzen, um deine Website schnell und einfach zu erstellen und anzupassen.

Wenn du jedoch viele benutzerdefinierte CSS- und PHP-Funktionen hinzufügen möchtest, um deiner Website ein wirklich einzigartiges Aussehen zu geben, solltest du ein Divi Child-Theme erstellen.

Sehen wir uns die Vorteile an, die die Erstellung eines Divi Child-Themes mit sich bringt, und gehen wir dann durch, wie man es macht.

Warum ein Divi Child Theme erstellen?

Ein Child-Theme zu erstellen und damit deine Änderungen in einem anderen Ordner als deinem Theme aufzubewahren, bietet viele Vorteile.

• Du kannst das Parent-Theme aktualisieren kannst, ohne dass deine Anpassungen verloren gehen. Das ist wichtig, wenn du ein Theme wie Divi verwendest, das häufig aktualisiert wird.
• Du kannst das Child Theme ganz einfach auf eine neue Website kopieren und so die Styles übertragen.
• Drittens kannst du z.B. über Filezilla die Dateien ganz einfach mit deinem Lieblingseditor bearbeiten.

Jetzt, wo du die Vorteile der Erstellung eines Divi Child-Themes kennst, wollen wir dir zeigen, wie es geht.

So erstellst du ein Divi Child Theme

Schritt 1: Erstelle einen Ordner für dein Divi Child-Theme

Zu Beginn musst du einen Ordner erstellen, in dem du alle Vorlagendateien und Assets deines Divi Child-Themes ablegen kannst. Um diesen Ordner zu erstellen, kannst du den Dateimanager verwenden. Du kannst aber auch mit einem FTP Zugang den Ordner erstellen.

Klicke auf Dateimanager bei deinem WordPress-Hosting-Anbieters, um mit der Erstellung des Divi Child-Themes zu beginnen

Öffne den Dateimanager

Klicke auf den Ordner wp-content.

Finde den Ordner mit der Bezeichnung themes. Erstelle hier einen neuen Ordner mit dem Namen divi-child.

Dieser Ordner wird das Verzeichnis für dein Divi Child-Theme sein.

Schritt 2: Erstelle das CSS Stylesheet für dein Divi Child-Theme

Als Nächstes musst du ein Stylesheet erstellen, das alle CSS für dein Divi Child-Theme enthält. Dazu musst du einen Texteditor verwenden. Für diese Demo verwende ich VS Code. Das ist mein Lieblingseditor.

Erstelle eine neue Textdatei und nenne sie style.css.

Als Nächstes fügst du einen Header-Kommentar hinzu. Dieser Header-Kommentar ist erforderlich, damit das Stylesheet tatsächlich funktioniert. Er enthält grundlegende Informationen über das Child-Theme, darunter auch, dass es ein Child-Theme des Divi-Themes ist.

Du musst in diesem Header-Kommentar eigentlich nur zwei Dinge angeben: den Namen des Themes und die Vorlage (d.h. den Namen des Elternthemes in unserem Fall Divi). Wenn du dein Child-Theme veröffentlichen oder verkaufen willst, kannst du weitere Informationen wie eine Beschreibung, den Namen des Autors und die Version angeben.

Hier ist ein Beispiel für einen vollständigen Header-Kommentar für ein Divi Child-Theme:

/*
 Theme Name:     Mein erstes Divi Child Theme
 Theme URI:      https://danielvoelk.de
 Description:    Bestes Divi Child Theme
 Author:         Daniel Voelk
 Author URI:     https://danielvoelk.de
 Template:       Divi
 Version:        1.0.0
*/

/* Füge hier dein CSS ein. */

Die Zeichen /* und */ kommentieren in CSS.

Später werden wir uns ansehen, wie du benutzerdefiniertes CSS hinzufügst. Jetzt klickst du auf Speichern, damit das Stylesheet im Verzeichnis deines Child-Themes gespeichert wird.

Schritt 3: Erstelle die PHP Datei

Jetzt ist es an der Zeit, die wichtigste Datei zu erstellen.

Erstelle dazu eine neue Datei mit dem Namen functions.php.

Füge den folgenden Code ein:

<?php

/**
* Add Child Theme Styles
**/
function dv_code() {
  // parent style
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'dv_code' );

Mit diesem Code überschreibst du die Styles vom Divi Theme mit deinem Divi Child Theme Styles.

Schritt 4: Installiere und aktiviere dein Divi Child-Theme.

Logge dich jetzt in dein WordPress Dashboard ein.

Klicke auf Design -> Themes. Jetzt solltest du hier ein neues Theme mit dem Namen, den du in style.css angegeben hast sehen.

Klicke beim Theme auf aktivieren.

Dein Child-Theme ist jetzt live – aber es sieht genauso aus wie dein Parent-Theme. Jetzt fehlt das CSS. Damit es anders aussieht, musst du jetzt nur noch dein CSS in der CSS Datei hinzufügen.

Natürlich kannst du über das Divi Child Theme auch deine JavaScript Dateien hinzufügen.