So erstellen Sie ein WordPress-Child-Theme (Anfänger-Leitfaden)

Untergeordnete Themes sind einer dieser WordPress-Begriffe, die oft verwendet werden und Anfänger verwirren. Sie haben vielleicht sogar davon gehört und beschlossen, die Erstellung zu überspringen, weil sie so kompliziert erscheinen.

Das verstehen wir. Aber unserer Erfahrung nach können Child Themes Ihnen auf lange Sicht viel Ärger ersparen. Sie schützen Ihre wertvollen Anpassungen, ermöglichen Ihnen Experimente, ohne Ihre Website zu beschädigen, und machen die Aktualisierung Ihres Themes zum Kinderspiel.

Wenn Sie interessiert sind, haben wir in diesem anfängerfreundlichen Leitfaden aufgeschlüsselt, wie ein Child-Theme funktioniert, wie Sie es anpassen und wie Sie Änderungen daran vornehmen können.

Wie funktioniert ein Child Theme und warum brauchen Sie es?

Ein Child-Theme erbt alle Funktionen, Eigenschaften und Stile eines anderen WordPress-Themes. Wenn Sie ein Child-Theme erstellen, wird das ursprüngliche Theme als Parent-Theme bezeichnet.

Die Vererbung umfasst die style.css-Datei des Parent Themes, die den Hauptstil des Themes definiert. Das Child Theme kann seine geerbten Eigenschaften überschreiben oder erweitern, indem es eigene Dateien hinzufügt oder bestehende modifiziert.

Obwohl es möglich ist, Ihr WordPress-Theme anzupassen, ohne ein Child-Theme zu installieren, gibt es mehrere Gründe, warum Sie trotzdem eines benötigen könnten:

• Kind-Themes schützen Ihre Anpassungen während Theme-Updates und verhindern, dass sie überschrieben werden. Wenn Sie das Eltern-Theme direkt ändern, könnten diese Anpassungen beim Update verschwinden.
• Child-Themes ermöglichen es Ihnen, neue Designs oder Funktionen sicher auszuprobieren, ohne das Original-Theme der Website zu beeinträchtigen, ähnlich wie eine Staging-Umgebung.
• Wenn Sie wissen, wie man codiert, können Child-Themes den Entwicklungsprozess effizienter gestalten. Die Dateien eines Child-Themes sind viel einfacher als die eines Parent-Themes. Sie können sich darauf konzentrieren, nur die Teile des Parent-Themes zu ändern, die Sie ändern oder erweitern möchten.

Was tun, bevor Sie ein WordPress Child Theme erstellen

Wir haben viele WordPress-Benutzer gesehen, die begeistert waren, sich mit den technischen Dingen zu beschäftigen, nur um entmutigt zu werden, wenn Fehler auftreten. Wir verstehen das. Deshalb ist es wichtig zu wissen, worauf Sie sich einlassen, bevor Sie ein Child Theme erstellen.

Hier sind einige Dinge, die wir Ihnen empfehlen, bevor Sie mit dieser Schritt-für-Schritt-Anleitung fortfahren:

1. Beachten Sie, dass Sie mit Code arbeiten werden. Zumindest benötigen Sie grundlegende Kenntnisse in HTML, CSS, PHP und optional JavaScript, um zu verstehen, welche Änderungen Sie vornehmen müssen. Mehr dazu erfahren Sie im WordPress Theme Handbook.
2. Wählen Sie ein übergeordnetes Theme, das Ihr gewünschtes Website-Design und Ihre gewünschten Funktionen hat. Finden Sie, wenn möglich, eines, bei dem Sie nur wenige Änderungen vornehmen müssen. Sie können bei Bedarf unsere Checkliste mit Dingen, die Sie tun müssen, bevor Sie WordPress-Themes ändern befolgen.
3. Verwenden Sie eine lokale Website oder eine Staging-Website für die Theme-Entwicklung. Sie möchten keine unbeabsichtigten Fehler auf Ihrer Live-Website erstellen.
4. Sichern Sie Ihre Website zuerst. Wir empfehlen die Verwendung eines Backup-Plugins wie Duplicator, wenn dies Ihr erstes Mal ist.

