Wie man ein Child Theme in WordPress erstellt (Erweiterte Anleitung)

Du betreibst deine WordPress-Seite seit einer Weile und sie hat das getan, was du brauchst. Aber jetzt hast du beschlossen, dass du es anpassen musst.

Oder vielleicht erstellst du deine Website mit einem Theme, das du aus dem Theme-Verzeichnis heruntergeladen hast oder das du gekauft hast, und du erkennst, dass es nicht genau so funktioniert, wie du es dir erhoffst.

Was machst du dann?

Du kannst entweder ein Plugin finden, das die gewünschte Anpassung bietet, oder zu einem neuen Theme wechseln. Aber was ist, wenn du mit deinem aktuellen Theme zufrieden bist und kein Plugin findest, das dir das bietet, was du in Bezug auf die Funktionalität brauchst?

Antwort: Du musst dein Theme individualisieren. Und das bewährte Mittel lautet: Das funktioniert über WordPress mit Child Themes.

In diesem Beitrag zeige ich dir genau, wie du ein Child Theme auf WordPress erstellen kannst, wie du es verwenden kannst, um deine Website anzupassen, und wie Child Themes funktionieren. Ich werde auch das Konzept der Parent Themes erklären und beschreiben, wie das Parent Theme auf deiner Website mit einem Child Theme interagiert:

Bevor wir in die Erstellung eines Child Themes eintauchen, lass uns die 3 Methoden identifizieren, mit denen du deine WordPress-Seite anpassen kannst.

Methoden zur Anpassung von WordPress

Das Anpassen eines Themes birgt Risiken. Wenn du den Code in einem Theme eines Drittanbieters bearbeitest (das du zum Beispiel von einem Marktplatz gekauft hast), dann gehen bei der nächsten Aktualisierung des Designs alle deine Änderungen verloren. Das bedeutet, dass nicht nur deine Website wieder so wird, wie sie war, sondern auch deine gesamte Arbeit verschwendet ist.

Es gibt drei Möglichkeiten, deine WordPress-Seite anzupassen:

• Bearbeite direkt dein Theme.
• Installation eines Plugins.
• Erstellen eines Child Themes des aktuellen Themes.

Betrachten wir die einzelnen Punkte nacheinander.

Bearbeiten deines Themes

Wenn auf deiner Website ein benutzerdefiniertes WordPress-Theme läuft, d.h. es wurde speziell für deine Website entwickelt, hast du die Möglichkeit, es sicher zu bearbeiten, da nicht das Risiko besteht, deine Anpassungen beim nächsten Update des Themes zu verlieren.

Wenn du oder dein Entwickler in Zukunft Änderungen am Theme vornehmen, ist es stattdessen die angepasste Version des Themes, die du bearbeiten wirst, und nicht die Originalversion vor diesen Änderungen.

Das bedeutet nicht, dass die Bearbeitung deines Themes nicht ohne Risiko ist. Wenn du keine Erfahrung mit der Codierung von Themes hast, kann es immer noch sicherer sein, ein Child Theme zu erstellen (wir werden in einer Minute sehen, wie das geht). Das ist etwas, was ich tue: Ich habe ein Basistheme, das ich auf allen meinen Websites verwende, mit Standardlayout, Hooks und Funktionen, und dann passe ich es auf jeder Website mit einem Unterdesign an.

Wenn du dein Theme direkt bearbeitest, stelle sicher, dass du ein Backup des ursprünglichen Themes aufbewahrst, das Theme nicht in der Live-Site bearbeitest (benutze stattdessen eine Entwicklungs- oder Staging-Site) und die Versionskontrolle verwendest, um deine Änderungen zu verfolgen.

Und wenn du ein Design von Drittanbietern verwendest, solltest du es nie direkt bearbeiten. Verwende stattdessen ein Plugin oder erstelle ein Child Theme.

Hinzufügen eines Plugins

Die zweite Möglichkeit zur Anpassung eines WordPress-Themes besteht darin, ein Plugin zu installieren oder zu kodieren.

Wenn die Anpassungen, die du vornehmen möchtest, funktional und nicht designbezogen sind, ist ein Plugin eine geeignetere Methode, dies zu tun. Wenn du also zusätzlichen Code hinzufügen möchtest, kann es besser sein, stattdessen ein Plugin zu erstellen.

Plugins müssen nicht groß oder komplex sein: Wenn du der Datei functions.php in deinem Theme zusätzlichen Code hinzufügen musst, erstelle ein einfaches Plugin, um ein paar Zeilen Code zu deiner Website hinzuzufügen. Ein gutes Beispiel ist die Registrierung eines benutzerdefinierten Beitragstyps.

Es mag verlockend sein, Code zu den functions.php deines Themes hinzuzufügen, aber das Hinzufügen eines Post-Typs ist eine funktionale Änderung deiner Website, keine schlichte Designänderung. Wenn du in Zukunft das Theme wechseln solltest, würdest du diese Post-Typen und alle Beiträge, die du mit ihnen erstellt hast, nicht verlieren wollen. Deshalb solltest du stattdessen ein Plugin installieren oder erstellen.

Manchmal wirst du in der Lage sein, ein bestehendes Plugin zu finden, das das tut, was du brauchst, aber manchmal musst du das Plugin selbst kodieren.

