Child Theme erstellen und einbinden am Beispiel Divi

Aktualisiert am 26. Mai 2023

Du solltest immer dann ein Child-Theme verwenden, wenn du Änderungen an einem bestehenden Theme vornehmen möchtest. Ich nutze fast immer ein Child-Theme, weil ich darin auch Dateien ablegen kann, auf die das WordPress-Theme zugreifen.

Aktivier das Kinder-Thema, bevor du den Customizer benutzt. Wenn du erst den Customizer benutzt und dann dein Child-Theme aktivierst, werden die Standardeinstellungen des Themes wieder hergestellt.

Was ist ein Child-Theme?

Ein WordPress-Child-Theme ist eine sehr abgespeckte Kopie eines WordPress-Themes. Du kannst damit das Design deiner Website mehr verändern, als es mit dem Customizer bei WordPress möglich ist. Du verwendest ein Child-Theme aus mehreren Gründen:

  1. Du schützt das Haupt-Theme – falls dir im  Fehler unterlaufen, funktioniert das eigentliche Layout (und damit deine Homepage) immer noch mit dem Eltern-Theme
  2. Alle Einstellungen bleiben von etwaigen Theme-Updates unberührt
  3. Du behältst den Überblick über die CSS-Datei – machst du alle Änderungen im Customizer, wird es sehr schnell unordentlich
  4. Du kannst Templates für dein Theme erstellen und im Child-Theme verwalten – wenn z.B. jede Seite eine andere Hintergrundfarbe haben soll
  5. Kinder-Themen können Eltern-Themen als Framework nutzen.

Du brauchst: Theme und das Child Theme

z.B. Divi. Dieses Eltern-Theme oder Parent Theme ist die Voraussetzung, das es hierzu ein Kind (das Child-Theme) geben kann.

Ohne ein vollständiges Eltern-Theme kein Child-Theme

Das Theme-Verzeichnis bei WordPress

… ist das Ziel, so sollte das Theme-Verzeichnis bei WordPress auf dem Server aussehen:

Theme-Verzeichnis auf dem Server
Ordner Themes in WP-Content

 

Du siehst hier die Dateistruktur von WordPress: direkt in der Domain – die hier eine Subdomain ist und kunde4.avida-design.de heißt – liegt die Installation. Alles, was direkt hier angezeigt wird, nennt man das Root-Verzeichnis. Im Ordner wp-content befinden sich unter Anderem die Ordner für die Plugins und Themes. Im Theme-Verzeichnis sollten sich nur 3 Theme-Ordner befinden – Parent-Theme (Divi), Child-Theme (divi-child) und ein Standard-Theme von WordPress, dass eine Art Sicherheitsnetz bildet, sollte ein Theme fehlerhaft sein und deine Seite nicht mehr funktionieren.

Child-Theme installieren

Als erstes solltest du das Eltern-Thema installieren – also Divi oder Twenty Twelve, wenn du meine Child-Themes verwenden möchtest.

Du hast einen Ordner mit dem Child-Theme und schiebst ihn entweder über FTP an die richtige Stelle oder du erstellst einen Zip von deinem Ordner (du kannst das Child Theme zu Divi und zu Twenty Twelve hier auf der Seite downloaden) und installierst diesen.

Dieser Ordner liegt dir vor oder du lädst ihn via Zip von dieser Seite.

Upload des Zips mit dem Child Theme

Dann lädst du das Zip im Bereich Themes im Backend hoch und installierst es.

Wenn du sowohl Eltern-Theme als auch Kind-Theme korrekt installiert hast, sieht dein Backend so aus:

Das Child-Theme ist aktiv.

Was ist im Child-Theme drin?

In Child-Theme-Ordner liegen 3 Dateien

functions.php
styles.css
screenshot.png

Die styles.css und functions.php kannst du beliebig ergänzen: Die Styles z.B. mit den Angaben zur Fonts und die Functions kannst du ergänzen mit Angaben, wie z.B.: lade keine Emojis. Der Screenshot sollte ein PNG-Format sein, die Optik kannst du beliebig anpassen. Ich kopiere mir immer aus dem Eltern-Theme den Screenshot und passe diesen an.

In dem Artikel deaktivieren von Emojis & Avataren kannst du eine veränderte functions.php sehen und in dem Artikel DSGVO-konformen Einbinden von Google Fonts siehst du den Code zur Ergänzung der styles.css.

 

functions.php

Die styles.css Datei des Eltern-Themes soll nach der Empfehlung des WordPress Codex’ über die functions.php im Child-Theme eingebunden werden.

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

styles.css

Jetzt  noch die styles.css Datei, um deine eigenen CSS-Anpassungen oder neue CSS-Styles in dein Child-Theme einzubinden. Die styles.css Datei sollte so beginnen:

