Was genau ist ein Childtheme?
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 Childtheme anlegen. Dann machst Du zukünftige Änderungen einfach im Divi Childtheme und sie werden bei einem Update nichtmehr überschrieben. Ein weiterer Vorteil eines Childtheme 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 Divi Childtheme zu nutzen, die nicht schon gefühlt 100.000 Zeilen unformatierten Code enthält.
Du kannst Dir das Divi Childtheme wie eine Art Folie vorstellen, die Du über Dein vorhandenes Eltern-Theme (z.B. Divi-Theme) legst. Es erbt alle Eigenschaften und Inhalte des Original-Themes und überschreibt diese mit Deinen individuellen Änderungen und Anpassungen. Mach Dir bitte keine Sorgen, ein Divi Childtheme zu erstellen ist einfacher, als Du vielleicht denkst!
Kostenfreies Divi Childtheme herunterladen
Du benötigst schnell ein Childtheme 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)
Divi Childtheme selbst erstellen:
1. Ordner anlegen
Lege einen neuen Ordner für Dein Childtheme 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 Childtheme 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 Childtheme
Author
Hier kannst Du Deinen eigenen Namen hineinschreiben, denn Du bist der Autor des Childthemes
Author URI
Hier kannst Du die URL Deiner eigenen Website eintragen
Template
Hier wird der Ordner des Eltern-Themes (Divi-Theme) angegeben, damit WordPress weiß, auf welches Original-Theme sich das Childtheme bezieht. Bei Divi wäre der Ordnername einfach „Divi“
Version
Dies ist die Versionsnummer Deines Childthemes
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 Childtheme 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 Childtheme 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 Childtheme.
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 Childtheme vornehmen ohne Angst haben zu müssen, dass Deine Änderungen verloren gehen oder Du das Original-Theme beschädigst.