Wenn du Zweifel hast, ob du ein Plugin erstellen oder dein Theme (oder dein Child Theme) anpassen sollst, frag dich Folgendes: Wenn ich das Design meiner Website in Zukunft ändern und ein neues WordPress Thema installieren wollte, würde ich dann wollen, dass diese Änderung erhalten bleibt? Wenn die Antwort ja ist, bedeutet das, dass die Änderung funktional und nicht ästhetisch ist, und sie sollte in einem Plugin erfolgen.

Erstellen eines Child Themes

Die dritte Option zur Anpassung des WordPress-Themas besteht darin, ein Child Theme zu erstellen.

Hier sind einige Szenarien, in denen du ein Child Theme verwenden würdest:

• Du möchtest Änderungen am Design der Website vornehmen, nicht an der Funktionalität.
• Auf deiner Website läuft ein Theme von Drittanbietern oder ein Theme, das du im aktuellen Zustand wiederverwenden möchtest.
• Du möchtest dein bestehendes Theme nicht direkt bearbeiten, falls es Probleme verursacht (vielleicht bist du kein erfahrener Theme-Entwickler).
• Auf deiner Website läuft ein Theme, das als Parent Theme konzipiert ist, wie beispielsweise ein Framework-Theme. Dies sind Themen mit vielen Anpassungsoptionen wie z.B. Hooks, die für dich entwickelt wurden, um sie mit deinem eigenen Child Theme zu ergänzen.

Child Themes sind daher eine effektive und sichere Möglichkeit, deiner Website Anpassungen hinzuzufügen. Also lass uns einen Blick auf sie werfen.

Was ist ein WordPress Child Theme?

Also, was genau ist ein Child Theme in WordPress? Wie funktioniert es?

Ein Child Theme ist ein Theme, das mit einem anderen Theme zusammenarbeitet, das als Parent Theme bezeichnet wird.

Es enthält einige spezifische Anweisungen, um WordPress mitzuteilen, dass es sich um ein Child Theme handelt und was das Parent Theme ist. WordPress verwendet dann in den meisten Fällen den Code aus dem Parent Theme, überschreibt ihn aber mit Code aus dem Child Theme (falls erforderlich). Wenn du auf eine Seite stößt, die ein Child-Theme verwendet, das dir gefällt, verwende unser Theme-Detector-Tool, um herauszufinden, was das Parent-Theme ist.

Die Dateien in einem WordPress Child Theme

Jedes WordPress Child Theme muss mindestens zwei Dateien haben: ein Stylesheet und eine Funktionsdatei. Das Stylesheet enthält oben auskommentierten Text, der WordPress sagt, dass es sich um ein Child Theme Design handelt und was das Parent Theme ist. Die Funktionsdatei enthält eine Funktion, die das Stylesheet aus dem Parent Theme an zweiter Stelle setzt.

Hinweis: Möglicherweise stößt du auf Anleitungen, die dir sagen, dass du das Stylesheet des übergeordneten Themas aus dem Stylesheet des untergeordneten Themas aufrufen sollst. Dies ist nicht mehr der richtige Weg, und du solltest stattdessen das Enqueuing in der Funktionsdatei verwenden. Ich werde dir in Kürze zeigen, wie das geht.

Dein Child Theme muss keine weiteren Dateien enthalten. Im Gegensatz zum Parent Theme benötigt es keine index.php-Datei als Fallback, wenn es keine spezifischeren Dateien im Theme gibt. Dies liegt daran, dass WordPress die Datei aus dem Parent Theme verwendet, wenn eine Vorlagendatei nicht im Child Theme vorhanden ist.

Je nachdem, was dein Child Theme tun soll, fügst du entweder zusätzlichen Code zum Stylesheet, zur Funktionsdatei oder du erstellst zusätzliche Dateien im Child Theme, um das Parent Theme zu überschreiben. Diese können einen oder mehrere der folgenden Punkte beinhalten:

• Vorlagendateien, um die gleiche Datei aus dem Parent Theme zu überschreiben, z.B. page.php, wenn du die Anzeige von statischen Seiten anpassen möchtest.
• Vorlagenteile wie header.php oder footer.php, wenn du diese Teile des Seitendesigns anpassen möchtest.
• Zusätzliche Vorlagenteile, die du aus Vorlagendateien in deinem Child Theme aufrufst. Wenn du also den Header anpassen möchtest, wenn statische Seiten angezeigt werden, würdest du eine Datei in deinem Child Theme namens header-page.php und eine Template-Datei namens page.php erstellen, die page.php vom Parent Theme überschreiben würde. Diese Vorlagendatei wäre identisch mit derjenigen im Parent Theme, mit Ausnahme des Aufrufs für die Header-Datei, der header-page.php anstelle von header.php aufrufen würde.
• Zusätzliche Include-Dateien für die Funktionalität. Wenn du eine Menge funktionalen Code hinzufügen und organisieren möchtest, kannst du Include-Dateien für jeden Satz von Funktionen erstellen und sie dann in der Datei functions.php deines Child Themes aufrufen. Wenn du also beispielsweise zusätzliche Customizer-Optionen hinzufügen möchtest, kannst du eine Include-Datei namens customizer.php in deinem Child Theme hinzufügen und diese Datei dann aus der Funktionsdatei in deinem Child Theme aufrufen.