Es gibt mehrere Möglichkeiten, ein Child Theme aus Ihrem vorhandenen Theme zu erstellen. Eine davon ist mit manuellem Code, während andere ein Plugin erfordern, was für Anfänger viel einfacher ist.

Die erste Methode mag einschüchternd wirken, wenn Sie wenig technische Erfahrung haben. Selbst wenn Sie sich für eine der Plugin-Methoden entscheiden, empfehlen wir dennoch, die manuelle Methode durchzulesen, um sich mit dem Prozess und den beteiligten Dateien vertraut zu machen.

Mit all dem im Hinterkopf, kommen wir dazu, wie man ein Child-Theme in WordPress erstellt. Sie können mit den folgenden Links zu der Methode springen, die Sie bevorzugen:

• Methode 1: Manuelles Erstellen eines Child-WordPress-Themes
• Methode 2: Erstellen eines Child-Classic-Themes mit einem Plugin
• Methode 3: Erstellen eines Child-Block-Themes mit einem Plugin
• Bonustipp: Finden Sie heraus, ob Ihr Theme einen Child-Theme-Generator hat
• So passen Sie Ihr Classic Child Theme an
• So passen Sie Ihr Block-Kind-Theme an
• So bearbeiten Sie die Vorlagendateien eines Child-Themes
• So fügen Sie Ihrem Child-Theme neue Funktionalität hinzu
• So beheben Sie Probleme mit Ihrem WordPress Child Theme

Methode 1: Manuelles Erstellen eines Child-WordPress-Themes

Zuerst müssen Sie in Ihrem WordPress-Installationsordner zu /wp-content/themes/ navigieren.

Sie können dies tun, indem Sie den Dateimanager Ihres WordPress-Hostings oder einen FTP-Client verwenden. Wir finden die erste Option viel einfacher, daher werden wir diese verwenden.

Wenn Sie ein Bluehost-Kunde sind, können Sie sich in Ihr Hosting-Konto-Dashboard einloggen und zum Tab 'Websites' navigieren. Klicken Sie anschließend auf 'Einstellungen'.

Scrollen Sie im Tab „Übersicht“ nach unten zum Abschnitt „Schnelllinks“.

Wählen Sie dann „Dateimanager“ aus.

In diesem Stadium müssen Sie zu Ihrem Website-Ordner public_html gehen und den Pfad /wp-content/themes/ öffnen.

Klicken Sie hier einfach in der oberen linken Ecke auf die Schaltfläche „+ Ordner“, um einen neuen Ordner für Ihr Child-Theme zu erstellen.

Sie können den Ordner beliebig benennen.

Für dieses Tutorial verwenden wir einfach den Ordnernamen twentytwentyone-child, da wir Twenty Twenty-One als übergeordnetes Theme verwenden werden. Wenn Sie fertig sind, klicken Sie einfach auf „Neuen Ordner erstellen“.

Als Nächstes müssen Sie den gerade erstellten Ordner öffnen und auf „+ Datei“ klicken, um die erste Datei für Ihr Child-Theme zu erstellen.

Wenn Sie einen FTP-Client verwenden, können Sie einen Texteditor wie Notepad verwenden und die Datei später hochladen.

Benennen Sie diese Datei „style.css“, da sie das Haupt-Stylesheet Ihres Child-Themes ist und Informationen über das Child-Theme enthält.

Klicken Sie dann auf „Neue Datei erstellen“.

Klicken Sie nun mit der rechten Maustaste auf die Datei style.css.

Klicken Sie danach auf „Bearbeiten“, um einen neuen Tab zu öffnen, wie im Screenshot unten gezeigt.

In diesem neuen Tab können Sie den folgenden Text einfügen und ihn nach Bedarf anpassen:

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

Sobald Sie fertig sind, klicken Sie einfach auf „Änderungen speichern“.

Als Nächstes müssen Sie eine zweite Datei erstellen und sie functions.php nennen. Diese Datei importiert oder registriert die Stylesheets aus den Dateien des übergeordneten Themes.

