Du möchtest Änderungen an deinem aktuellen WordPress-Theme vornehmen? Dann solltest du definitiv ein WordPress-Child-Theme verwenden. Wie du ein WordPress-Child-Theme erstellen kannst und was das genau ist, erkläre ich dir in diesem Artikel.
Aber mal ganz langsam: bevor du dir dein erstes WordPress-Child-Theme erstellst, sollten wir ein paar grundlegende Fragen klären.
Was ist ein Child Theme
Ein Child-Theme ist laut Definition im WordPress Codex ein Theme, das
„die Funktionalität und das Design eines anderen Themes, des sogenannten Parent-Themes, erbt“
Child-Themes werden empfohlen, um bestehende Themes zu verändern und dabei ihr Design und ihren Code beizubehalten.
Diese Themes erlauben dir, neue Designs und Funktionen zu erstellen, die die Funktionen des Parent-Themes übernehmen.
Das klingt jetzt vielleicht für dich sehr nerdy. Allerdings benötigst du ein Child-Theme, um Custom CSS-Code und andere Änderung updatesicher in dein bestehendes WordPress-Theme zu integrieren.
Ein Child-Theme ist also ein Add-on für dein bestehendes WordPress-Theme.
Einfach ausgedrückt: Ein Child-Theme stellt sich vor dein „normales“ Theme. Der WordPress Core kommt vorbei und fragt dein Child Theme nach Regeln, Designs und Funktion. Diese im Child Theme definierten Eigenschaften haben höchste Priorität. Danach geht der WordPress Core weiter zu deinen „normalen“ Theme (auch Parent-Theme oder Eltern-Theme) und schau dort nach Funktionen, Designs und Regeln. Dabei benutzt der WordPress Core im Zweifel immer die Regeln (sofern es denn welche gibt) aus dem Child-Theme.
Warum du ein Child-Theme benötigst
Ein Child-Theme ist ein WordPress-Theme, das die Funktionen, Eigenschaften und das Design eines anderen WordPress-Themes, des Parent-Themes, erbt. Du kannst das Child-Theme dann anpassen, ohne Änderungen am Parent-Theme vornehmen zu müssen.
Child-Themes sind der beste Weg, um ein WordPress-Theme anzupassen, denn sie sparen Zeit und Mühe. Das Parent-Theme enthält bereits viele Formatierungen und Funktionen, sodass du nicht alles von Grund auf neu programmieren musst.
Zudem kannst du so dein WordPress-Theme sicher aktualisieren.
Da du das Child-Theme und nicht das Parent-Theme geändert hast, gehen keine Anpassungen verloren, wenn du das Parent-Theme aktualisierst.
Du solltest immer bedenken, dass Änderungen an Theme Dateien beim Update überschrieben werden. Hier kommt also ein Child-Theme zum Einsatz: das Design und die Funktionen werden eben nicht geupdated und überschreiben die Regeln des Eltern-Themes.
Die Vorteile eines Child-Themes:
- Du kannst das Parent-Theme aktualisieren, ohne dass deine Anpassungen verloren gehen.
- Du nutzt die Funktionen von ausgefeilten Frameworks und übergeordneten Themes und kannst das Design an deine Bedürfnisse anpassen.
- Wenn du mit deinen Anpassungen nicht zufrieden bist, kannst du das Child-Theme einfach deaktivieren und alles bleibt so, wie es vorher war.
- Anstatt ein komplettes Theme von Grund auf zu erstellen, kannst du auf einem bereits bestehenden Theme aufbauen und so die Entwicklungszeit verkürzen.
- Das ist eine funky Möglichkeit, um zu lernen, wie Themes funktionieren.
Ein Child-Theme kann Bildordner, JavaScript, CSS, Template Dateien und viele andere Dinge enthalten. Das Schöne daran ist jedoch, dass sie das nicht müssen. Du kannst so viele oder so wenige Anpassungen vornehmen, wie du willst.
Eigentlich braucht ein Child-Theme nur drei Dinge: Einen Ordner, ein Stylesheet (style.css) und eine functions.php-Datei. Das war’s. Und die beiden Dateien können fast leer sein.
Okay, jetzt, wo du weißt, wie toll Child-Themes eigentlich sind und was du damit alles machen kannst, werden wir Schritt für Schritt ein eigenes WordPress-Child-Theme erstellen.
Ein Child-Theme in WordPress erstellen (per Hand)
Es ist beinah egal, welches WordPress-Theme du ein Child-Theme erstellen möchtest. Ich werde dir an den relevanten Stellen zeigen, was du bei deinem speziellen Theme einsetzen musst.
Wir werden das WordPress-Child-Theme erst mal lokal auf deinem Rechner erstellen, um es dann später mit einem FTP-Programm auf deinem Webserver hochzuladen.
Im ersten Schritt erstellst du einen neuen Ordner auf deinem Rechner. Je nachdem welches Parent-Theme du nutzt, vergibst du den Ordner-Namen mit einem „-child“ Suffix. Also falls du das Enfold Theme nutzt (und dies im Ordner „enfold“ in deinem Themes-Ordner ist) erstellst du einen Ordner: „enfold-child“.
Falls du nicht weißt, wie dein Parent-Theme heißt, schaue mit einem FTP-Programm auf deinen Webserver unter: wp-content/themes. Da sollte sich (je nachdem welches Theme du verwendest) ein Ordner befinden.
Nachdem du den Ordner erstellt hast, kannst du mit einem Text-Editor deiner Wahl eine neue Datei erstellen. Füge folgenden Code in die Datei ein:
/* Theme Name: Enfold Child Theme URL: http://deinedomain.de Description: Enfold Child Theme Author: Dein Name Author URL: http://deinedomain.de Template: enfold Version: 1.0.0 Text Domain: enfold-child */
Ändere alle Werte entsprechend. Das wichtigste Feld ist Template, weil es WordPress mitteilt, auf welchem Parent-Theme dein Child-Theme basiert. Wenn du fertig bist, speichere die Datei als style.css ab.
Erstelle eine weitere Datei namens functions.php im selben Ordner. Kopiere nun den unten stehenden Code, füge ihn in die leere Datei ein und speichere sie:
<?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style',
get_template_directory_uri().'/style.css' );
}
?>
Das war’s! Du hast soeben dein erstes WordPress-Child-Theme erstellt!
Nun gehst du einfach in den Ordner in das Theme-Verzeichnis (wp-content/themes) und aktivierst das Child-Theme über dein WordPress-Backend (Design > Themes)
That’s it!
Natürlich hast du auch noch andere Möglichkeiten ein WordPress-Child-Theme zu erstellen. Ich werde im Folgenden darauf eingehen.
Ein Child-Theme in WordPress erstellen (mit Plugin)
Das Plugin Child Theme Configurator ist ein einfach zu bedienendes WordPress-Plugin, mit dem du schnell und ohne Code Child-Themes erstellen und anpassen kannst.
Als Erstes musst du das Child Theme Configurator Plugin installieren und aktivieren.
Nach der Aktivierung musst du in deinem WordPress Dashboard zu Werkzeuge → Kindthemen navigieren (jaja, die deutsche Übersetzung ist nicht so besonders ????)
Auf der ersten Registerkarte Eltern/Kind wirst du aufgefordert, ein Parent-Theme aus einem Dropdown-Menü auszuwählen. Im Beispiele wähle ich das Theme „Enfold“ – du wählst hier natürlich dein Parent-Theme.
Wenn du auf den Button „Untersuchen“ klickst, prüft das Plugin, ob das Theme für die Verwendung als Parent-Theme geeignet ist. Das Enfold-Theme ist OK.
Als Nächstes wirst du aufgefordert, den Ordner zu benennen, in dem das Child-Theme gespeichert werden soll, und auszuwählen, wo die Styles gespeichert werden sollen. Wir belassen es bei den Standardeinstellungen.
Unter Punkt 6 wählst du den ersten Punkt aus: „Die WordPress Stil-Warteschlange benutzen.“
Wenn du zu Abschnitt 7 kommst, musst du auf den Button „Click to edit Child Theme Attributes“ klicken, um die Eigenschaften des Child-Themes zu bearbeiten. Dann kannst du dessen Details eingeben.
Wenn du ein Child-Theme manuell erstellst, verlierst du die Menüs und Widgets des Parent-Themes. Der Child Theme Configurator kann sie vom Parent- in das Child-Theme kopieren. Aktiviere das Kästchen Abschnitt 8, wenn du das möchtest.
Zum Schluss klickst du auf den Button, um dein neues Child Theme zu erstellen. Das Plugin erstellt einen Ordner für deine Child-Themes und fügt die Dateien style.css und functions.php hinzu, die du später zur Anpassung des Themes verwenden wirst.
⚠️ Bevor du das Theme aktivierst, solltest du auf den Link am oberen Rand des Bildschirms klicken, um eine Vorschau anzuzeigen und sicherzustellen, dass es gut aussieht und deine Seite mit dem Child-Theme nicht kaputt ist.
Wenn alles zu funktionieren scheint, klicke auf die Schaltfläche Aktivieren & Veröffentlichen und dein Child-Theme wird aktiviert.
In diesem Stadium sieht das Child-Theme genauso aus wie das Parent-Theme und verhält sich auch so.
???? Falls die Einstellung deines Themes verschwunden sind, schau doch einfach, ob es eine Exportfunktion für deine Theme-Einstellungen gibt. Beispielsweise bietet dir das Enfold-Theme unter dem Punkt „Export“ eben genau das. Dann musst du die Theme-Einstellung des Parent-Themes exportieren und in das Child-Theme importieren.
Ein Child-Theme in WordPress erstellen (mit Generator)
Eine weitere Möglichkeit ein WordPress-Child-Theme zu erstellen, ist die Benutzung eines Child Theme Generators. Du findest so einen Generator etwa unter:
https://childtheme-generator.com/
Zugegeben, der Child Team Generator sieht nicht schön aus, macht aber was er soll. Zudem hat er die beliebtesten Themes bereits eingespeichert. Somit kannst du mit nur wenigen Klicks dein Child-Theme herunter- und direkt auf deinen Webserver hochladen. Natürlich machst du das wie immer in den Ordner wp-content/themes.
Falls die Formularfelder des Child Theme Generators für dich nicht selbsterklärend sind, hier noch die eine kleine Anleitung:
- Name of the parent theme: Gib den Namen des übergeordneten Themes ein, zum Beispiel „Twentyfifteen“ oder „Enfold“. Der Child Theme Generator wird versuchen, den richtigen Slug des übergeordneten Themes für dich zu finden.
- Slug of the parent theme: Dies ist einfach der Ordnername deines übergeordneten Themes. Du findest ihn in deiner WordPress-Installation unter /wp-content/themes/[theme], wobei [theme] der Ordnername deines Parent-Themes ist.
- Name of your child theme: Gib den Namen deines Child-Themes ein (das, das du jetzt erstellen wirst). Im Feld darunter wird automatisch ein Slug vorgeschlagen, der den Ordnernamen für dein Child-Theme darstellt.
- Slug of your child theme: Dies ist der Ordnername deines Child-Themes. Der Child Theme Generator schlägt ihn automatisch vor, aber du kannst ihn nach Belieben ändern.
Denk einfach daran: Kleinbuchstaben, keine Leerzeichen und keine Sonderzeichen. - Author email address: WordPress will, dass die E-Mail-Adresse des Autors in der style.css neben dem Autorennamen steht.
- Author name: Genau wie die E-Mail-Adresse wird auch dieser in der style.css-Datei gespeichert.