Aber wenn du zusätzliche Dateien und Funktionen hinzufügst, woher weiß WordPress, welche zu verwenden sind? Die vom Parent Theme oder die vom Child Theme? Darauf kommen wir als nächstes zu sprechen.

Wie WordPress Vorlagendateien auswählt

Die Art und Weise, wie WordPress Vorlagendateien aus deinem Theme auswählt, wenn du Inhalte auf deiner Website darstellst, bezieht sich auf die Vorlagenhierarchie.

WordPress verwendet diese Hierarchie, um die Vorlagendateien in deinem Theme durchzugehen und die richtige zu finden, die du bei der Anzeige einer bestimmten Art von Inhalten verwenden möchtest. Es beginnt oben (auf der linken Seite im Bild oben) und sucht nacheinander nach jeder Datei für den angegebenen Inhaltstyp. Wenn es eine Datei findet, die diesen Inhalt anzeigt, wird es sie verwenden.

Stelle dir vor, dein Theme hat eine archive.php-Datei und eine category.php-Datei, aber keine tag.php-Datei. Wenn WordPress ein Kategorienarchiv anzeigt, verwendet WordPress category.php, da es spezifischer für den Inhaltstyp ist. Wenn ein Tag-Archiv angezeigt wird, verwendet es stattdessen archive.php.

Wenn WordPress keine Vorlagendatei für den angegebenen Inhaltstyp findet, wird die Catch-all Datei index.php verwendet, weshalb jedes eigenständige Theme (d.h. kein Child Theme) eine index.php Datei haben muss.

Gleiches gilt für einzelne Beiträge und Seiten. Nehmen wir an, dein Theme hat eine singular.php-Datei, die als Catch-all für einzelne Beiträge eines beliebigen Beitragstyps (einschließlich Seiten und benutzerdefinierter Beiträge) fungiert. Es hat auch eine page.php Datei. Wenn eine einzelne Seite angezeigt wird, wird page.php verwendet. Wenn ein Beitrag angezeigt wird, verwendet er die Datei singular.php. Und wenn du einen benutzerdefinierten Post-Typ registrierst und keine Vorlagendatei für diesen Post-Typ hinzufügst, wird singular.php wieder verwendet.

Wenn du ein Child Theme verwendest, verwendet WordPress immer noch die Vorlagenhierarchie, um zu entscheiden, welche Datei bei der Ausgabe von Inhalten auf deiner Website verwendet werden soll. Es betrachtet die Dateien sowohl im Parent als auch im Child Theme und verwendet die erste Datei, auf die es trifft.

Stelle dir also vor, dein Child Theme hat singular.php und post.php, und dein Parent Theme hat page.php und index.php. Bei der Ausgabe eines einzelnen Beitrags verwendet WordPress post.php aus dem Child Theme. Bei der Ausgabe einer Seite wird page.php aus dem Parent Theme verwendet. Und wenn ein einzelner Beitrag eines benutzerdefinierten Post-Typs ausgegeben wird, wird singular.php aus dem Child-Theme verwendet.

Aber was ist, wenn sowohl dein Child als auch dein Parent Theme Instanzen derselben Datei haben?

Stellen wir uns vor, du fügst dem Child Theme im vorherigen Beispiel eine page.php-Datei hinzu. Da sich dieses Theme im Child Theme befindet, überschreibt es die gleiche Datei aus dem Parent Theme. Wenn WordPress also eine einzelne Seite anzeigt, verwendet WordPress die neue Datei page.php aus dem Child Theme.

Aus diesem Grund kannst du beim Erstellen eines Child Themes das Parent Theme anpassen. Wenn du eine Kopie einer Vorlagendatei von deinem Parent Theme zu deinem Child Theme hinzufügst und sie dann bearbeitest, um die Anpassungen einzubinden, die du vornehmen möchtest, wird WordPress diese neue Vorlagendatei anstelle derjenigen vom Parent Theme verwenden. Das bedeutet, dass deine Anpassungen bei der Anzeige von Inhalten verwendet werden, ohne dass du das Parent Theme bearbeitet hast. Toll!

Wie WordPress Funktionen von Parent und Child Themes ausführt

Was, wenn du Anpassungen nicht an den Vorlagendateien in deinem Theme, sondern an den Funktionen vornehmen möchtest?

Das geht auch. Zuerst musst du dich davon überzeugen, dass der richtige Weg, dies zu tun, mit einem Child Theme und nicht mit einem Plugin ist. Ein Beispiel könnte sein, wo du eine Funktion bearbeiten möchtest, die sich bereits im Parent Theme befindet, z.B. die Funktion, die das Kolophon in der Fußzeile ausgibt.

Du fügst dann die neue(n) Funktion(en) zur Funktionsdatei in deinem Child Theme oder zu einer Include-Datei hinzu, die du aus der Funktionsdatei aufrufst.

Um sicherzustellen, dass deine neue Funktion die Funktionalität deines Parent Themes überschreibt, musst du verstehen, wie man Funktionen überschreibt. Es gibt drei Möglichkeiten, dies zu tun:

• Indem du eine neue Funktion mit dem gleichen Namen wie eine Pluggable-Funktion in deinem Parent Theme schreibst.
• Indem du die Funktion in deinem Parent Theme vom Hook, an den sie angehängt wurde, abkoppelst und dann eine neue Funktion schreibst, um sie zu ersetzen.
• Indem man eine neue Funktion mit höherer Priorität als die ursprüngliche Funktion schreibt und sie über den gleichen Hook aufruft, was bedeutet, dass sie nach der ursprünglichen Funktion aufgerufen wird und sie daher überschreiben oder erweitern kann.