Sobald Sie das Dokument erstellt haben, fügen Sie den folgenden wp_enqueue-Code hinzu:

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parenthandle = 'twenty-twenty-one-style'; // This is 'twenty-twenty-one-style' for the Twenty Twenty-one theme.
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
        array(), // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );
    wp_enqueue_style( 'custom-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // this only works if you have Version in the style header
    );
}

Sobald Sie fertig sind, speichern Sie die Datei wie im vorherigen Schritt.

Sie haben jetzt ein sehr einfaches Child-Theme erstellt. Wenn Sie in Ihrem WordPress-Admin-Panel zu Darstellung » Themes gehen, sollten Sie die Option Twenty Twenty-One Child sehen.

Klicken Sie auf die Schaltfläche „Aktivieren“, um das Child-Theme auf Ihrer Website zu verwenden.

Methode 2: Erstellen eines Child-Classic-Themes mit einem Plugin

Die nächste Methode verwendet das Plugin Child Theme Configurator. Dieses einfach zu bedienende WordPress-Plugin ermöglicht es Ihnen, WordPress-Child-Themes schnell und ohne Code zu erstellen und anzupassen, funktioniert aber nur gut mit einem klassischen (nicht Block-) Theme.

Das Erste, was Sie tun müssen, ist das WordPress-Plugin installieren und aktivieren. Nach der Aktivierung müssen Sie in Ihrem WordPress-Dashboard zu Werkzeuge » Child Themes navigieren.

Im Tab „Parent/Child“ werden Sie aufgefordert, eine Aktion auszuwählen. Wählen Sie einfach „CREATE a new Child Theme“ (Neues Child-Theme erstellen), um zu beginnen.

Wählen Sie dann ein übergeordnetes Theme aus einem Dropdown-Menü aus. Wir wählen das Hestia-Theme aus.

Klicken Sie danach einfach auf die Schaltfläche 'Analysieren', um sicherzustellen, dass das Theme als Parent-Theme verwendet werden kann.

Als Nächstes werden Sie aufgefordert, den Ordner zu benennen, in dem das Child-Theme gespeichert werden soll. Sie können jeden beliebigen Ordnernamen verwenden.

Darunter müssen Sie auswählen, wo die neuen Stile gespeichert werden sollen: in der primären Stylesheet-Datei oder in einer separaten.

Die primäre Stylesheet-Datei ist die Standard-Stylesheet-Datei, die mit Ihrem Child-Theme geliefert wird. Wenn Sie neue benutzerdefinierte Stile in diese Datei speichern, ändern Sie direkt die Hauptstile Ihres Child-Themes. Jede Änderung überschreibt den Stil des Original-Themes.

Die separate Option ermöglicht es Ihnen, einen neuen benutzerdefinierten Stil in einer separaten Stylesheet-Datei zu speichern. Dies ist nützlich, wenn Sie den ursprünglichen Stil des Themes beibehalten und ihn nicht überschreiben möchten.

Zu Demonstrationszwecken wählen wir die erste Option. Aber wenn Sie kreativer mit Ihren Child-Theme-Anpassungen werden, können Sie diesen Prozess jederzeit wiederholen und die zweite Option wählen.

Weiter unten müssen Sie auswählen, wie auf die Stylesheet-Datei des übergeordneten Themes zugegriffen werden soll.

Wir werden einfach die Standardeinstellung 'Die WordPress-Style-Queue verwenden' beibehalten, da das Plugin dadurch die entsprechenden Aktionen automatisch bestimmen kann.

Wenn Sie zu Schritt 7 gelangen, müssen Sie auf die Schaltfläche „Klicken Sie hier, um die Attribute des Child-Themes zu bearbeiten“ klicken.

Sie können dann die Details Ihres Child-Themes eingeben.

Wenn Sie ein Child-Theme manuell erstellen, verlieren Sie die Menüs und Widgets des Parent-Themes. Der Child Theme Configurator kann diese vom Parent-Theme in das Child-Theme kopieren. Aktivieren Sie das Kontrollkästchen in Schritt 8, wenn Sie dies tun möchten.

Klicken Sie abschließend auf die Schaltfläche „Neues Child Theme erstellen“, um Ihr neues Child Theme zu erstellen.

