Divi Child-Theme mit divi.space Generator erstellen

Du kannst den Generator unter folgendem Link finden: https://divi.space/divi-child-theme-builder/

Dann musst du nur die Felder ausfüllen.

Theme Name: Hier den Namen deines Child-Themes z.B. Namen deiner Seite

Description: Eine kurze Beschreibung oder leer lassen

Version: Kannst du bei 1.0.0 belassen

Theme Website: Hier die URL deiner Website eintragen

Author: Hier deinen Namen eintragen

Author Website: Hier auch die URL deiner Website eintragen

Theme Screenshot: Hier im Idealfall ein PNG-Bild im Format 1200×900 erstellen mit einem Logo deiner Website oder einfach das Bild deines Parent-Themes aus dem Backend speichern und verwenden

Parent Theme: Divi stehen lassen oder Extra auswählen, falls du das Extra Theme verwendest

License und Licence URL: Voreinstellungen beibehalten

Custom CSS und Custom JavaScript: Kannst du leer lassen

Your Email Address: Deine E-Mail an die das fertige Child-Theme verschickt wird.

Anschließend nur noch auf „Generate“ klicken und dein Child-Theme kommt innerhalb von ein paar Sekunden per Mail.

WordPress Child-Theme manuell erstellen

1. Ordner-Struktur erstellen

Zuerst erstellst du dir auf deinem Computer einen neuen Ordner und gibst ihm den Namen deines WordPress Child-Themes. Also in meinem Fall „uixandy“.

2. Dateien erstellen

Danach erstellst du entweder mit dem Text-Editor oder mit dem Programm „sublime Text“ die notwendigen Dateien. Du benötigst drei Dateien:

1. style.css
2. functions.php
3. screenshot.png

Zuerst erstellst du eine neue Datei mit deinem Text-Editor und fügst folgenden Code ein:

/*
 Theme Name:   [NameParentTheme] Child
 Theme URI:    [http://example.com/parent-theme/]
 Description:  [NameParentTheme] Child Theme
 Author:       [Dein Name]
 Author URI:   [http://deinedomain.at]
 Template:     [Ordner Name des Parent-Theme]
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         [hier kannst du Tags vergeben]
 Text Domain:  [NameParentTheme] -child
*/

/* ab hier kannst du deine eigenen Anpassungen eintragen */

Achte darauf, dass du [Platzhalter] mit den korrekten Bezeichnungen ersetzt. Also z.B. statt [NameParentTheme] schreibst du den Namen deines Themes und so weiter. Danach speicherst du die Datei in dem vorher erstellten Ordner und nennst sie „style.css“.

Als nächstes erstellst du eine neue Datei mit deinem Text-Editor und fügst folgenden Code ein:

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

Diese Datei speicherst du auch in dem erstellten Ordner und nennst sie „functions.php“. Damit wird dein Child-Theme mit dem Parent-Theme verknüpft.

Danach musst du noch den Screenshot erstellen oder hier in den Ordner einfügen, der dann im Backend angezeigt werden soll. Das Format sollte 1200×900 sein und die Datei muss „screenshot.png“ heißen.

3. Verzeichnis komprimieren

Nun musst du den Ordner einmal als .zip Datei komprimieren, damit du dein Child-Theme einfach über das Backend von WordPress hochladen und installieren kannst.

4. WordPress Child-Theme installieren und aktivieren

Nun loggst du dich in dein WordPress Backend ein und wählst links im Menü „Design“ und dann „Themes“. Anschließend klickst du oben neben der Überschrift „Themes“ auf „Neu hinzufügen“ und dann auf „Theme hochladen“. Hier wählst du dann die von dir erstellte .zip Datei aus und klickst auf „Jetzt installieren“. Sobald das abgeschlossen ist kannst du auf „Aktivieren“ klicken.

Damit ist dein eigenes WordPress Child-Theme fertig und installiert und du kannst nun deine Änderungen in der style.css oder functions.php deines Child-Themes einfügen. Dies kannst du entweder über FTP mit dem Programm „FileZilla“ oder einem ähnlichen Programm machen oder direkt über den Backend-Editor von WordPress. Diesen findest du wenn du im WordPress Backend links im Menü auf „Design“ gehst und dann auf „Theme-Editor“. Dann musst du darauf achten, dass oben rechts in dem Dropdown auch der Name des Child-Themes steht und dieses somit ausgewählt ist und du kannst rechts in der Liste dann zwischen style.css und functions.php wählen und deine Änderungen einfügen und unten auf „Datei aktualisieren“ klicken.