Wir werden untersuchen, wie du das alles später in diesem Beitrag machst. Aber zuerst schauen wir uns die Szenarien an, in denen du ein Child Theme verwenden würdest und in denen du es nicht verwenden würdest.

Wann man ein Child Theme in WordPress verwendet (Vorteile)

Du weißt jetzt, was Child Themes sind und wie du damit die Template-Dateien oder Funktionen in deinem Parent Theme überschreiben kannst.

Als kurze Zusammenfassung solltest du ein Child Theme verwenden, wenn du ein Theme auf deiner Website verwendest und du eines oder mehrere der folgenden Schritte durchführen möchtest:

• Bearbeiten einer oder mehrerer der Vorlagendateien.
• Hinzufügen zusätzlicher Funktionen, die sich auf die Anzeige und nicht auf die Funktionalität beziehen.
• Überschreiben einer oder mehrerer Funktionen aus dem Parent Theme.
• Hinzufügen zusätzlicher Vorlagendateien.

Einige Vorteile sind unter anderem:

• Einfache Erweiterung und Anpassung: Wie jedem einleuchtet, erweitert ein Child Theme die Funktionalität seines Parent Themes. Du hast bereits eine vorgefertigte Vorlage in Form eines Parent Themes zur Verfügung, und alles, was du tun musst, ist, eine separate style.css-Datei für dein Child Theme zu erstellen und die Anpassungen nach deinen Bedürfnissen vorzunehmen.
• Problemlose Updates: Da WordPress sich weiterentwickelt, müssen Themes und Plugins immer wieder aktualisiert werden. Wenn du Anpassungen und Änderungen an deinem Haupttheme vornimmst, kannst du am Ende alle deine Änderungen verlieren, wenn du das Theme jemals aktualisierst. Daher ist es ratsam, solche Änderungen an einem Child Theme vorzunehmen, so dass man, selbst wenn man jemals das Parent Theme aktualisieren muss, keine Angst haben muss, seine Änderungen zu verlieren.

Was ist, wenn du kein Child Theme verwenden würdest?

Wann man ein WordPress Child Theme nicht verwenden sollte (Nachteile)

Es gibt Zeiten, in denen man kein Child Theme verwenden würde und eine andere Methode zur Anpassung der Website verwenden sollte. Das sind:

• Wenn du dein Theme selbst entwickelt hast (oder jemand anderes für dich geschrieben hat) und es nirgendwo anders verwenden musst. Bearbeite einfach das Theme und stelle sicher, dass du die Versionskontrolle verwendest.
• Wenn die Anpassungen, die du vornehmen möchtest, funktional sind, z.B. das Hinzufügen eines benutzerdefinierten Post-Typs, und du möchtest sie behalten, wenn du das Theme in Zukunft änderst. Verwende stattdessen ein Plugin.

Einige Nachteile sind unter anderem:

• Auswahl des idealen Parent Themes: Nicht alle Themes fungieren als gute Bezugsthemes! Bestimmte WordPress-Themes beispielsweise werden möglicherweise nicht regelmäßig aktualisiert und sind daher in der Regel nicht auf dem neuesten Stand. Ebenso werden nicht alle WordPress-Themes mit Child Themes im Hinterkopf erstellt und können als solche als schlechte Kandidaten für Parent-Themes dienen. Man muss das perfekte Parent Theme auswählen, um es richtig zu erweitern und es als Grundlage für seine Child Themes zu nutzen.
• Anpassungsbemühungen: Ein Child Theme versucht im Grunde genommen, ein bestehendes Template-Design zu erweitern und anzupassen. Wenn du also bereits eine Website um dein Parent Theme herum erstellt hast, musst du möglicherweise die Anpassung von Elementen wie Menüs, Themenoptionen, Sidebars, Header usw. überdenken, wenn du zu einem Child Theme wechselst.

Jetzt, da du weißt, wann (und wann nicht) du ein Child Theme verwenden solltest, ist es Zeit, sich an die Arbeit zu machen und zu lernen, wie man ein Child Theme in WordPress erstellt.

Wie man ein WordPress Child Theme erstellt

Beim Einrichten eines grundlegenden Child Themes in WordPress werden zwei Dateien erstellt: das Stylesheet und die Funktionsdatei. Werfen wir einen Blick auf beide.

Das Stylesheet

Bevor du deine Datei erstellst, musst du einen Ordner erstellen, in dem du dein Theme speichern kannst. Dieser wandert in die wp-content/themes-Datei deiner WordPress-Installation.

Denke daran: Tue dies nicht in deiner Live-Site. Füge den Code zuerst zu einer Entwicklungsumgebung hinzu und teste ihn dann auf deiner Staging-Seite. Sobald du damit zufrieden bist, kannst du es auf deine Live-Seite übertragen. Alle Kinsta-Hosting-Angebote beinhalten Staging.

Erstelle im Ordner für dein neues Theme eine Datei namens style.css. Füge folgendes hinzu:

/*
Theme Name:  My Child Theme. Child for Twenty Nineteen.
Theme URI:  https://rachelmccollin.com
Description:  Theme to support tutsplus tutorial. Child theme for the Twenty Nineteen theme.
Author:  Rachel McCollin
Textdomain:  mccollin
Author URI:  https://rachelmccollin.com/
Template:  twentynineteen
Version:  1.0
License:  GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html                 
*/

Dieser Text ist auskommentiert. Es ist kein Code, der etwas auf deiner Website ausführt oder eine Funktion bietet. Stattdessen wird WordPress über das Theme informiert. Du brauchst solchen Text in jedem Theme, sonst kann WordPress ihn nicht als Theme erkennen.

Lass uns jede dieser Zeilen durchgehen, um herauszufinden, was sie tun:

• Name des Themes: Der eindeutige Name für das Theme.
• Theme-URI: Wo Benutzer den Code oder die Dokumentation für das Theme finden können.
• Beschreibung: Beschreibender Text, der den Benutzern hilft zu verstehen, was das Theme bewirkt….
• Autor: dein Name
• Textdomain: Diese wird für die Internationalisierung verwendet. Verwende die Textdomäne als zweiten Parameter in allen Internationalisierungsfunktionen.
• Autoren-URI: Die Website des Autors.
• Vorlage: Der Ordner, in dem das Parent Theme gespeichert ist. Verwende den Ordnernamen und nicht den Namen des Themes. Ohne diese Zeile funktioniert dein Theme nicht als Child Theme.
• Version: Die Versionsnummer
• Lizenz: Die Lizenz, die GNU sein muss. (link)
• Lizenz-URI: Der Link zu den Informationen über die Lizenz.

Die wichtigste Zeile für ein Child Theme ist die Template: Zeile. Ohne diese Funktion funktioniert das Theme nicht als Child Theme. Nur Child Themes enthalten diese Zeile.

Füge dies dem Stylesheet deines Themes hinzu und bearbeite es, um deine eigenen Details anstelle von meinen hinzuzufügen. Du musst die Zeile Template: bearbeiten, um den Ordner hinzuzufügen, in dem dein vorhandenes Theme gespeichert ist, da dies dein Parent Theme sein wird.

Speicher nun die Datei. Wenn du dir jetzt den Bildschirm mit den Themedetails auf deiner Website ansehen würdest, würdest du all dies sehen:

Das sieht nicht besonders gut aus, weil es kein Screengrab gibt. Dies ist ein Bild, das eine Vorstellung davon vermittelt, wie das Theme aussehen wird. Wenn sich dein Theme optisch nicht stark vom Parent Theme unterscheidet, kopiere einfach die screenshot.png-Datei von deinem Parent Theme in dein Child Theme.

Die Funktionsdatei

Der nächste Schritt ist das Hinzufügen einer Funktionsdatei zu deinem Child Theme. Du brauchst dies, damit du das Stylesheet aus dem Parent Theme in die Warteschlange stellen kannst. Ohne sie hätte deine Website überhaupt kein Styling und würde in etwa so aussehen:

Nicht gut, ich bin sicher, da wirst du mir zustimmen! Also fügen wir das Styling hinzu, damit es so aussieht, wie es soll.

Füge in deinem Child Theme Ordner eine Datei namens functions.php hinzu. Öffne sie und füge diesen Code hinzu:

<?php
/* enqueue script for parent theme stylesheeet */        
function childtheme_parent_styles() {
 
 // enqueue style
 wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );                       
}
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

Das verwendet die Funktion wp_enqueue_style(), um das Stylesheet aus dem Parent Theme einzufügen, wobei die Funktion get_template_directory_directory_uri() ermittelt, wo diese Datei gespeichert ist. Die Funktion befindet sich innerhalb einer von mir erstellten Funktion namens kinsta_parent_styles(), die an den wp_enqueue_scripts hook angeschlossen ist.

Du fragst dich vielleicht, warum es eine Funktion namens wp_enqueue_scripts und nicht wp_enqueue_styles verwendet. Dies liegt daran, dass wp_enqueue_scripts sowohl für Skripte als auch für Styles verwendet wird und es keinen solchen Hook wie wp_enqueue_styles gibt.

Du kannst meinen Code bearbeiten, um dem Namen deiner Funktion ein eigenes Präfix hinzuzufügen. Ich habe „childtheme“ als Präfix verwendet, um sicherzustellen, dass meine Funktion nicht mit anderen Funktionen des Parent Themes oder von Plugins kollidiert.

Speichere nun deine Datei.

Wie man sein WordPress Child Theme aktiviert

Sobald dein Child Theme fertig ist, musst du es aktivieren. Wenn du besorgt bist, dass die Aktivierung des Child Themes das Parent Theme ausschaltet, mach dir keine Sorgen: WordPress wird wissen, dass es die Dateien des Parent Themes verwendet, es sei denn, du fügst neue Dateien zum Child Theme hinzu, die sie überschreiben. Bisher hast du dem Child Theme keine zusätzlichen Dateien oder Funktionen hinzugefügt, so dass deine Seite genau so funktioniert, wie sie es bei aktiviertem Parent Theme tun würde.

Denke daran: Probiere dies zuerst auf deiner Entwicklungs- oder Staging-Seite aus. Aktiviere dein Child Theme erst dann auf deiner Live-Site, wenn du es getestet haben.

Gehe im WordPress-Administrator zu Erscheinungsbild > Themes. Du findest dein Child Theme unter den Themes, die auf deiner Website installiert sind.