Das Plugin erstellt einen Ordner für Ihr Child-Theme und fügt die Dateien style.css und functions.php hinzu, die Sie später zur Anpassung des Themes verwenden werden.

Bevor Sie das Theme aktivieren, sollten Sie auf den Link oben auf dem Bildschirm klicken, um es in der Vorschau anzuzeigen und sicherzustellen, dass es gut aussieht und Ihre Website nicht beeinträchtigt.

Wenn alles zu funktionieren scheint, klicken Sie auf die Schaltfläche 'Aktivieren & Veröffentlichen'.

Nun wird Ihr Child-Theme live geschaltet.

In diesem Stadium sieht das Child-Theme genauso aus und verhält sich genauso wie das Parent-Theme.

Methode 3: Erstellen eines Child-Block-Themes mit einem Plugin

Wenn Sie ein Block-Theme verwenden, bietet WordPress mit dem Create Block Theme Plugin eine einfache Möglichkeit, ein Child-Theme zu erstellen.

Zuerst müssen Sie das WordPress-Plugin installieren und aktivieren. Danach gehen Sie zu Darstellung » Block-Theme erstellen.

Wählen Sie hier einfach „Ein Kind von [aktueller Theme-Name] erstellen“ aus.

Füllen Sie als Nächstes die Informationen Ihres Child-Themes aus. Wir verwenden hier Twenty Twenty-Four als Beispiel, daher nennen wir es Twenty Twenty-Four Child.

Wir haben auch eine Beschreibung und einen Autor für das Child-Theme angegeben. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Child Theme erstellen“.

Das Plugin wird nun die WordPress-Theme-Zip-Datei erstellen und in Ihren Admin-Bereich installieren.

Sobald Sie fertig sind, wird Ihre Website dieses neu erstellte Child-Theme automatisch aktivieren. Sie können dies bestätigen, indem Sie zu Darstellung » Themes gehen.

Bonustipp: Finden Sie heraus, ob Ihr Theme einen Child-Theme-Generator hat

Wenn Sie Glück haben, verfügt Ihr WordPress-Theme möglicherweise bereits über eine Funktion zum Erstellen eines Child-Themes.

Wenn Sie beispielsweise Astra verwenden, können Sie zur Website Astra Child Theme Generator gehen. Füllen Sie anschließend einfach den Namen Ihres Child-Themes aus und klicken Sie auf die Schaltfläche „Generieren“.

Ihr Browser lädt dann automatisch Ihr Child-Theme auf Ihren Computer herunter, das Sie dann selbst in WordPress installieren können.

Wir haben auch einige andere beliebte WordPress-Themes gefunden, die einen Child-Theme-Generator haben:

• OceanWP
• Ultra
• Nozama
• Eclipse

So passen Sie Ihr Classic Child Theme an

Technisch gesehen können Sie Ihr Child-Theme ohne Code anpassen, indem Sie den Theme Customizer verwenden. Die dort vorgenommenen Änderungen wirken sich nicht auf Ihr übergeordnetes Theme aus. Wenn Sie sich noch nicht mit dem Programmieren auskennen, können Sie den Customizer gerne verwenden.

Dennoch empfehlen wir auch, das Child-Theme mit Code anzupassen.

Neben dem Erlernen der WordPress-Theme-Entwicklung ermöglicht die Code-Anpassung, dass die Änderungen in den Dateien des Child-Themes dokumentiert werden, was die Nachverfolgung erleichtert. Child-Themes.

Der grundlegendste Weg, ein Child-Theme anzupassen, ist das Hinzufügen von benutzerdefiniertem CSS zur style.css-Datei. Dazu müssen Sie wissen, welchen Code Sie anpassen müssen.

Sie können den Prozess vereinfachen, indem Sie den vorhandenen Code aus dem Parent-Theme kopieren und modifizieren. Sie finden diesen Code mit dem Chrome- oder Firefox-Inspektionstool oder indem Sie ihn direkt aus der CSS-Datei des Parent-Themes kopieren.

Methode 1: Code aus dem Chrome- oder Firefox-Inspektor kopieren

