WordPress-Child-Themes erstellen: Funktionsweise und Aufbau
WordPress entwickelte sich über die Jahre weg von einem einfachen Blogsystem zu einem benutzerfreundlichen CMS und ist mittlerweile aus dem World Wide Web nicht mehr wegzudenken. Dank dieser Beliebtheit haben sich viele WordPress-Profis darauf spezialisiert, WordPress-Themes als Vorlage für Websites bereitzustellen. Diese bringen schon so gut wie alle Funktionalitäten mit sich und entsprechen jeweils auch optisch den ungefähren Vorstellungen von Seitenbetreibern. Doch eben nur ungefähr. Anpassungen am Code, um die Seite an das Corporate Design anzupassen, oder Änderungen am Aufbau müssen hier und da noch gemacht werden. Doch was ist mit den Änderungen, wenn das Theme geupdatet wird? Hier kommen WordPress-Child-Themes in Spiel.
Was ist ein WordPress-Child-Theme?
Um zu vermeiden, dass ein Theme-Update eigene Änderungen überschreibt, lohnt es sich, ein WordPress-Child-Theme zu erstellen. Ein WordPress-Child-Theme ist, wie der Name verrät, das „Kind“ eines übergeordneten (Parent-)Themes. Es ist mit dem Parent-Theme so verknüpft, dass es dessen Aussehen und Funktionen erbt. Führen Sie individuelle Anpassungen im WordPress-Child-Theme durch, überschreiben diese automatisch die Anweisungen des Parent-Themes. Änderungen wirken sich somit nicht auf das übergeordnete Theme aus. Steht ein Update des Parent-Themes an, bleiben die Änderungen des WordPress-Child-Themes bestehen.
Während Sie größere Anpassungen oder Updates durchführen, können Fehlermeldungen auf der Website entstehen. Um Nutzer nicht zu irritieren, sollten Sie den WordPress-Wartungsmodus aktivieren.
Woraus besteht ein WordPress-Child-Theme?
Ein WordPress-Child-Theme kann unterschiedliche Bestandteile haben. Ausschlaggebend sind die Änderungen, die Sie durchführen, und in welchen Dateien diese stattfinden. Jedoch gibt es gewisse Dateien, die Sie für jedes WordPress-Child-Theme erstellen müssen, damit es reibungslos funktioniert:
- CSS Style Sheet-Datei style.css
- function.php
- screenshot.png (optional)
Doch wieso benötigt ein WordPress-Child-Theme diese drei Dateien?
WordPress-Child-Themes: Funktionsweise
Wie bereits erwähnt funktioniert ein WordPress-Child-Theme erst, wenn es die oben genannten Dateien enthält. Die Dateien haben folgende Funktionen:
- style.css enthält alle CSS-Regeln und Deklarationen, die das Aussehen des Themes steuern. Wichtig ist vor allem der Header-Bereich. Hier teilt die CSS-Datei WordPress mit, dass es sich um ein untergeordnetes Theme mit einem bestimmten Parent-Theme handelt, und liefert weitere grundlegende Informationen.
- function.php bestimmt die Reihenfolge, in der die Style Sheets des Parent und WordPress-Child-Themes laden. Damit die Änderungen des Child-Themes die Anweisungen des Parent-Themes überschreiben, muss der Browser das Style Sheet des WordPress-Child-Themes nach dem Style Sheet des Parent-Themes laden.
- screenshot.png ist optional, empfiehlt sich aber, um im WordPress-Backend das WordPress-Child-Theme direkt zu erkennen. WordPress zeigt screenshot.png-Dateien automatisch im Theme-Menü bei der entsprechenden Vorlage an.
Wenn Sie nur kleinere Änderungen an dem Theme vornehmen, bieten sich auch einfachere Lösungen wie das Simple Custom CSS Plugin oder der seit der WordPress-Version 4.7 integrierte Customizer an.
Vor- und Nachteile des WordPress-Child-Themes
Grundlegend bringt ein WordPress-Child-Theme viele Vorteile mit sich. Doch es gibt auch einige Nachteile, weshalb Sie bei nur kleinen CSS-Änderungen überlegen sollten, ob es sich lohnt, extra ein Theme zu erstellen:
| Vorteile | Nachteile |
|---|---|
| Änderungen werden beim Update des Parent-Themes nicht überschrieben. | Das Update der ursprünglichen Vorlage schließt nur Sicherheitslücken in Template-Dateien, die im Parent-Theme-Ordner liegen. Bei den Template-Dateien im WordPress-Child-Themes-Ordner bleiben diese Lücken bestehen. |
| Ein WordPress-Child-Theme bietet mehr Freiheiten gegenüber den Möglichkeiten im WordPress-Backend. Beispielsweise lassen sich Aufbau und Struktur der Website anpassen oder das Theme um bestimmte Funktionen erweitern. | Eventuell entstehen Performance-Einbußen, da der Browser zwei Style Sheets lädt. |
| Umfangreiche CSS-Anpassungen bleiben gegenüber dem Customizer von WordPress in der style.css übersichtlich. | |
| WordPress-Child-Themes sind ideal für Anfänger, die WordPress besser kennenlernen möchten. Schleicht sich ein Fehler ein, können sie jederzeit auf das Parent-Theme zurückgreifen. | |
| Die Entwicklungszeit der Website kann mit WordPress-Child-Themes beschleunigt werden. |
- Daten zentral speichern, teilen und bearbeiten
- Serverstandort Deutschland (ISO 27001-zertifiziert)
- Höchste Datensicherheit im Einklang mit der DSGVO
WordPress-Child-Themes erstellen: Anleitung zum Selberbauen
Nachdem wir die Funktionen erklärt haben, schauen wir uns jetzt an, wie Sie ein funktionsfähiges WordPress-Child-Theme erstellen.
Schritt 1: WordPress-Child-Themes-Ordner anlegen
Über einen FTP-Client (z. B. FileZilla) verbinden Sie sich mit Ihrem Server und navigieren innerhalb der WordPress-Installation zu folgendem Ordner:
ihr-pfad-zur-wordpress-installation/wp-content/themes/Dort legen Sie einen Ordner für das WordPress-Child-Theme an. Am besten verwenden Sie als Namen die Bezeichnung des Parent-Themes mit „-child“ am Ende.
Schritt 2: Style Sheet für das WordPress-Child-Theme erstellen
Legen Sie eine style.css-Datei an und fügen Sie folgende Informationen im Header-Bereich mit einem Texteditor ein:
/*
Theme Name: [Name des Parent-Themes] Child
Theme URI: [http://example.de/parent-theme/]
Description: [Name des Parent-Themes] Child Theme
Author: [Ihr Name]
Author URI: [Die URL Ihrer Website]
Template: [Ordnername des Parent-Themes]
Version: 1.0.0
Text Domain: [Name des Parent-Themes] -child
*/Die Platzhalter in eckigen Klammern ersetzen Sie durch Ihre Angaben. Sie müssen nicht alle Punkte integrieren; lediglich diese zwei Informationen sind Voraussetzung, damit das WordPress-Child-Themes funktioniert:
- Theme Name: Jedes Theme braucht einen Namen, so auch das WordPress-Child-Theme. Dieser Name sollte einzigartig sein und nicht von einem anderen Theme innerhalb Ihrer WordPress-Installation verwendet werden.
- Template: Durch diese Information weiß WordPress, dass es sich um ein WordPress-Child-Theme des angegebenen Parent-Themes handelt.
Ist die Datei fertig, laden Sie sie über den FTP-Client in den Ordner des WordPress-Child-Themes.
Schritt 3: Style Sheet in der function.php richtig laden
Im besten Fall wird im Parent-Theme bereits die Anweisung gegeben, das Style Sheet des WordPress-Child-Themes zu laden. Doch nicht alle Design-Vorlagen tun dies. Deshalb ist es wichtig, sich anzuschauen, was das Parent-Theme macht. Eine der drei folgenden Szenarien trifft dabei zu:
- Das Parent-Theme lädt bereits beide Style Sheets. In dem Fall muss das WordPress-Child-Theme nichts mehr machen.
- Lädt das Parent-Theme sein eigenes Style Sheet per get_template_directory() oder get_template_directory_uri(), muss das WordPress-Child-Theme nur das eigene Style Sheet mit der entsprechenden Bezeichnung des Style Sheets des Parent-Themes als Parameter in der function.php laden.
- Lädt das Parent Theme sein eigenes Style Sheet per get_stylesheet_directory() oder get_stylsheet_directory_uri(), muss das WordPress-Child-Theme beide Style Sheets in der function.php laden. Achten Sie darauf, die Bezeichnung des Style Sheet des Parent-Themes eins zu eins zu übernehmen.
Tritt der zweite Fall ein, sieht die function.php so aus:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( 'Name des Parent-Theme Style Sheets'),
wp_get_theme()->get('Version') // Funktioniert nur, wenn der Punkt Version auch im Header-Bereich des Style Sheets angegeben ist
);
}
?>Soll das WordPress-Child-Theme beide Style Sheets über die function.php laden, sieht der Code wie folgt aus:
<?php
function child_theme_styles() {
wp_enqueue_style( 'Name des Parent-Theme Style Sheets', get_template_directory_uri() . '/style.css');
wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri() .'/style.css' , array('Handle Name des Parent-Theme Style Sheets'));
}
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );
?>Die function.php legen Sie zu der style.css-Datei in den WordPress-Child-Themes-Ordner.
Optional können Sie noch eine Bilddatei mit dem Dateinamen screenshot.png im WordPress-Child-Themes-Ordner ablegen. WordPress zeigt dieses Bild im Backend beim Theme an, damit sie die Vorlage besser zuordnen können.
Schritt 4: WordPress-Child-Theme aktivieren
Nachdem das WordPress-Child-Theme erstellt ist, aktiveren Sie es wie jedes andere Theme im WordPress-Backend. Dazu einfach im Backend einloggen und unter „Design“ > „Themes“ das Child-Theme auswählen.
Haben Sie bereits Anpassungen am Parent-Theme über den WordPress-Customizer durchgeführt, gehen diese Änderungen bei der Aktivierung des WordPress-Child-Themes verloren. Mit dem Plugin Customizer Export/Import können Sie die Customizer-Einstellungen exportieren und anschließend wieder importieren.
Damit ist das WordPress-Child-Theme vollständig einsatzbereit. Wenn Sie Änderungen an anderen Template-Dateien durchführen möchten, kopieren Sie die Datei aus dem Parent-Theme und legen Sie sie in den Child-Theme-Ordner ab. Der Pfad muss dabei genau dem Pfad im Parent-Theme entsprechen. Die Datei des Parent-Themes wird automatisch durch die Datei im WordPress-Child-Themes-Ordner überschrieben.
Mit dem Hosting für WordPress von IONOS erhalten Sie eine speziell für WordPress optimierte Hosting-Plattform, die Ihnen den Weg zur eigenen WordPress-Website vereinfacht.