You are currently viewing Gastbeitrag: Wie du ganz einfach mit dem Plugin „Child Theme Configurator“ ein WordPress Child Theme erstellst?

Gastbeitrag: Wie du ganz einfach mit dem Plugin „Child Theme Configurator“ ein WordPress Child Theme erstellst?

Ich freue mich über diesen wundervollen Gastbeitrag zum Thema Erstellung eines WordPress Child Theme meiner lieben und geschätzten Kollegin Sylvia Klatt von Sylvia Klatt Webdesign. Ich wünsche Euch viel Spaß beim Lesen!

And here we go!

Änderungen an deiner Website per CSS kannst du zwar direkt im Theme oder Page Builder deiner Website vornehmen. Allerdings wird das schnell unübersichtlich, denn nach ein paar Tagen oder Wochen wirst du dich nicht mehr erinnern, an welcher Stelle du welchen Code-Schnipsel eingefügt hast. Außerdem besteht die Gefahr, dass solche Code-Einfügungen beim nächsten Update verloren gehen. Darum ist es ratsam, CSS-Änderungen in ein Child Theme einzufügen.

Keine Angst, die Erstellung eines Child Themes ist viel einfacher als es klingt. Am einfachsten gelingt es mit dem Plugin Child Theme Configurator.

Erstmal: Was ist ein Child Theme?

Um das zu erklären, hole ich ein bisschen aus. Das von dir installierte Theme (z.B. Divi, Astra, The7, Enfold…) ist das sogenannte Parent Theme (Elternthema). Es ist so programmiert, dass damit bestimmte Designeinstellungen umgesetzt werden können – oder eben auch nicht.

Das Child Theme (Kindthema) erbt alle Funktionen und Styles (Aussehen) des Parent Themes. Schreibst du jetzt Änderungen für CSS oder PHP in das Child Theme, so überschreibst du damit die jeweiligen Angaben im Parent Theme. Damit kannst du kleine Änderungen vornehmen (z.B. Effekte zu deinem Menü hinzufügen) oder sogar das ganze Template (kurze Info: Templates sind Musterseiten deiner Website. Sie geben einen Rahmen vor, der bestimmt, wie Titel, Textpassagen, Bilder und andere Elemente gestaltet und angeordnet sind) umschreiben.

Vorteile:

  • Den Code kannst du so strukturieren, dass du deine jeweiligen Änderungen schnell wieder findest.
  • Von den Child Theme Dateien kannst du sehr einfach eine Datensicherung, sprich Backup, erstellen. So gehen dir deine geschriebenen Codes nicht mehr verloren. Und du kannst auf ältere Backups zurückgreifen, falls das mal notwendig sein sollte.

Nachteile:

  • Du hast noch weitere Dateien, die beim Öffnen der Website geladen werden müssen. Das fällt aber nicht groß ins Gewicht und sollte dich nicht davon abhalten, ein Child Theme zu verwenden.

Erstellung des Child Themes mit dem Plugin „Child Theme Configurator“

Als Beispiel erstelle ich ein Child Theme für das Divi-Theme.

Plugin installieren

Um das Plugin zu installieren, klickst du in der linken Seitenleiste von WordPress auf Plugins -> Installieren (oben links). Im Suchfeld „Plugins durchsuchen…“ gibst du den Namen Child Theme Configurator ein. In der Ergebnisliste sollte dir das Plugin nun angezeigt werden.  

Child Theme Configurator installieren
Plugin installieren

Klicke auf Jetzt installieren und anschließend auf Aktivieren. Das Plugin ist jetzt aktiv.

Child Theme erstellen

Um mit dem Plugin ein Child Theme zu erstellen, klickst du nun in der linken Seitenleiste auf Werkzeuge -> Kindthemen.

Schritt 1 - Kindthema erstellen
Child Theme Konfigurator Schritt 1

Der erste Reiter Eltern/Kind sollte vorausgewählt sein. Falls nicht, klicke für den nächsten Schritt darauf.

Wähle nun unter Punkt 1 die Option Neues Kindthema ERSTELLEN aus. Unter Punkt zwei wählst du das Elternthema aus, für welches das Child Theme erstellt werden soll. Im dritten Schritt klickst du auf Elternthema untersuchen. Das Plugin überprüft nun, ob es bei der Erstellung des Child Themes irgendwelche Probleme geben könnte. Du solltest nun die Meldung „Dieses Thema scheint als Kindthema in Ordnung zu sein“ erhalten.

Schritt 2 - Elternthema untersuchen
Child Theme Konfigurator Schritt 2

Benenne nun unter Punkt 4 den Ordner, in den das Theme gespeichert werden soll. Bei dem Namen handelt es sich nicht um den Namen des Child Themes. Dieser wird weiter unten angepasst.

Wähle unter Punkt 5 aus, wo neue Stile gespeichert werden sollen. Normalerweise ist die Standardeinstellung Primäre Formatvorlage passend. Auch bei Elternthema-Formatvorlagen-Handling auswählen unter Punkt 6 passt die Voreinstellung WordPress-Stil-Warteschlangen benutzen im Normalfall.

