Der erste Schritt nach der Installation eines neuen WordPress Themes sollte immer das Anlegen eines dazu passenden Child Theme (dt. Kind Theme) sein. In diesem Fall geht es also um ein Divi Child Theme.
Was ist ein WordPress Child Theme?
Selbst bei so umfangreich anpassbaren Themes wie das Divi Theme gibt es doch viele Änderungen, die sich nur durch den direkten Eingriff in die Dateien eines Themes erreichen lassen. Typischerweise handelt es sich um die Dateien style.css und functions.php. Man kann die Anpassungen natürlich auch direkt in den Dateien des Divi Themes durchführen, hat dann aber das Problem, dass mit dem nächsten Update des Themes alle Dateien überschrieben werden und man dann alle Anpassungen verliert und wieder neu eintragen muss. Das Problem lässt sich durch die Nutzung eines Divi Child Themes vermeiden. Ein Child (Kind) Theme verweist im Grunde auf das Eltern Theme und beinhaltet nur angepassten und ergänzende Dateien zum Eltern Theme. Damit bleiben auch bei einem Update des Eltern Themes alle Änderungen im Child Theme erhalten.
Wie erstellt man ein Child Theme?
Hier gibt es mehrere Wege zum Ziel:
- Download: Der einfachste Weg ist die Nutzung unseres vorbereiteten Divi-Child-Theme Ordners.
- Plugin: Der ebenfalls relativ einfache Weg ist die Nutzung eines Plugins.
- DIY: Etwas schwieriger aber sehr lehrreich ist das eigene Erstellen der nötigen Ordner und Dateien.
Gleichgültig für welchen Weg Du Dich entscheidest: Wie immer wenn Du etwas Grundsätzliches veränderst, gehört ein WordPress Backup zur guten Vorbereitung. Falls Du Dich für den DIY-Weg entscheidest, sollte auch das Grundlagenwissen wie du WordPress Dateien sicher bearbeiten kannst vorhanden sein.
Vorbereiteter Divi Child Theme Download
Die einfachste Lösung ist der von uns vorbereiteten Divi Child Theme Download.
Dazu gehst du folgendermaßen vor:
Schritt 1: Download der ZIP-Datei
Du meldest dich nur schnell zu unserem Divi Newsletter an und schon kannst du unser vorbereitetes Divi Child Theme herunterladen:
Newsletteranmeldung mit Child-Theme Bonus
Schritt 2: Installation des Divi Child Themes
Nach dem Download gehst du in deinem WordPress Backend auf „Design“ > „Themes“ und oben neben der Überschrift „Themes“ klickst du auf den den Button „Installieren“.
Dann gelangst du auf die „Themes installieren“ Seite und findest oben dann den Button „Theme hochladen“ auf den du klickst.
Du wählst den Button „Datei hochladen“ und dann die zuvor heruntergeladene ZIP-Datei aus und lädst diese hoch.
Schritt 3: Aktivieren des Child Themes
Jetzt gehst du im WordPress Backend auf „Design“ > „Themes“ und wählst das Divi Child Theme aus und klickst dort auf „Aktivieren“.
Jetzt sollte erstmal alles auf deiner Homepage wie vorher aussehen, nur dass du nun Anpassungen durchführen kannst, die bei einem Update nicht verloren gehen. Wir empfehlen, dass du dir anschließend auch die kurze Anleitung zum eigenhändigen Erstellen von Child Themes ansiehst, damit du weißt wozu das gemacht wird und wo welche Datei für spätere Anpassungen liegt.
Divi Child Theme mit einem Plugin erstellen
Es gibt mehrere Plugins, die einem dabei helfen ein Child Theme zu erstellen. Unser derzeitiger Favorit ist das Child Theme Configurator Plugin, da dieses Plugin zusätzliche praktische Funktionen zur Bearbeitung eines Child Themes bietet. Alternative lässt sich auch der Child Theme Creator von Orbisius nutzen.
WordPress Child Theme selbst erstellen
Du kannst dir auch eigenständig ein Divi Child Theme erstellen. Damit lernst du das Verfahren grundsätzlich kennen und kannst das auch für andere Themes anwenden. Außerdem musst du für einige Anpassungen des Divi Themes sowieso per FTP auf deine Dateien im Child Theme Ordner zugreifen und dann hast du schon ein wenig Erfahrungen gesammelt. Es ist im Grunde relativ leicht ein Child Theme zu erstellen. Du musst nur einen Ordner und zwei Dateien erstellen und schon ist dein Child Theme fertig.
Schritt 1: Ordner erstellen
Du musst per FTP auf deinen Webspace zugreifen und in den WordPress Themes Ordner navigieren, den du unter …
1 | ../wp-content/themes |
findest.
Dort liegen alle bisher vorhandenen Themes in Ordnern, so dass auch ein „divi“ Ordner für dein Divi Theme vorhanden sein sollte.
Dort erstellst du einen neuen Ordner für dein Child Theme, den du zwar nennen kannst wie du magst, aber wir empfehlen dir den Ordner nach dem eigentlichen Theme mit dem Zusatz „-child“ zu benennen. Daher erstellst du nun den Ordner …
„divi-child“
Schritt 2: style.css anlegen
In dem Ordner „divi-child“ sind zwei Dateien anzulegen. Zunächst die Datei style.css in die Du folgenden Code einfügst:
1 2 3 4 5 6 7 8 9 10 11 12 | /* Theme Name: Divi Child-Theme Theme URI: http://www.elegantthemes.com Description: Divi Child-Theme Author: Divi.world Author URI: https://divi.world Template: Divi Version: 1.0.0 */ /* =Ab hier kannst du deine CSS-Anpassungen eintragen ------------------------------------------------------- */ |
In dieser style.css kannst du später spezielle CSS Anpassungen für dein Divi Theme hinzufügen, wie Schriftgrößen, Farben, Abstände etc.
Schritt 3: functions.php anlegen
Dann benötigen wir noch die functions.php Datei, die folgenden Code enthalten soll:
1 2 3 4 5 | <?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } |
Diese functions.php sorgt einerseits dafür, dass alle nötigen CSS-Dateien des Divi Themes geladen werden und am Ende kannst du später weiteren PHP-Code einfügen, um bestimmte Funktionen des Divi Themes zu beeinflussen.
Bemerkungen
Falls du noch andere Anleitungen zum Erstellen von Child Themes gefunden hast, wundere dich bitte nicht, dass dort die style.css und die functions.php etwas anders aussehen. Bis vor einiger Zeit stand fast kein Code in der functions.php und dafür gab es in der style.css immer die Zeile …
1 | @import url("../Divi/style.css"); |
Mittlerweile empfiehlt WordPress statt des CSS-Imports die WordPress style queue Funktion in der functions.php zu nutzen. Das ist der Code, den du in unserer Anleitung oben sehen kannst.
Als letzten Schritt aktivierst du dein neues Child Theme.
Weitere Informationen:
Weitere Informationen zu Child Themes findest du im
- WordPress Codex (engl.).
- im Elegant Themes Blog „Ultimate Guide to Creating a Child Theme for Divi“ (engl.)
Eine wirklich gute und leicht nachvollziehbare Erklärung.
Bei mir kam es zu Problemen, als das Divi-Theme und der Divi-Builder ein Update bekamen und dadurch meine komplette Webseite mehr oder weniger zerstört wurde.
Nun werde ich mir ein Child-Theme erstellen, um genau das Problem beim nächsten Update zu umgehen.
Danke auch für die Hinweise auf die beiden Plugins.
Hi Jungs
Danke für Eure Seite und diesen Beitrag.
Die Installation unter Punkt 1 hat wunderbar geklappt.
Eine Frage noch:
Wohin kommt die Custom CSS nun?
Unter Divi // CSS oder in den Editor?
Viele Grüsse
Mel
Hi Mel,
du kannst eigenen CSS Code auf beiden Wegen eintragen.
Ich würde allerdings das Eintragen in der Datei style.css im Child Theme Ordner bevorzugen. Das geht mittels FTP-Programm oder wie du es beschreibst im WordPress Backend unter „Design“ > „Editor“ .
Die andere Möglichkeit Custom CSS im Backend unter „Divi“ > „Allgemein“ ganz unten im Feld „Benutzerdefinierte CSS“ einzutragen, funktioniert ebenfalls und sogar unabhängig von einem Child Theme.
Allerdings ist das Feld sehr versteckt und umständlich zu erreichen. Sobald etwas mehr eigener CSS Code eingetragen wurde, wird es in diesem Bereich sehr schnell unübersichtlich.
Der dort eingetragene Code wird in der Datenbank abgelegt und nicht in der Datei style.css. Gelegentlich kann es beim Update eines Themes vorkommen, dass Einstellungen gelöscht werden.
Hey Nils,
Danke für Deine ausführliche Antwort!
LG, Mel
Ganz herzlichen Dank für die Datei, ich habe mich bislang nicht daran getraut …
Wenn ich das Child Theme jetzt installiere, wird meine Webseite wirklich so übernommen, wie sie ist? Sorry, das kommt euch vielleicht jetzt blöd vor, aber ich bin nicht sehr technik-affin und ein bisschen schissig …
Danke! Und schöne Festtage für Euch!
Herzliche Grüße, Monika
Hallo Monika,
Ich habe mir Deine Website kurz angesehen. Du verwendest das Divi-Theme und so wie es aussieht verwendest du es bisher ohne Child-Theme. Wenn du jetzt ein Childtheme generierst oder das vorbereitete von uns installierst erkennt WordPress das als neues Theme. Es wird dann zwar weiterhin das Divi-Theme als Basis verwendet und alles funktioniert grundsätzlich so wie Du es gewohnt bist, alle Einstellungen die du aber bisher im Adminbereich von WordPress für Divi vorgenommen hast werden vermutlich nicht übernommen. Bei den angelegten Seiten und Beiträgen sollte es normalerweise keine Probleme geben.
Du musst jedoch keine große Angst haben, selbst wenn du das Child Theme aktiviert hast und etwas nicht klappt kannst du jederzeit wieder zurück wechseln zum bisherigen Theme. Du kannst in den Theme-Optionen von Divi auch die bisherigen Einstellungen sichern, indem du dort rechts oben auf dem Doppelpfeil klickst. Er ist mit Import/Export beschriftet und ermöglicht dir die Einstellungen herunterzuladen und nach dem Wechsel auf das Child-Theme wieder hochzuladen.
Auch wenn es evtl. jetzt etwas kompliziert für Dich ist, ist der Wechsel auf ein Child-Theme dringend zu empfehlen weil sonst evtl. Änderungen bei einem Update überschrieben werden.
Viel Erfolg!
Vielen Dank, lieber Frank, für die ausführliche Antwort. Das werde ich auf jeden Fall über die Feiertage ausprobieren! Mir war schon bewusst, dass ein Child-Theme angesagt ist …
Ich wünsche Euch eine gute Zeit! Und danke für Eure Seite 🙂
Hallo,
bin noch Anfänger und freue mich, und komme langsam voran. Werde jetzt öfters hier her kommen.. 🙂
thank you, just one small fix. the functions.php should start with <?php
Vielen Dank, klappt prima.
Bei „WordPress Child Theme selbst erstellen“,
„Schritt 3: functions.php anlegen“
fehlt wohl noch ein „?“.
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
Beste Grüße
Chris
Danke Martin und Chris!
Ihr habt Recht und ich habe es gerade korrigiert.
Wir haben leider etwas Probleme mit der Darstellung des Codes. Regelmäßig wird der „<" zu Beginn verschluckt und bei der letzten Korrektur habe ich wohl versehentlich das folgende "?" gelöscht.Ich hoffe es bleibt jetzt wie es sein soll!
Hallo lieber Nils,
gilt der Code der funtion.php auch für das Extra Theme von Elegant Themes? Oder muss der Code dann etwas anders aussehen?
DANKE!!
Hallo Jad,
der Code für die functions.php dürfte so sogar für jedes WordPress-Theme funktionieren, das Childtheme-tauglich ist, also auch fürs Extra-Theme.
Hallo Jad,
habe mir eben ein Divi Child-Theme von Elegant Marketplace gekauft, alles nach Anweisung installiert. Jedoch bekomme ich (unter anderem auch bei den Child-Themes von Eleganth-Themes) im Quelltext einen Spaghetti-Code. Gibt es eine Möglichkeit, diesen zu bereinigen. Danke für Deine Hilfe.
Hallo Joseph, mit der Fehlermeldung „Spaghetti-Code“ ist es etwas schwer dir zu helfen, denn ich habe keine Ahnung was das ist 😉
Hi an die Community,
erstmal, danke für die ausführliche Anleitung. Ich habe aber ein ganz großes Problem und zwar ist meine Seite weg 🙁
Diese Seite funktioniert nicht
…… kann diese Anfrage momentan nicht verarbeiten.
HTTP ERROR 500
Wie kann ich es jetzt rückgängig machen?
Hallo Jimmy,
der Fehler (Error 500) ist sehr allgemein. Ohne eine Info was Du gemacht hast, kann dir nur schwer jemand helfen. Wenn Du Änderungen an Dateien durchgeführt hast und hoffentlich vorher eine Kopie angelegt hast, kannst Du recht einfach per FTP die alten Dateien wieder hochladen, dann sollte das Problem behoben sein.
Ansonsten müsstest Du genauer beschreiben was passiert ist.
Grüße,
Frank
Hey! Habs auch nach deiner Anleitung angelegt, funktioniert super. Danke dafür!
Warum wird aber das am Ende einfüge, wie es in diversen anderen Tutorial empfohlen wird, bekomme ich eine Fehlermeldung.
Woran liegt das? Muss das nicht eigentlich geschlossen werden?
Danke und liebe Grüße
Lena
Hi Lena, aus Sicherheitsgründen lässt sich kein PHP-Code und auch viele HTML-Tags lassen sich nicht direkt in die Kommentaren schreiben. Du kannst Code mit pre und /pre umrahmen (allerdings müssen eckige Klammern vor < und nach dem Tag > stehen), dann wird das so angezeigt:
Ansonsten löscht WordPress sicherheitshalber den Code und so kann ich Deine Frage leider nicht beantworten.
Finde den Artikel sehr gut und muss dafür nicht extra einen Dienstleister beauftragen. Ich mach das immer über das Child Theme Creator Plugin und lösche das Plugin anschließend wieder.
Wenn ich versuche, in die style.css des DIVI child themes code zu schreiben wird dieser ignoriert. Der CSS Code wird wieder nur über die DIVI Optionen akzeptiert. Woran könnte das liegen, bzw. muss das so sein?
Grundsätzlich sollte das nicht so sein. Das kann allerdings verschiedene Ursachen haben:
Caching: Gerade beim Bearbeiten von CSS, kann einem sehr gut eine Caching Funktion dazwischenfunken (Browsercache, Caching Plugin, serverseitiges Caching). Dann wird trotz der Änderung der alte CSS-Code aus einem Cache ausgeliefert und es sind keine Veränderungen zu bemerken. Da Du schreibst, dass bei Einträgen direkt in den Divi Optionen sich die Ansicht verändert, scheint das hier allerdings nicht der Fall zu sein. Wobei ich mir nicht ganz sicher bin wie sich die vor kurzem integrierten Minifizierungsfunktionen für CSS des Divi Themes auswirken.
important: Einige CSS-Anweisungen gerade in einem Child Theme müssen noch den Zusatz „!important“ erhalten, damit andere Anweisung von der Wichtigkeit her sozusagen überboten werden. Beispiel:
ul li {
color : blue !important;
}
Probier das doch einfach mal aus.
Hi Nils, danke für die Infos. Leider funktioniert es nicht. Ich kann den Code nur im Custom CSS eingeben. Lösche ich alles und stelle es direkt in die style.css passiert nichts. Auch nicht nach dem Löschen des Caches. Das mit !important ist hier auch nicht das Problem. Also keine Ahnung, woran es liegen könnte.
Schreibt ihr dann auch den CSS-Code, den man direkt bei den einzelnen Modulen hinterlegen direkt in die style.css?
Oder was passiert mit dem CSS-Code, den ich im Child theme bei den Modulen oder im Custom CSS eingebe? Ist das dann überhaupt sinnvoll?
Habt ihr dazu schon was geschrieben?