/*
Theme Name: Kinderthema für XY
Template: Divi
Author: Bettina Heuser
Author URI: https://avida-design.de
*/

 

screenshot.png

Screenshot Child-Theme

 

Child Theme selber erstellen

  1. du kopierst ein funktionierendes Childtheme
  2. Alle Dateien in dem Childtheme behalten ihren Namen (functions.php, screenshot.png und styles.css)
  3. du passt den Screenshot über ein Bildbearbeitungsprogramm an
  4. functions.php bleibt wie es ist
  5. styles.css passt du entsprechend deinem Elternthema an. ACHTUNG: Exakte Übernahme des Ordnernamens, in dem das Elterntheme drinliegt. Also ggf. Kleinschreibung und Zusammen

Das Kinderthema funktioniert nur zusammen mit dem Elternthema – es kann nur zusammenspielen, wenn das Elternthema korrekt adressiert wird.

Wie soll das Kind heißen?

Wie du den Ordner des Child-Themes nennst, ist egal, Hauptsache du hältst Ordnung in deinen Verzeichnissen. Ob also Child-Divi oder Kind-von-Divi als Ordnername – mach, was du für passend erachtest.

Diese Anpassungen musst du vornehmen

Beispiel: Elternthema Twenty Twelve

  1. Functions.php bleibt unverändert
  2. Screenshot aus dem Eltern-Theme nehmen und kenntlich machen, das es zum Kind gehört (Photoshop) und im Verzeichnis des Child-Themes ablegen.
  3. In der CSS zwingend erforderlich: Anpassung dieser Zeile:
    Template: twentytwelve
    ggf. also hier Template: twentysixteen oder
    Template: kale etc.
    der Rest formt die Theme-Description

Achtung: bei der Anpassung der Bezeichnung Template: twentytwelve die Schreibweise Theme (Groß- Kleinschreibung) beachten, d.h. Name des Ordners, in dem das Theme liegt. Also z.B. auf keinen Fall Template: Twenty Twelve sondern Template: twentytwelve. 

Footer anpassen mit Child-Theme

Du kannst ganz einfach die Fußzeile anpassen, sollte dein Theme keine abschaltbaren Footer-Credits haben, so wie das Theme Neve. Hier habe ich beschrieben, wie du die footer.php anpassen kannst, das in der kostenfreien Version immer diesen Hinweis hat: Neve | Powered by WordPress.

Divi-Child-Theme Download

Du kannst die Zips zu Divi und zum Üben das Twenty Twelve einfach per Klick downloaden und sofort verwenden

child-2012

divi-child

Child-Theme aktualisieren via FTP

Ich zeige dir nur diese Methode, weil sie die einfachste und eleganteste ist. Du hast ein FTP-Programm installiert, über das du mit dem Server deines Providers Daten tauschen kannst. Ich nutze Filezilla, dass es auch kostenfrei für Mac & Windows gibt.

Nachdem du deine Änderungen lokal im Childtheme vorgenommen hast, lädst du die Datei in den Childtheme-Ordner deines Online-Verzeichnisses:

Child Theme auf Server laden
FTP-Programm Filezilla: Links sind die Dateien auf meiner Festplatte, rechts die auf dem Server des Providers

Was ist ein FTP-Programm?

Stark vereinfacht: ein Programm, dass die Kommunikation zwischen 2 Computern regelt. In unserem Fall ist der eine Computer der deine und der andere steht bei IONOS, Strato, All-inkl.com oder wie auch immer dein Provider heißt.

Das FTP-Programm verwendet eine bestimmte Technik, dass die übertragenen Daten sicher verschlüsselt durch Netz düsen. Du kannst Dateien hochladen zu dem Server deiner Homepage (Strato etc.) und auch runterladen. Die Kommunikation funktioniert in beide Richtungen. Wir nutzen FTP um z.B. die lokal veränderte Stylesheet styles.css zu der Website hochzuladen. Oder um die vorher bei Google geladenen Fonts lokal zu installieren.

Plugin anstatt Child-Theme

Wenn du weder die functions.php anpassen möchtest oder Templates erstellen, dann kannst du als Anfänger auch dieses Plugin ausprobieren https://de.wordpress.org/plugins/so-css/

SiteOrigin CSS verfügt über eine Reihe einfacher Steuerelemente, mit denen du relativ einfach Farben, Stile und Maße auswählen  und anpassen kannst. Wenn du bei WordPress Anpassungen Anfänger bist, aber die verschiedenen Klassen (CSS-Klassen, die das Layout steuern) lernen möchtest, kann dir hier dieses Tool sogar hilfreiche Informationen über dein verwendetes Theme geben. Du kannst auch unbesorgt deine Homepage updaten – alle Daten bleiben sicher verwahrt.

4 Gedanken zu „Child Theme erstellen und einbinden am Beispiel Divi“

Schreibe einen Kommentar