Schritt 3 - Beschreibung anpassen
Child Theme Konfigurator Schritt 3

Unter Punkt 7 kannst du deinem Child Theme einen Namen geben, die Beschreibung anpassen und weitere Einstellungen vornehmen. Wähle für den Namen eine passende Bezeichung, z.B. Divi Child. Die Themen-Website solltest du unverändert lassen bzw. korrigieren, falls sie nicht korrekt ist. Als Autor gibst du deinen Namen an. Außerdem kannst du deine Website-Adresse hinzufügen. Themen-Beschreibung und Schlagwörter kannst du anpassen, falls du dies wünschst.

Die Version gibst du mit 1.0 an, denn es handelt sich um die erste Version des Child Themes.

Die Option Menüs, Widgets und andere Customizer-Einstellungen vom Eltern- zum Kindthema kopieren unter Punkt 8 lässt du unausgewählt. Dies wird normalerweise nicht benötigt.

Klicke nun auf den Button Configure Child Theme. Das Kindthema wird jetzt erstellt. Dies kann einen kleinen Moment dauern.

Du findest das erstellte Theme im Ordner wp-content -> themes unter dem von dir angegebenen Ordnernamen. Du solltest dort drei Dateien finden: functions.php, style.css und screenshot.jpg.

Schritt 4 - Kindthema aktivieren
Child Theme Konfigurator Schritt 4

Um das Child Theme zu aktivieren, gehst du im Adminbereich deiner Website auf Design -> Themes. Hier solltest du dein Theme finden. Fahre mit der Maus über das Theme. Es sollte nun ein Button mit der Aufschrift Aktivieren erscheinen. Klicke darauf.

Weitere Einstellungen

Für das Bild verwendet WordPress die Datei screenshot.jpg in deinem Kindthema-Ordner. Falls du ein anderes Bild verwenden willst, musst du diese Datei überschreiben. Du kannst das manuell machen, indem du die jetzige Datei löschst und dann ein anderes Bild mit dem Namen screenshot.jpg in den Ordner einfügst. Oder du nutzt dafür den Child Theme Configurator. Wie das geht, erkläre ich dir weiter unten.  

Schritt 5 - Dateien hinzufügen
Child Theme Konfigurator Schritt 5

Du kannst deinem Kindthema mit dem Configurator Plugin weitere php-Dateien hinzufügen (das brauchst du nur, wenn du dich mit PHP auskennst und weißt, was du tust). Tipp am Rande: Neben den Dateien functions.php und style.css macht es auch noch Sinn die Dateien header.php und footer.php auszuwählen und diese in das Kindthema zu kopieren. Diese werden neben der functions.php immer mal wieder zum Einbau von Codeschnipseln benötigt. Gehe dazu im Configurator auf den Reiter Dateien und wähle hier die Dateien aus, die hinzugefügt werden sollen.

Bereits im Theme verfügbare php-Dateien kannst du hier auch löschen lassen.

Schritt 6 - Screenshot Datei hochladen
Child Theme Konfigurator Schritt 6

Als zusätzliche Optionen wird dir unter dem Reiter Dateien auch das aktuelle Bild deines Child Themes angezeigt. Wenn du möchtest, kannst du hier ein neues hochladen und damit das alte ersetzen. Außerdem kannst du ein Backup deines Child Themes als zip-Dateien erstellen lassen.

Dein Child Theme ist jetzt fertig.

CSS Code einfügen

Du kannst nun loslegen und CSS-Code in die style.css einfügen.

Das sieht dann z.B. so aus:

#top-menu-nav #top-menu a, 
.et-fixed-header #top-menu a {
     color: #1E1E1E;
     font-weight: 400;
}

#top-menu-nav #top-menu a:hover, 
.et-fixed-header #top-menu a:hover {
     color: #71aaea;
}

Mit diesem Code habe ich mein Menü so umgeschrieben, dass sich die einzelnen Menüpunkte beim Drüberfahren mit der Maus blau färben.

Als Code-Editor empfehle ich dir Visual Studio Code ( https://code.visualstudio.com/). Der Editor ist kostenlos und bietet zahlreiche Funktionen, die dich beim Programmieren unterstützen.

Ich wünsche dir viel Erfolg!

Falls du Fragen oder Ergänzungen zu diesem Blogartikel hast, freue ich mich über eine Nachricht von dir per E-Mail an mail@sylviaklatt.de

Über die Autorin

Sylvia Klatt ist leidenschaftliche Webdesignerin. Am liebsten verhilft sie ambitionierten Frauen zu einer modernen und strategisch gestalteten Website. Laien WordPress anschaulich und verständlich zu erklären, ist genau ihr Ding.

Wenn du mehr über Sylvia wissen willst, besuche ihre Internetseite: sylviaklatt.de
Oder kontaktiere sie über ihr LinkedIn-Profil: linkedin.com/in/sylviaklatt/

Mehr zu mir und meinen Leistungen erfährst du hier.

Bildquelle: Daniele Levis Pelusi – Unsplash

Schreibe einen Kommentar