In diesem Leitfaden dreht sich alles um das ultimative Divi Child-Theme. Wenn du dir nicht sicher bist, was ein Child Theme ist, dann mach dir keine Sorgen, ich werde umfassend darauf eingehen was es über Child Themes zu wissen gibt.
Du wirst dabei nicht nur etwas über (Divi) Child Themes an sich lernen, sondern auch wann du das Child-Theme tatsächlich verwenden musst und wann du darauf verzichten kannst.
Außerdem zeige ich dir wie du ein Child Theme mit wenig Aufwand selbst erstellen kannst. Und wenn du dich nicht selbst mit der Erstellung eines solchen befassen möchtest, kannst du dir weiter unten kostenlos eines bei mir herunterladen.
Bevor es richtig losgeht, müssen wir aber erst einmal einen Punkt klären, der oft für Verwirrungen sorgt. Unter dem einem Begriff (Divi) Child Theme existieren in Wirklichkeit zwei verschiedene zwei Arten von Child Themes:
- ein „leeres Divi Child Theme“ und
- ein “Divi Child Theme Template“
Das mutet jetzt erst mal etwas seltsam an, aber obwohl derselbe Name „Divi Child Theme“ oft verwendet wird, um sich auf beide zu beziehen, werden sie aus ganz unterschiedlichen Gründen verwendet.
Die gute Nachricht ist, dass ich dir weiter unten in diesem Beitrag genau zeigen werde, was es mit den beiden Arten von Child Themes auf sich hat und wann du welches verwenden solltest.
Was ist ein Child-Theme überhaupt?
Untergeordnete (Child) Themes sind, um es deutlich zu sagen, keineswegs einzigartig für Divi, sondern ein Konzept in WordPress. Du kannst ein Child-Theme für jedes WordPress-Theme erstellen, egal ob für ein freies oder ein kostenpflichtige Theme.
Laut dem WordPress-Codex ist „ein Child-Theme ein Theme, dass die Funktionalität und das Styling eines anderen Themes, dem sogenannten Parent-Theme, erbt.“
Warum braucht man dann überhaupt ein Child Theme, wenn es doch sowieso alles vom Parent Theme erbt?
Wenn dir das vorgegebene Layout und die Funktionen, die in dem von dir gewählten Theme enthalten sind, ausreicht und du keine persönlichen Änderungen vornehmen möchtest, dann benötigst du in der Tat kein Child Theme.
Falls du dagegen dein Theme um neue Funktionen oder ein neues Layout erweitern möchtest, um deinen persönlichen Stil zum Ausdruck zu bringen, dies aber vom Entwickler nicht vorgesehen ist., dann musst du Änderungen im Code vornehmen.
Du solltest die Theme-Dateien jedoch nicht direkt bearbeiten, es sei denn, du planst, das Theme nie wieder zu aktualisieren. Theme-Autoren pushen in der Regel Updates für Themes (neue Funktionen, Fehlerbehebungen usw.), die alle von dir vorgenommenen Änderungen oder Anpassungen überschreiben.
Das heißt alle deine Änderungen werden durch die neue Version überschrieben und du musst alles was du geändert hast noch einmal von vorne machen.
Das Bearbeiten von Theme-Dateien ohne Child-Theme ist daher ein Rezept für eine Katastrophe. Denn wenn du das Theme aktualisierst, sind alle Deine Anpassungen weg.
WordPress wollte dieses Problem lösen und hat sich das Konzept des „Child-Themes“ ausgedacht. Es ermöglicht dir das Beste aus beiden Welten zu haben: Du kannst Änderungen/Anpassungen am Theme vornehmen, und du kannst weiterhin Software-Updates für das Theme erhalten, wenn der Entwickler sie veröffentlicht.
Mit anderen Worten, ein Child-Theme ist eine Möglichkeit, deinem Theme erweiterte Anpassungen hinzuzufügen, ohne dir Gedanken darüber machen zu müssen, dass diese Änderungen jedes Mal gelöscht werden, wenn du dein Theme aktualisiert.
Wie funktioniert ein Child-Theme?
Das untergeordnete Theme (Child) erbt die Funktionalität und das Styling des übergeordneten Themes (Parent), sodass du Dateien ändern kannst, die keine Anpassungen verlieren, wenn das übergeordnete Theme aktualisiert wird. Nimm nach Herzenslust Codierungsanpassungen vor UND du kannst dein Theme trotzdem mit neuen Funktionen, Korrekturen usw. aktualisieren.
Wenn sich dann im Child-Theme eine Datei mit dem gleichen Namen wie eine Datei im Parent-Theme befindet, weiß WordPress, dass die Version des Child-Themes anstelle der Version des Parent-Themes betrachtet werden soll. Die Version im Child-Theme ist die Version, die WordPress liest.
Auch wenn das übergeordnete Design aktualisiert wird und alle Dateien im übergeordneten Design erneuert werden, verbleiben deine Anpassungen sicher im untergeordneten Design.
Wenn du also z. B. benutzerdefinierten Code zu Deiner Fußzeile hinzufügen möchtest, kopierst Du die footer.php aus dem übergeordneten Design in das untergeordnete Design und nimmst deine Änderungen nicht an der Originaldatei, sondern an der Datei in deinem Child Theme vor.
Benötige ich ein Child-Theme?
Child-Themes werden nicht immer benötigt. Wenn dir, wie schon weiter oben geschrieben, der vorgegebene Styles und die Funktionen, die in dem von dir gewählten Theme enthalten sind, ausreicht und du keine persönlichen Änderungen am Code vornehmen möchtest, dann benötigst du in der Tat kein Child Theme.
Wenn du aber derartige Anpassung planst, ist ein untergeordnetes Theme unerlässlich.
Achtung:
Wir sprechen hier immer noch über untergeordnete Themes zu Anpassungszwecken, nicht über vorgefertigte (Premium-) Child Themes. Die werden wir uns später noch ansehen.
Verschiedene Arten von Child Themes
(Leeres) Divi Child Theme
Ein leeres Child-Theme (oft als Standard-Child-Theme oder „Bare-Bones“-Child-Theme bezeichnet) besteht aus mindestens zwei Dateien, (style.css & functions.php), die nach dem Parent-Theme zu einer WordPress-Installation hinzugefügt werden. Dazu kommt in der Regel ein Bild (screenshot.jpg)
Diese Dateien stellen die Funktionalität des übergeordneten Themes in die Warteschlange und überschreiben bestimmte Dateien, um die vom Webentwickler vorgenommenen Änderungen und Funktionen der Website beizubehalten.
Du kannst dein eigenes Child-Theme von Grund auf neu erstellen, einen Child-Theme-Generator verwenden, mein kostenloses leeres Child-Theme herunterladen oder auch ein Plugin verwenden. Dazu kommen wir aber als nächstes.
Gestaltetes Divi Child Theme (Premium Theme)
Ein bereits gestaltetes Child-Theme nennt man auch Premium-Child-Theme. Es ähnelt einem leeren Child-Theme, da es „über“ Divi sitzt, es weist jedoch auch einige deutliche Unterschiede auf. Premium Divi Child Themes sind vollständig gestaltete Website-Vorlagen, die erstellt und verkauft werden, um als Ausgangspunkt für ein neues Website-Projekt verwendet zu werden. Es gibt viele Entwickler, die Premium-Child-Themes erstellen und du kannst sie unter anderem bei Elegant Themes im Marketplace kaufen. Aus technischer Sicht haben Premium-Child-Themes die gleichen functions.php und den gleichen style.css, meistens aber mit deutlich mehr Code, und dann haben sie in der Regel auch noch zusätzliche angepasste Dateien. Die Installation eines Premium-Divi-Child-Themes ist im Wesentlichen wie das Erstellen einer fertigen Website, die mit Divi erstellt wurde und die du als Ausgangspunkt für jedes Projekt verwenden kannst. Die Verwendung von Premium-Child-Themes beschleunigt die Entwicklungszeit drastisch, da du nicht bei null anfangen musst.So erstellst du ein Child Theme
Im Wesentlichen gibt es vier verschiedene Möglichkeiten ein Child Theme zu erstellen:
-
- ein Plugin verwenden
- mit einem Child-Theme-Generator
- ein leeres Child -Theme herunterladen
- ein eigenes Child Theme erstellen
Ich gehe auf jede der Möglichkeiten weiter unten noch genauer ein
ein Plugin verwenden
Die erste Methode zum Erstellen eines Child-Themes die du nutzen kanns ist die Verwendung eines Plugins. Es gibt mehrere kostenlose Plugins, mit denen du schnell und einfach ein Child-Theme erstellen kannst.
Im PlugIn-Verzeichnis von WordPress findest du einige davon. Im Prinzip kannst du die meisten PlugIns auch für Divi verwenden auch wenn sie nicht speziell dafür gemacht wurden.
Eines das speziell für Divi Child Themes gemacht wurde ist das Divi Children von Divi4U Es hat zusätzlich zu den Standarddateien noch ein paar ganz nette Zusatzfunktionen und ist obendrein kostenlos.
Bedenke aber immer dass die Verwendung von PlugIns dich Performance kosten und ein zusätzliches Sicherheitsrisiko für deine Webseite sein kann. Lies weiter unten wie einfach es ist auch ohne PlugIn auszukommen und überlege dann nochmal ob du das wirklich benötigst. Ich habe diese Methode nur der Vollständigkeit halber aufgeführt.
mit einem Child-Theme-Generator
Eine Möglichkeit, ein Child-Theme für Divi zu erstellen, ist die Verwendung eines Divi Child Theme Generators. Der Generator ermöglicht es dir, die benutzerdefinierten Details deines Child Themas selbst einzugeben und generiert dann automatisch die Dateien und komprimiert sie sogar für dich, damit sie hochgeladen werden können.
Einer der besten Generatoren ist der Divi Child Theme Generator von wpzone. Hier kannst du zusätzlich zu den normalen Angaben auch gleich noch aussuchen ob du das Child Theme für das Divi oder das Extra Theme verwenden möchtest.
Außerdem generiert es eine Java-Script Datei und fügt als kleines aber feines Schmankerl einen Login-Editor hinzu, den du dann im Customizer findest. Damit kannst du die Anmeldeseite von dir oder deinem Kunden individualisieren.
ein leeres Child -Theme herunterladen
Die dritte Möglichkeit, ein Child-Theme für Divi zu verwenden ist es ein fertig vorgefertigtes Child Theme bei einem der vielen Seiten über Divi herunterzuladen. Viele Blogs bieten das kostenlos an. Meistens musst du dich dafür dann für ihren Newsletter anmelden. Allerdings begnügen sich über 90% der Seiten damit dir nur die Standarddateien style.css und functions.php und eine screenshot.jpg anzubieten und sind dabei meistens noch voll mit Werbung für die eigene Seite. Hier bei mir kannst du dir jeweils für Divi oder das Extra Theme ein komplett anpassbares Child Theme herunterladen. Ganz ohne Werbung und inclusive zusätlichem Java-Script File sowie Anpassungen für deine Loginseite in Deutsch. Klicke einach auf den entsprechenden Button.ein eigenes Child Theme erstellen
Wenn du das Child-Theme von Grund auf neu erstellen möchtest, dann ist dieser Abschnitt genau das Richtige für dich. Ich gehe mit dir Schritt für Schritt durch was du dazu brauchst und in welcher Reihenfolge du was machen solltest. Du wirst sehen das ist überhaupt kein Hexenwerk.
1. Erstelle einen Ordner für das Child Theme
Erstelle einen neuen Ordner auf deinem Computer und benenne ihn Divi-Child-Theme. In diesen kommen anschließend alle Dateien die wir gleich noch generieren werden.
2. Erstelle die style.css
Die Datei kannst du ganz einfach mit einem beliebigen Texteditor erstellen. Nachdem du sie erstellt hast, nennst du sie einfach um in style.css
Wichtig:
Achte dabei unbedingt auf die korrekte Schreibweise, sonst kann sie nicht gelesen werden.
Die style.css dient dazu WordPress die Details deines Child-Themes mitzuteilen, und wird üblicherweise verwendet, um benutzerdefiniertes CSS zu platzieren mit dem du unter anderem Farben und Schriften ändern kannst.
In die Datei style.css kopierst du folgende Zeilen:
/*
Theme Name: hier steht der Name deines Themes
Theme URI: https://meinewebseite.de
Description: hier steht die Beschreibung deiner Webseite
Author: dein Name
Author URI: https://meinewebseite.de
Template: Divi
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/*-======= Füge dein zusätzliches CSS unterhalb von dieser Linie ein =========*/
Jetzt kannst du alle Angaben so anpassen wie es dir gefällt, mit einer Ausnahme. Der Vorlagenname (Template: Divi). Damit das Child-Theme korrekt als Child-Theme von Divi funktioniert, musst du das genauso lassen, wie es so ist.
3. Benutzerdefiniertes CSS hinzufügen
Wenn du schon benutzerdefiniertes CSS hast, das du hinzufügen möchtest, dann kannst du das gerne auch jetzt schon machen. Füge ihn einfach unter der angegebenen Zeile hinzu. Keine Sorge, falls du noch keinen Code hast den du hinzuzufügen willst, kannst du dies später noch jederzeit machen.
4. Erstelle die functions.php
Wie bereits erwähnt, benötigen Child-Themes (mindestens) zwei Dateien. Du hast die erste Datei (style.css) erfolgreich erstellt. Die zweite obligatorische Datei für ein Child-Theme ist die functions.php
Diese dient dazu, dass deine Änderungen die du in der style.css hinterlegt hast auch wirklich ausgeführt werden. Die zweite wichtige Aufgabe dieser Datei ist es zusätzliche Funktionen, die du hier definieren kannst auszuführen oder bestehende zu ändern.
Wichtig:
Achte auch hier unbedingt auf die korrekte Schreibweise, sonst kann sie nicht gelesen werden.
Auch für die Erstellung der functions.php bleibt dir ganz dir überlassen ob du einen reinen Texteditor oder einen speziellen Codeeditor benutzt, es geht mit beiden.
In die Datei functions.php kopierst du folgende Zeilen:
<?php
function divichild_enqueue_scripts() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'divichild_enqueue_scripts' );
//Schreib deine Funktionen hier unter diese Zeile:Du hast jetzt die beiden wichtigsten Dateien für dein Child Theme erstellt. Damit ist dein Child Theme schon fast funktionsfähig. Wenn du zusätzlich auch gleich noch eine Datei für deine Java Script Anpassungen erstellen möchtest dann kannst du hier weiterlesen. Ansonsten geht es jetzt zum generieren der Bilddatei unter Punkt 7.
5. Benutzerdefiniertes PHP hinzufügen
Vorher kannst du allerdings auch hier schon benutzerdefinierte Funktionen hinzufügen wenn du möchtest. Füge deinen Code einfach unter der angegebenen Zeile hinzu. Keine Sorge, falls du noch keinen Code hast den du hinzuzufügen willst, kannst du dies später noch jederzeit machen.
6. Erstelle die sripts.js (optional)
Für dein benutzerdefiniertes Javascript musst du nur eine neue Datei anlegen die du diesmals scripts.js nennst. Das war`s auch schon fast. Du brauchst innerhalb der neuen Datei keine Zeile code schreiben wie bei den anderen beiden. Du kannst gleich in der obersten Zeile mit deinem Code beginnen.
Wichtig 1:
Wenn du deinen Code einträgst musst du die Script Tags am Anfang (<script>) und Ende (</script>) entfernen.
Wichtig 2:
Damit deine Javascript Anpassungen später auch ausgeführt werden musst du in der functions.php die du gerade erstellt hast noch einen Verweis auf die scripts.js schreiben.
Die Datei functions.php änderst du folgendermaßen ab:
<?php
function divichild_enqueue_scripts() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ));
}
add_action( 'wp_enqueue_scripts', 'divichild_enqueue_scripts' );
//Schreib deine Funktionen hier unter diese Linie:
7. Füge einen Screenshot hinzu
Nachdem wir nun die Dateien functions.php und style.css (und optional die scripts.js) erstellt haben, besteht der nächste Schritt darin, ein Bild für dein Child Theme zu erstellen.
Das Bild ist nicht unbedingt nötig, aber wenn du keines erstellst bleibt der Bereich an dem sich das Bild auf der WordPress-Themes-Seite befinden sollte leer. Das sieht zwar außer dir niemand, ist aber trotzdem nihct wirklich schön.
Die Abmessungen des Screenshots sollten 1200×900 Pixel betragen und kann entweder als .jpg oder.png Datei gespeichert werden.
Wichtig:
Auch hier musst du wieder auf die korrekte Schreibweise achten, es muss alles klein geschrieben werden. Speichere dein Bild also als screenshot.jpg oder screenshot.png, da WordPress es sonst nicht erkennt.
8. Datei packen
Nachdem du jetz alle notwendigen Dateien erstellt hast musst du alle nur noch in den vorhin erstellten Ordner verschieben und den Ordner anschlie0end mit einem belibigen Packprogramm zu einer gezippten Datei komprimieren. Der Dateiname ist dann z.B. Divi-Child.zip
9. Installieren und Aktivieren
Jetzt fehlt nur noch ein letzer wichtiger Schritt. Gehe im Dashboard unter Design auf Themes und klicke dort zuerst auf „Theme hinzufügen“ und anschließend auf „Theme hochladen“. Wähle dann deine soeben erstellte .zip Datei und lade sie hoch.
Wenn du alles richtig gemacht hasst findest du bei deinen Themes jetzt eine neue Kachel mit dem Namen deines eben erstellten Child-Themes und dem Bild aus deinem Screenshot. Sobald du mit der Maus über das Bild von deinem Child-Theme fährst erscheinen 2 Buttons. „Live-Vorschau“ und „Aktivieren“. Klicke auf Aktivieren und dein erstes eigenes Child-Theme ist bereit für dich.
Das war doch gar nicht so schwer, oder?
Herzlichen Glückwunsch! Ab jetzt kannst du nach Herzenslust neue Funktionen ausprobieren, Java Script Snippets aufrufen oder dein Design ändern ohne Gefahr zu laufen, dass alle deine mühsam gemachten Änderungen mit dem nächsten Update passè sind. Und sollte doch mal etwas nicht so passen wie du es dir vorgestellt hast kannst du deine Änderungen einfach rückgängig machen indem du sie aus einer der jeweiligen Dateien löschst und schon ist wieder alles beim Alten.
Premium Child-Themes
Zum Schluß wollen wir uns noch kurz den eingangs erwähnten Premium Themes widmen. Im Gegensatz zu den bisher ausführlich besprochenen leeren Themes sind Premium Themes bereits bei der Installation mit allerhand Funktionen und Styles ausgerüstet.
Der große Vorteil von Premium Child Themes ist der, dass du nicht mit einer leeren Seite beginnen musst sondern schon ein vorgefertigetes Layout hastauf dem du aufbauen kannst. Du sparst dir dadurch, vor allem wenn du noch nicht so viel Erfahrung im Webdesign hast, jede Menge Zeit und Arbeit.
Ein weiterer Vorteil ist, dass du, da es sich hier ja auch um Child-Themes handelt, Anpassungen gleich in den bereits erstellten Dateien machen kannst die bei einem Update von Divi nicht übrschrieben werden.
Premium Child Themes sind im Grunde eine fertige Website. Nach der Installation sind sie schon fix und fertig und du kannst sie so verwenden wie sie sind oder eben nach deinen Wünschen gestalten. Du musst also nicht von Null an beginnen. Es ist kein Geheimnis, dass das Anpassen eines Premium Child Themes deutlich schneller und einfacher ist als das Entwerfen einer Seite aus dem Nichts heraus.
Du wirst bald merken, dass es sehr viele Premium Child Themes gibt. Einige davon sind kostenlos, aber die meisten wirklich gut gemachten musst du kaufen.
Schlussworte
Ich hoffe ich konnte dir mit dieser Anleitung zeigen wozu ein Child Theme gut ist und wie du es für dich nutzen kannst. Wie du gesehen hast kannst du dir zwar ein PlugIn installieren das dir die Arbeit abnimmt aber es ist gar nicht so schwer dir selbst eines zu ersellen. Und du hast ja immer noch die Möglichkeit das von mir erstellte Child Theme herunter zu laden und für dich anzupassen.
0 Kommentare