Fahre mit der Maus über das Theme und klicke auf die Schaltfläche Aktivieren. Dadurch wird dein Child Theme aktiviert. Wenn du jetzt deine Live-Seite besuchst, wird sie genauso aussehen wie vorher:

Es sieht genauso aus, weil du noch keine Anpassungen vorgenommen hast. Aber du hast jetzt ein funktionierendes Child Theme. Gut gemacht!

Wie man ein Child Theme in WordPress anpasst

Jetzt, da du ein funktionierendes Child Theme für deine WordPress-Seite hast, ist es an der Zeit, deine Anpassungen hinzuzufügen. Hier zeige ich dir, wie du Vorlagendateien hinzufügst, um die Dateien in deinem Parent Theme zu überschreiben, wie du Styling in dein Child Theme einfügen kannst und wie du neue Funktionen hinzufügen kannst.

Beginnen wir mit Vorlagendateien.

So fügst du Vorlagendateien zu deinem WordPress Child Theme hinzu

Wir haben bereits untersucht, wie WordPress die Vorlagendatei auswählt, die bei der Anzeige von Inhalten auf deiner Website verwendet werden soll. Es gibt zwei Dinge, die man sich merken sollte:

• WordPress verwendet die Datei, die in der Hierarchie an erster Stelle steht, entweder vom Child oder vom Parent Theme.
• Wenn eine Vorlagendatei (oder ein Vorlagenteil wie header.php) mit dem gleichen Namen sowohl im Paren als auch im Child Theme existiert, verwendet WordPress diejenige aus dem Child Theme.

Um Anpassungen hinzuzufügen, ist es für mich einfacher, zunächst eine Kopie der relevanten Datei aus dem Parent Theme zu erstellen, diese dem Child Theme hinzuzufügen und sie dann zu bearbeiten.

Dies gilt sowohl, wenn die Datei in deinem Child Theme die gleichnamige Datei wie im Parent Theme ist, als auch, wenn es sich um eine neue Datei zum Anzeigen eines anderen Inhaltstyps oder eines höheren in der Hierarchie handelt.

Wenn ich also eine neue Version von page.php zu meinem Child Theme hinzufüge, die die page.php in meinem Parent Theme überschreibt, werde ich page.php von meinem Parent Theme zu meinem Child Theme kopieren und es dann bearbeiten. Stelle sicher, dass du die Datei kopierst: Verschiebe sie nicht, da du keine Änderungen am Parent Theme vornehmen möchtest.

Und wenn ich zum Beispiel eine benutzerdefinierte Seitenvorlage in meinem Child Theme möchte, kopiere ich page.php in mein Child Theme, benenne es um und bearbeite es dann.

Auf diese Weise kannst du sicherstellen, dass alle Aspekte der Datei, die du nicht anpassen musst, weiterhin korrekt funktionieren. Gleiches gilt für Vorlagenteile.

Wie man Styling zu deinem WordPress Child Theme hinzufügt

Man kann auch Styling in die Datei style.css des Child Themes einfügen, wodurch das Styling im Stylesheet des Parent Themes ergänzt oder überschrieben wird.

WordPress ruft zuerst das Stylesheet aus dem Parent Themes auf und dann das Stylesheet aus dem Child Theme. Das bedeutet, wenn du dem Child Theme, das auf das/die gleiche(n) Element(e) wie das Styling im Parent Theme abzielt, Styling hinzufügst, wird das Styling vom Parent Theme überschrieben, solange du den/die gleichen Selektor(en) benutzt.

Stelle dir zum Beispiel vor, du möchtest die Farbe des Seitentitels ändern. Im Parent Theme könnte dies in etwa so aussehen:

h1.site-title {
 color: #000;
}

Um dies in deinem Child Theme zu überschreiben, würdest du dies hinzufügen:

h1.site-title {
 color: #303030;
}

Da der Browser dies nach dem Styling im Parent Theme feststellen wird, überschreibt er dies und wird stattdessen verwendet.

Wie man Funktionen zu deinem WordPress Child Theme hinzufügt

Du hast also ein Child Theme in WordPress erstellt, nicht weil du eine der Vorlagendateien bearbeiten möchtest, sondern weil du zusätzliche Funktionen hinzufügen oder eine oder mehrere der Funktionen im Parent Theme überschreiben möchtest.

Das Schreiben von Funktionen in deinem Child Theme ist etwas komplizierter als das Hinzufügen von Vorlagendateien, aber es ist möglich.

Wenn du eine neue Funktion hinzufügen möchtest, die nicht mit einer der Funktionen in deinem Parent Theme interagiert, kannst du einfach weitermachen und das tun. Füge einfach die Funktion der Datei functions.php in deinem Child Theme hinzu, hänge sie an die entsprechende Aktion oder den Filter-Hook und schon kannst du loslegen.

Wenn du jedoch planst, eine Funktion im Parent Theme zu überschreiben oder zu bearbeiten, musst du verstehen, mit welchen Methoden du dies tun kannst. Es gibt drei Möglichkeiten, wie du eine Parent Theme-Funktion in deinem Child Theme überschreiben kannst:

• Wenn das Theme im Parent Theme pluggable ist, schreibst du einfach eine andere Funktion in dein Child Theme mit dem gleichen Namen und WordPress wird diese Funktion anstelle derjenigen im Parent Theme ausführen.
• Wenn du verhindern möchtest, dass die Funktion im Parent Theme überhaupt ausgeführt wird, kannst du eine Funktion in dein Child Theme schreiben, die sie von dem Hook löst, an den sie angehängt ist.
• Wenn du eine Funktion erweitern möchtest, kannst du eine weitere Funktion (mit einem anderen Namen) in deinem Child Theme hinzufügen und sicherstellen, dass sie nach derjenigen im Parent Theme läuft.

Lass uns einen genaueren Blick darauf werfen, wie jeder Schritt abläuft.

Überschreiben einer Pluggable-Funktion

Eine Pluggable-Funktion wird durch die bedingte Prüfung identifiziert, die sie umgibt. Dadurch wird überprüft, ob es eine weitere Funktion mit dem gleichen Namen gibt, die bereits ausgelöst wurde. Wenn ja, wird die Funktion nicht ausgeführt.

WordPress wird Funktionen aus deinem Child Theme vor denen aus dem Parent Theme auslösen. Wenn es auf eine Pluggable-Funktion im Parent Theme trifft und du eine Funktion zu deinem Child Theme mit dem gleichen Namen hinzugefügt hast, wird die Pluggable-Funktion nicht ausgeführt.

Ein Beispiel ist die Funktion, die das Kolophon im Storefront Theme für WooCommerce Seiten ausgibt. Hier ist die Funktion ohne ihren Inhalt:

if ( ! function_exists( 'storefront_credit' ) ) {
 function storefront_credit() {
  // contents for function here
 }
}

Wenn du das überschreiben wolltest, würdest du eine andere Funktion mit dem gleichen Namen schreiben (storefront_credit()) und sie an den gleichen Hook hängen wie im Parent Theme.

Aushängen einer Funktion aus dem Parent Theme

Wenn die Funktion aus dem Parent Theme nicht pluggable ist, kannst du trotzdem verhindern, dass sie ausgeführt wird. Nehmen wir an, dein Parent Theme hat eine Funktion namens parent_function(), die an den init-Hook mit der Priorität 20 angeschlossen ist. Du willst verhindern, dass es läuft, damit du es durch eine eigene Funktion ersetzen kannst.

So könnte die Parent Theme-Funktion aussehen:

function parent_function() {
 //contents of function here
}
add_action( ‘init’, ‘parent_function’, 20 );

Um es zu lösen, würdest du dies in deinem Child Theme kodieren:

function remove_parent_function() {
 remove_action( ‘init’, ‘parent_function’, 20 );
}
add_action( ‘wp_head’, ‘remove_parent_function’ );

Beachte, dass du deine zweite Funktion an den wp_head Hook anschließt, der oben auf jeder Seite ausgeführt wird, und dass du den gleichen Wert für den Prioritätsparameter wie in der Originalfunktion angeben musst. Wenn die ursprüngliche add_action()-Funktion keine Priorität hatte, kannst du diese in der remove_action()-Funktion deines Child Themes weglassen.

Hinweis: Wenn die ursprüngliche Funktion an einen Filter-Hook anstelle eines Action-Hooks angeschlossen wäre, würdest du remove_filter() auf die gleiche Weise verwenden.

Erweitern einer Funktion um eine andere Funktion

Anstatt eine Funktion zu überschreiben oder zu entfernen, kann es manchmal sinnvoll sein, sie zu ergänzen. In diesem Fall würdest du eine neue Funktion mit einem anderen Namen schreiben und sie an den gleichen Hook anhängen.

Stellen wir uns vor, es gibt einen Action-Hook für die Fußzeile in deinem Parent Theme namens parent_footer. Jede Funktion, die du an diesem Hook anbringst, läuft an der Stelle, an der sich der Hook befindet.

Im Parent Theme gibt es bereits eine Funktion namens parent_footer_content(), die die Fußzeile füllt. Aber was wäre, wenn du ihm einen Zusatzcode hinzufügen wolltest?

So könnte die Funktion parent_footer_content() im Parent Theme aussehen:

function parent_footer_content() {
 // content of function here
}
add_action( ‘parent_footer’, ‘parent_footer_content’ );

Wenn du nun zusätzliche Inhalte hinzufügen möchtest, würdest du eine Funktion in deinem Child Theme erstellen, die an den gleichen Action-Hook angeschlossen ist, mit einer Priorität, die bedeutet, dass sie nach der ersten Funktion ausgeführt wird. Da die Priorität für die Funktion des Parent Themes nicht festgelegt ist, wird sie standardmäßig auf 10 gesetzt. Du musst also eine höhere Zahl verwenden, damit sie danach abgespielt wird.

function child_footer_extra_content() {
 // contents of function here
}
add_action( ‘parent_footer’, ‘child_footer_extra_content’, 20 );

Dies würde den Code aus der Funktion deines Child Themes nach dem Code aus der Funktion deines Parent Themes hinzufügen.

Wie man Probleme mit Child und Parent Themes behebt

Jetzt weißt du also, wie man ein Child Theme in WordPress erstellt und wie man damit Vorlagendateien überschreibt, zusätzliches Styling hinzufügt und Funktionen zu deiner Website hinzufügt.