Der einfachste Weg, den CSS-Code zu finden, den Sie ändern müssen, ist die Verwendung der Inspektor-Tools, die mit Google Chrome und Firefox geliefert werden. Diese Tools ermöglichen es Ihnen, das HTML und CSS hinter jedem Element einer Webseite zu betrachten.

Sie können mehr über das Inspektor-Tool in unserem Leitfaden zu den Grundlagen des Inspektions-Elements: WordPress für DIY-Benutzer anpassen lesen.

Wenn Sie mit der rechten Maustaste auf Ihre Webseite klicken und das Element inspizieren, sehen Sie den HTML- und CSS-Code der Seite.

Wenn Sie mit der Maus über verschiedene HTML-Zeilen fahren, hebt der Inspektor diese im oberen Fenster hervor. Er zeigt Ihnen auch die CSS-Regeln an, die mit dem hervorgehobenen Element verknüpft sind, wie hier:

Sie können versuchen, das CSS direkt dort zu bearbeiten, um zu sehen, wie es aussehen würde. Versuchen wir zum Beispiel, die Hintergrundfarbe des Theme-Bodys zu #fdf8ef zu ändern. Suchen Sie die Codezeile, die body { lautet, und darin den Code, der color: lautet.

Klicken Sie einfach auf das Farbwähler-Symbol neben color: und fügen Sie den HEX-Code in das entsprechende Feld ein, wie hier:

Jetzt wissen Sie, wie Sie die Hintergrundfarbe mit CSS ändern können. Um die Änderungen dauerhaft zu machen, können Sie Ihre style.css-Datei im Child-Theme-Verzeichnis öffnen (mit dem Dateimanager oder FTP).

Fügen Sie dann den folgenden Code unter den Informationen des Child-Themes ein, wie hier gezeigt:

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

body {
    background-color: #fdf8ef
}

So sieht es aus, wenn Sie zum WordPress-Adminbereich gehen und Design » Theme-Datei-Editor öffnen:

Wenn Sie ein Anfänger sind und andere Änderungen vornehmen möchten, empfehlen wir Ihnen, sich mit HTML und CSS vertraut zu machen, damit Sie genau wissen, auf welches Element sich jeder Code bezieht. Es gibt viele HTML- und CSS-Spickzettel online, auf die Sie sich beziehen können.

Hier ist die vollständige Stylesheet, die wir für das Child-Theme erstellt haben. Experimentieren Sie gerne damit und ändern Sie sie:

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

.site-title {
color: #7d7b77;
}
.site-description {
color: #aba8a2;
}
body {
background-color: #fdf8ef;
color: #7d7b77;
}
.entry-footer {
color: #aba8a2;
}
.entry-title {
color: #aba8a2;
font-weight: bold;
}
.widget-area {
color: #7d7b77;
}

Methode 2: Code aus der style.css-Datei des übergeordneten Themes kopieren

Möglicherweise gibt es viele Dinge in Ihrem Child-Theme, die Sie anpassen möchten. In diesem Fall kann es schneller sein, einige Codezeilen direkt aus der style.css-Datei des übergeordneten Themes zu kopieren, sie in die CSS-Datei Ihres Child-Themes einzufügen und dann zu ändern.

Der knifflige Teil ist, dass die Stylesheet-Datei eines Themes für Anfänger sehr lang und überwältigend aussehen kann. Sobald Sie jedoch die Grundlagen verstehen, ist es eigentlich nicht so schwer.

Nehmen wir ein reales Beispiel aus dem Stylesheet des Twenty Twenty-One-Übergeordneten Themes. Sie müssen in Ihrem WordPress-Installationsordner zu /wp-content/themes/twentytwentyone navigieren und dann die style.css-Datei in Ihrem Dateimanager, per FTP oder im Theme-Datei-Editor öffnen.

Sie sehen die folgenden Codezeilen:

:root {
/* Colors */
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
--global--color-white-50: rgba(255, 255, 255, 0.5);
--global--color-white-90: rgba(255, 255, 255, 0.9);
--global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */
--global--color-secondary: var(--global--color-gray); /* Headings */
--global--color-primary-hover: var(--global--color-primary);
--global--color-background: var(--global--color-green); /* Mint, default body background */
--global--color-border: var(--global--color-primary); /* Used for borders (separators) */
}

