Divi: Child-Theme anlegen

von | Divi

Videoanleitung:

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Was genau ist ein Child-Theme?

Du nutzt ein WordPress-Theme wie Divi? Dann ist dies Dein Haupt-Theme. Nach dem Installieren in WordPress kannst Du die darin enthaltene CSS-Datei oder auch die functions.php-Datei nach Belieben ändern und anpassen.

Kommt aber ein Update, werden Deine Änderungen einfach überschrieben. Damit dies nicht passiert, kannst Du ein Child-Theme anlegen. Dann machst Du zukünftige Änderungen einfach im Child-Theme und sie werden bei einem Update nichtmehr überschrieben. Ein weiterer Vorteil eines Child-Theme ist, dass Du bei einem Fehler nicht gleich die ganze Website zerschießt. Denn im Notfall kannst Du einfach wieder zum Original-Theme zurückkehren. Zudem ist es übersichtlicher, eine leere CSS-Datei im Child-Theme zu nutzen, die nicht schon gefühlt 100.000 Zeilen unformatierten Code enthält.

Du kannst Dir das Child-Theme wie eine Art Folie vorstellen, die Du über Dein vorhandenes Theme (z.B. Divi-Theme) legst. Es erbt alle Eigenschaften und Inhalte des Original-Themes (z.B. Divi-Theme) und überschreibt diese mit Deinen individuellen Änderungen und Anpassungen. Mach Dir bitte keine Sorgen, ein Child-Theme zu erstellen ist einfacher, als Du vielleicht denkst!

Kostenfreies Divi-Child-Theme herunterladen

Du benötigst schnell ein Child-Theme für Divi, ohne es extra erstellen zu müssen? Glücklicherweise habe ich bereits eines für Dich vorbereitet. Du kannst es hier kostenfrei herunterladen. Danach einfach als Theme in WordPress unter Design/Themes hochladen und aktivieren (so wie Du ursprünglich das originale Divi-Theme hochgeladen hast)

Child-Theme für Divi selbst erstellen:

1. Ordner anlegen

Lege einen neuen Ordner für Dein Child-Theme auf Deinem Computer an. Der Name ist nicht wichtig, ich persönlich benenne den Ordner mit „divi-child“ oder „divi-child-theme“

2. „style.css“ anlegen

Erstelle eine neue Datei innerhalb des Ordners mit einem Texteditor (z.B. Windows-Texteditor oder Notepad) und nenne sie „style.css“. Füge den folgenden Inhalt in die Datei „style.css“ ein. Speichere die Datei dann ab. Direkt unter der letzten Zeile mit dem Kommentar „Ab hier kannst Du eigene CSS-Anpassungen einfügen“ kannst Du nun Deine eigenen CSS-Codes einfügen.

/*
Theme Name: Divi Child
Theme URI: https://www.elegantthemes.com/gallery/divi/
Description: Divi Child Theme für das Divi Theme
Author: Dennis Petschik
Author URI: https://www.deinedomain.de
Template: Divi
Version: 1.0.0
*/

/* =Ab hier kannst Du eigene CSS-Anpassungen einfügen
——————————————————- */

Theme Name

Hier kannst Du einen eigenen Namen für Dein Child-Theme eintragen. Ich nutze auch hier „Divi Child“ oder „Divi Child-Theme“

Theme URI

Hier kann die URL des Theme-Herstellers eingetragen werden, um eine Adresse für weitere Informationen zu haben. Prinzipiell kann aber auch jede andere URL eingefügt werden, z.B. die der eigenen Website

Description

Beschreibe hier kurz Dein Child-Theme.

Author

Hier kannst Du Deinen eigenen Namen hineinschreiben, denn Du bist der Autor des Child-Themes

Author URI

Hier kannst Du die URL Deiner eigenen Website eintragen

Template

Hier wird der Ordner des Elternthemes (Divi-Theme) angegeben, damit WordPress weißt, auf welches Originaltheme sich das Child-Theme bezieht. Bei Divi wäre der Ordnername einfach „Divi“

Version

Dies ist die Versionsnummer Deines Child-Themes.

3. „functions.php“ anlegen

Als nächstes wollen wir nun die Datei „functions.php“ anlegen. Erstelle dafür ein neues Textdokument mit Deinem Texteditor und nenne es „functions.php“. Füge danach den folgenden Code ein:

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

Dieser Code sagt WordPress später, dass es sich um ein Child-Theme handelt und alle Dateien des Elternthemes beim Aufruf der Seite dennoch geladen werden. Danach die Datei speichern.

4. Vorschaubild erstellen

Als letzten Schritt kannst Du noch ein eigenes Vorschaubild für Dein Child-Theme erstellen. Dieses wird dann in WordPress bei den Themes angezeigt und dient der besseren Unterscheidbarkeit Deiner Themes. Außerdem sieht es einfach nett aus.
Nutze dafür ein Bild mit den Maßen 1200x900px im PNG-Format und benenne es mit „screenshot“

5. Child-Theme Hochladen und aktivieren

Nehme nun Deinen Ordner mit allen enthaltenen Dateien (style.css / functions.php / screenshot.png) und lade ihn per FTP-Zugang (z.B. mit Filezilla) in das Verzeichnis „/wp-content/themes“. Alternativ kannst Du den Ordner auch erst komprimieren (z.B. mit 7ZIP) und dann direkt in WordPress unter Design/Themes hochladen. Aktiviere dann Dein Child-Theme.

Fertig!

Es ist nun aktiv und kann von Dir genutzt werden. Änderungen in der „style.css“ oder „functions.php“ kannst Du ab sofort über Dein Child-Theme vornehmen ohne Angst haben zu müssen, dass Deine Änderungen verloren gehen oder Du das Original-Theme beschädigst.

Ein gut aussehender junger Mann auf einem schwarz-weißen Foto

Dennis Petschik

Autor
Nach fast 10 Jahren in der Branche möchte ich mein Wissen zum Thema Marketing & Webdesign auf diesem Blog teilen. Ich wünsche Dir viel Spaß beim Lesen meiner Beiträge und noch mehr Spaß bei der Umsetzung!

Bild des blauen Buchcovers in 3D

Kostenfreies E-Book!

Wie sollte eine Website inhaltlich aufgebaut sein, damit sie möglichst viele Kunden generiert? Diese Frage wird in meinem E-Book genau beantwortet. Lade es Dir jetzt kostenfrei herunter, baue Deine zukünftigen Websites mit System und generiere mehr Kundenanfragen!