Aber was ist, wenn dein Child Theme nicht so funktioniert, wie du es dir vorgestellt hast? Was passiert, wenn der Inhalt nicht so angezeigt wird, wie du es dir wünscht, oder eine Funktion nicht ausgelöst wird?

Verwende diese Checkliste, um Probleme mit deinem Child Theme zu beheben:

1. Überprüfe, ob du dein Child Theme aktiviert hast und ob dein Parent Theme nicht noch läuft. Es ist überraschend leicht, diesen Schritt zu vergessen!
2. Aktualisiere Browser-Cache und den von Plugins auf deiner Website erstellten Cache.
3. Setze wp-debug in der Datei wp-config.php deines Child Themes auf true. Wenn du einen weißen Bildschirm betrachtest, sollte es eine Meldung geben, die dir sagt, welcher Code das Problem verursacht hat und in welcher Datei er sich befindet. Dies wird dir helfen, den Fehler zu identifizieren und welche Datei verwendet wird.
4. Überprüfe den Ausgabecode für deine Seite, deinen Beitrag oder dein Archiv. Finde das Körperelement und sieh nach, welche Klassen es hat. Diese zeigen dir, welche Art von Inhalt du betrachtest, was dir hilft zu erkennen, welche Vorlagendatei verwendet wird. Manchmal liegt es an etwas Unerwartetem. Zum Beispiel verwendet die Haupt-Blog-Seite nie die Datei archive.php, obwohl sie ein Archiv deiner Beiträge anzeigt.
5. Überprüfe, ob deine Dateien korrekt benannt sind. Überprüfe die Vorlagenhierarchie, um sicherzustellen, dass du die richtige Syntax verwendet hast.
6. Wenn du eine Datei aus dem Parent Theme dupliziert und zu deinem Child Theme hinzugefügt hast, prüfe, ob du deine Änderungen gespeichert hast.
7. Wenn eine Funktion zum Überschreiben einer Pluggable-Funktion nicht funktioniert, überprüfe, ob du ihr genau den gleichen Namen wie der Pluggable-Funktion gegeben hast und ob die Funktion im Parent Theme tatsächlich pluggable ist.
8. Wenn eine von dir entfernte Funktion immer noch ausgelöst wird, überprüfe, ob du die richtige Priorität hinzugefügt hast und ob deine Schreibweise mit der Schreibweise der Funktion und dem Hook im Parent Theme identisch ist.
9. Wenn du die Priorität verwendet hast, um eine Funktion zu überschreiben oder zu erweitern, versuche den Prioritätswert zu erhöhen, damit du absolut sicher sein kannst, dass er zuletzt ausgelöst wird. Überprüfe, ob an diesem Hook keine weiteren Funktionen angebracht sind, die deinen Code stören.

Hoffentlich wird dir einer oder mehrere dieser Schritte helfen, das Problem zu identifizieren und es in deinem Child Theme zu beheben. Denke daran: Bearbeite das Parent Theme nie direkt.

Nützliche Tipps für die Arbeit mit WordPress Child Themes

Puh! Child Themes sind ein ziemliches Thema und ein unglaublich wertvolles Feature von WordPress. Ich benutze sie auf jeder Seite, die ich baue.

Um dir zu helfen, die Methoden zu finden, die du verwenden musst, um Child Themes so effektiv wie möglich zu nutzen, hier sind meine Tipps, die dir dabei helfen:

• Wenn du ein Theme von Drittanbietern bearbeiten musst, verwende stattdessen immer ein Child Theme. Auf diese Weise gehen deine Änderungen nicht verloren, wenn du das Theme aktualisierst.
• Jedes Child Theme benötigt ein Stylesheet und eine Funktionsdatei.
• WordPress verwendet die Vorlagenhierarchie, um festzulegen, welche Vorlagendatei bei der Ausgabe von Inhalten verwendet werden soll. Wenn es zwei Dateien mit dem gleichen Namen findet, verwendet es die aus dem Child Theme.
• Du kannst eine Pluggable-Funktion in deinem Parent Theme überschreiben, indem du eine Funktion mit dem gleichen Namen in deinem Child Theme schreibst.
• Du kannst eine Funktion aus dem Parent Theme mit einer Funktion mit remove_action() oder remove_filter() in deinem Child Theme aushaken und dann eine neue Funktion schreiben.
• Du kannst eine Funktion in deinem Parent Theme erweitern, indem du eine Funktion in dein Child Theme schreibst und sie an die gleiche Aktion oder den gleichen Filter-Hook anhängst.
• Vergiss nicht, dein Child Theme zu aktivieren, nachdem du es hochgeladen hast. Und stelle sicher, dass niemand das Parent Theme aus deiner WordPress Installation löscht: Ohne es funktioniert das Child Theme nicht.

Zusammenfassung

Child Themes sind eine nützliche Funktion von WordPress, mit der du ein Design anpassen kannst, ohne den Code direkt zu bearbeiten. Du kannst sie verwenden, um einem Theme zusätzliche Funktionen hinzuzufügen, das Styling anzupassen oder Vorlagendateien zu erstellen/bearbeiten.

Wenn du den obigen Ratschlägen folgst, kannst du in WordPress Child Themes nach bewährten Mustern erstellen und diese für eine Vielzahl von Aufgaben nutzen. Und das alles ohne Verlust deiner Änderungen und Anpassungen, wenn du das Parent Theme aktualisierst.

Rachel McCollin

Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.