Zeilen 3 bis 15 steuern die Art der Farben (wie Gelb, Grün, Lila), die das gesamte Theme in ihren spezifischen HEX-Codes verwenden wird. Und dann bedeuten Zeilen wie 'global-color-primary' oder 'global-color-secondary', dass dies die primären und sekundären Farben dieses Themes sind.

Sie können diese Codezeilen in die Stylesheet Ihres Child-Themes kopieren und dann die HEX-Codes ändern, um Ihr perfektes Farbschema zu erstellen.

Wenn Sie in der Stylesheet-Datei des Parent-Themes nach unten scrollen, werden Sie feststellen, dass andere Variablen ebenfalls diese Farbvariablen haben können, wie hier:

/* Buttons */
--button--color-text: var(--global--color-background);

Das bedeutet im Grunde, dass alle Button-Texte die gleiche Farbe wie in --global--color-background: deklariert verwenden, nämlich Mintgrün (--global--color-green: #d1e4dd). Wenn Sie den HEX-Wert in --global--color-green: ändern, ändert sich auch die Farbe des Button-Textes.

Sie können auch diesen Tutorials folgen, um mit Ihren Child Theme-Anpassungen zu experimentieren:

• So ändern Sie die Textfarbe in WordPress
• So ändern Sie die Größe Ihres WordPress-Logos (funktioniert mit jedem Theme)
• So passen Sie den Stil von Blockquotes in WordPress-Themes an
• WordPress Body Class 101: Tipps und Tricks für Theme-Designer
• So fügen Sie jedem WordPress-Theme einen Parallax-Effekt hinzu

So passen Sie Ihr Block-Kind-Theme an

Wenn Sie ein Child Block Theme verwenden, werden die meisten Ihrer Anpassungen in Ihrer theme.json-Datei vorgenommen, nicht in der style.css.

Allerdings stellten wir während unserer Tests fest, dass der Prozess kompliziert war. Im Gegensatz zu klassischen Child Themes gibt es eine größere Wissenslücke, die Sie schließen müssen (insbesondere über JSON und wie CSS dort gehandhabt wird), wenn Sie neu in der WordPress-Theme-Entwicklung sind.

Dennoch haben wir eine viel einfachere Alternative mit dem Create Block Theme Plugin gefunden. Dieses Tool kann alle Änderungen aufzeichnen, die im Full Site Editor von WordPress in der Datei child theme.json Ihres Child-Themes vorgenommen werden. Sie müssen also keinen Code anfassen, da das Plugin dies für Sie übernimmt.

Lassen Sie uns Ihnen ein Beispiel zeigen. Öffnen Sie zuerst den WordPress Full Site Editor, indem Sie zu Darstellung » Editor gehen.

Sie sehen mehrere Menüs zur Auswahl.

Wählen Sie hier einfach "Styles" aus.

Auf der nächsten Seite sehen Sie verschiedene integrierte Stil-Kombinationen zur Auswahl.

Für unseren Zweck können Sie all das einfach überspringen und auf das Stiftsymbol klicken.

Versuchen wir nun, einige Teile Ihres Child-Themes zu ändern, z. B. die Schriftarten.

Klicken Sie für dieses Beispiel im rechten Seitenbereich auf „Typografie“.

Als Nächstes sehen Sie einige Optionen, um die globalen Schriftarten des Themes für Text, Links, Überschriften, Bildunterschriften und Schaltflächen zu ändern.

Klicken wir der Demonstration halber auf „Überschriften“.

Ändern Sie im Dropdown-Menü 'Schriftart' die ursprüngliche Auswahl in eine beliebige verfügbare Schriftart.

Passen Sie bei Bedarf das Erscheinungsbild, den Zeilenabstand, den Buchstabenabstand und die Groß-/Kleinschreibung an.

Sobald Sie fertig sind, klicken Sie einfach auf „Speichern“. Danach können Sie neben „Speichern“ auf die Schaltfläche „Block-Theme erstellen“ (das Schraubenschlüsselsymbol) klicken.

Klicken Sie dann auf „Änderungen am Theme speichern“.

Wählen Sie als Nächstes aus, welche Änderungen im Child-Theme gespeichert werden sollen.

Beispiele hierfür sind Schriftarten, benutzerdefinierte Stile, Template-Änderungen und mehr.

Sobald Sie fertig sind, scrollen Sie einfach ganz nach unten in der Seitenleiste.

Klicken Sie dann auf „Änderungen speichern“.

Betrachten wir nun Ihre theme.json-Datei, damit Sie die Änderungen im Code sehen können.

Um dies zu tun, klicken Sie erneut auf die Schaltfläche „Block Theme erstellen“ und wählen Sie „theme.json anzeigen“.

Nachdem Sie darauf geklickt haben, werden Sie sehen, dass die Datei einige neue Code-Ergänzungen enthält.

In unserem Fall enthält die Datei Code, der angibt, dass die Überschriften die Inter-Schriftart mit halbfetter Darstellung, 1,2 Zeilenhöhe, 1 Pixel Zeilenabstand und in Kleinbuchstaben verwenden.

Wenn Sie also Ihr Child-Block-Theme bearbeiten, stellen Sie sicher, dass Sie auf das Schraubenschlüsselsymbol klicken und Ihre Änderungen speichern, damit sie gut dokumentiert sind.

So bearbeiten Sie die Vorlagendateien eines Child Themes

Die meisten WordPress-Themes haben Vorlagen, die Theme-Dateien sind, welche das Design und Layout eines bestimmten Bereichs innerhalb eines Themes steuern. Zum Beispiel wird der Fußbereich normalerweise von der Datei footer.php und der Header von der Datei header.php gehandhabt.

Jedes WordPress-Theme hat auch ein anderes Layout. Zum Beispiel hat das Twenty Twenty-One-Theme einen Header, eine Inhalts-Schleife, einen Widget-Bereich im Footer und einen Footer.

Wenn Sie ein Template ändern möchten, müssen Sie die Datei im Ordner des übergeordneten Themes finden und sie in den Ordner des Child-Themes kopieren. Danach sollten Sie die Datei öffnen und die gewünschten Änderungen vornehmen.

Wenn Sie beispielsweise Bluehost verwenden und Ihr übergeordnetes Theme Twenty Twenty-One ist, können Sie in Ihrem Dateimanager zu /wp-content/themes/twentytwentyone navigieren. Klicken Sie dann mit der rechten Maustaste auf eine Vorlagendatei wie footer.php und wählen Sie „Kopieren“.

Geben Sie danach den Dateipfad Ihres Child-Themes ein.

Wenn Sie fertig sind, klicken Sie einfach auf 'Dateien kopieren'.

Sie werden dann zum Dateipfad weitergeleitet.

Um die Datei footer.php zu bearbeiten, klicken Sie einfach mit der rechten Maustaste darauf und wählen Sie 'Bearbeiten'.

Als Beispiel werden wir den Link „Proudly powered by WordPress“ aus dem Fußbereich entfernen und stattdessen eine Copyright-Notiz hinzufügen.

Um das zu tun, sollten Sie alles zwischen den <div class= "powered-by"> Tags löschen:

<div class="powered-by">
				<?php
				printf(
					/* translators: %s: WordPress. */
					esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
					'<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
				);
				?>
			</div><!-- .powered-by -->

Dann müssen Sie den Code, den Sie unter diesen Tags finden, in das folgende Beispiel einfügen:

<div class="powered-by">
<p>© Copyright <?php echo date("Y"); ?>. All rights reserved.</p>
</div><!-- .powered-by -->

Hier ist, was Sie jetzt im Texteditor sehen sollten:

Speichern Sie die Datei, um die Änderungen offiziell zu machen.

Besuchen Sie danach Ihre Website, um den neuen Copyright-Hinweis zu sehen.

So fügen Sie Ihrem Child-Theme neue Funktionalität hinzu

Die Datei functions.php in einem Theme verwendet PHP-Code, um Funktionen hinzuzufügen oder Standardfunktionen auf einer WordPress-Website zu ändern. Sie fungiert wie ein Plugin für Ihre WordPress-Website, das automatisch mit Ihrem aktuellen Theme aktiviert wird.

Sie werden viele WordPress-Tutorials finden, die Sie bitten, Code-Schnipsel zu kopieren und einzufügen in functions.php. Aber wenn Sie Ihre Modifikationen zum Parent-Theme hinzufügen, werden sie überschrieben, wenn Sie ein neues Update für das Theme installieren.

Deshalb empfehlen wir die Verwendung eines Child-Themes, wenn Sie benutzerdefinierte Code-Snippets hinzufügen. In diesem Tutorial fügen wir unserem Theme einen neuen Widget-Bereich hinzu.

Dies können wir tun, indem wir diesen Code-Schnipsel zur functions.php-Datei unseres Child Themes hinzufügen. Um den Prozess noch sicherer zu gestalten, empfehlen wir die Verwendung des WPCode-Plugins, damit Sie die functions.php-Datei nicht direkt bearbeiten und so das Fehlerrisiko verringern.

Lesen Sie unseren Leitfaden zum einfachen Hinzufügen von benutzerdefinierten Code-Snippets für weitere Informationen.

Hier ist der Code, den Sie Ihrer functions.php-Datei hinzufügen müssen:

// Register Sidebars
function custom_sidebars() {

$args = array(
'id'            => 'custom_sidebar',
'name'          => __( 'Custom Widget Area', 'text_domain' ),
'description'   => __( 'A custom widget area', 'text_domain' ),
'before_title'  => '<h3 class="widget-title">',
'after_title'   => '</h3>',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget'  => '</aside>',
);
register_sidebar( $args );

}
add_action( 'widgets_init', 'custom_sidebars' );

Sobald Sie die Datei speichern, können Sie die Seite Darstellung » Widgets Ihres WordPress-Dashboards besuchen.

Hier sehen Sie Ihren neuen benutzerdefinierten Widget-Bereich, zu dem Sie Widgets hinzufügen können.

Es gibt viele andere Funktionen, die Sie Ihrem Theme mit benutzerdefinierten Code-Snippets hinzufügen können. Schauen Sie sich diese äußerst nützlichen Tricks für die WordPress functions.php-Datei und nützlichen WordPress-Code-Snippets für Anfänger an.

So beheben Sie Probleme mit Ihrem WordPress Child Theme

Wenn Sie noch nie zuvor ein untergeordnetes Theme erstellt haben, ist die Wahrscheinlichkeit groß, dass Sie einige Fehler machen, und das ist normal. Deshalb empfehlen wir die Verwendung eines Backup-Plugins, das Erstellen einer lokalen Website oder einer Staging-Umgebung und die Verwendung von Dummy-Inhalten für Ihre Demoseite.

Alles in allem, gib nicht zu schnell auf. Die WordPress-Community ist sehr einfallsreich, daher gibt es wahrscheinlich bereits eine Lösung für jedes Problem, das du hast.

Für den Anfang können Sie sich unsere häufigsten WordPress-Fehler ansehen, um eine Lösung zu finden.

Die häufigsten Fehler, die Sie wahrscheinlich sehen werden, sind Syntaxfehler, die durch etwas verursacht werden, das Sie im Code übersehen haben. Hilfe bei der Lösung dieser Probleme finden Sie in unserem Schnellleitfaden unter wie Sie Syntaxfehler in WordPress finden und beheben.

Zusätzlich können Sie jederzeit neu beginnen, wenn etwas sehr schief geht. Wenn Sie beispielsweise versehentlich etwas gelöscht haben, das Ihr übergeordnetes Theme benötigte, können Sie die Datei einfach aus Ihrem untergeordneten Theme löschen und neu beginnen.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie man ein WordPress Child Theme erstellt. Vielleicht möchten Sie auch unseren ultimativen Leitfaden zum Testen Ihres WordPress-Themes anhand der neuesten Standards und unseren Vergleichsartikel zu kostenlosen vs. Premium WordPress-Themes lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.