Inhalt
1. Was ist überhaupt ein Child-Theme – und warum sollte dich das interessieren?
2. Child-Theme Ordner anlegen
3. Child-Theme Datei „style.css“ anlegen
4. Child-Theme Datei „functions.php“ anlegen
5. Child-Theme Datei „custom.js“ anlegen
6. Eigener Brand gefällig?
7. ZIP-it Baby!
8. Child-Theme hochladen und aktivieren
9. Bonus: Ordner und Dateien runterladen
1. Was ist überhaupt ein Child-Theme – und warum sollte dich das interessieren?
Bevor wir loslegen: Ein Child-Theme ist quasi der Babysitter für deine Theme-Anpassungen. Es übernimmt das Styling und die Funktionen vom „Eltern-Theme“ (in unserem Fall DIVI) – und schützt gleichzeitig deine eigenen Änderungen vor dem nächsten Update.
Das Child-Theme (bei DIVI) besteht i.d.R. aus drei Dateien:
- style.css
- functions.php
- custom.js
In die style.css werden CSS-Anweisungen geschrieben. Warum deren Auslagerung in eine eigene Datei wichtig ist und den Inline-CSS-Anweisungen in den DIVI-Modulen vorzuziehen ist, erläutere ich in meinem Beitrag über die HTTP-Security-Headers.
In die functions.php werden sogenannte Hooks (actions und filter) geschrieben. Die Datei ist aber ausserdem wichtig für sicherheitsrelevante Anweisungen, z.B. das verhindern der Bekanntgabe der genutzten WordPress-Version. Mehr dazu gibt’s in meinem Beitrag „WordPress absichern ohne Plugins“.
Und die custom.js schliesslich nimmt deinen Javascript-Code auf.
2. Child-Theme Ordner anlegen
Voraussetzung: Du hast Divi auf deinem Webspace bereits installiert und aktiviert.
Lege irgendwo auf deinem PC/Mac einen Ordner an mit dem Namen divi-child. Ja, der muss genau so heissen!
3. Child-Theme Datei „style.css“ anlegen
In diesem Ordner erstellst Du nun mit einem einfachen Textprogramm (z.B. Textedit für Mac, Notepad für Windows) die style.css-Datei und fügst die folgenden Zeilen hinzu:
style.css
/*
Theme Name: Divi Child
Theme URI: https://deine.domain
Description: Child Theme
Author: Dein Name
Author URI: https://deine.domain
Template: Divi
Version: 1.0.0
*/
/* =Theme customization starts here
------------------------------------------------------- */Theme-Name (Divi Child) und Template (Divi) darfst du NICHT verändern, den Rest kannst du anpassen, wie du lustig bist.
⚠️ Achtung: stelle sicher, das die Datei-Endung .css lautet. Möglicherweise musst du sie nach der Erstellung umbenennen. Sonst kann es passieren, dass deine Datei „style.css.rtf“ oder „style.css.txt“ heisst.
4. Child-Theme Datei „functions.php“ anlegen
Erstelle nun – gleich wie unter Schritt 3 – die functions.php-Datei und füge die folgenden Zeilen hinzu:
style.css
<?php
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/custom.js', array( 'jquery' ),'',true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );Diese paar Zeilen Code sorgen dafür, dass die Dateien „style.css“ und „custom.js“ korrekt in das Eltern-Theme (Divi) eingebunden werden.
⚠️ Achtung: stelle sicher, das die Datei-Endung .php lautet. Möglicherweise musst du sie nach der Erstellung umbenennen. Sonst kann es passieren, dass deine Datei „functions.php.rtf“ oder „functions.php.txt“ heisst.
5. Child-Theme Datei „custom.js“ anlegen
Erstelle nun – wie unter Schritt 3 – die custom.js-Datei. Diese kannst Du leer lassen.
⚠️ Achtung: stelle sicher, das die Datei-Endung .js lautet. Möglicherweise musst du sie nach der Erstellung umbenennen. Sonst kann es passieren, dass deine Datei „custom.js.rtf“ oder „custom.js.txt“ heisst.
6. Eigener Brand gefällig?
Wenn du möchtest, kannst du noch dein eigenes Bild hinzufügen, das dann im WordPress Backend als dein „Child-Theme-Brand“ erscheint, z.B. so:
WordPress empfiehlt eine Bildgrösse von 1200px (Breite) und 900px (Höhe). Es muss zwingend
screenshot.png
heissen. Das schreibt WordPress vor, sonst wird das Bild nicht erkannt.
7. ZIP-it Baby!
Nun hast Du einen Ordner „divi-child“ mit vier Dateien drin. Drei Dateien, wenn Du keine screenshot.png hinzugefügt hast:
- style.css
- functions.php
- custom.js
- screenshot.png
Jetzt kannst Du mit einem einfachen Rechtsklick → „…komprimieren“ (Mac) oder „Senden an > ZIP-komprimierter Ordner“ (Windows) den Ordner inkl. Inhalt zippen.
8. Child-Theme hochladen und aktivieren
Jetzt geht’s ins WordPress-Backend:
- Design > Themes
- Oben auf Theme hinzufügen klicken
- Theme hochladen
- ZIP-Datei auswählen → Installieren
- Und zum Schluss: Aktivieren
Voilà – dein Child-Theme ist jetzt live!
Was du jetzt mit deinem Child-Theme alles machen kannst
- Eigene CSS-Regeln schreiben
- Funktionen hinzufügen (functions.php ist dein Spielplatz!)
- Templates überschreiben
- Und vor allem: Alles bleibt erhalten, wenn DIVI ein Update bekommt 💪
9. Bonus: Ordner und Dateien runterladen
Hier kannst Du den gezippten Ordner mit den drei Dateien
- style.css
- functions.php
- custom.js
herunterladen, anpassen, zippen, hochladen und aktivieren. Oder füge vorher noch dein eigenes „screenshot.png“ hinzu.
Hol Dir Divi noch heute: Risikofreie 30-Tage-Geld-zurück-Garantie! (Affiliate Link)
0 Kommentare