Child-Themes sind äußerst nützlich, wenn Sie Änderungen an Ihrem gewählten Theme vornehmen möchten. Sie sind der beste Weg, um bestimmte Theme-Funktionen und das Aussehen zu ändern. Unabhängig davon, ob Sie ein kostenloses oder ein Premium-Theme verwenden, sollten Sie immer ein Child-Theme für jede weitere Anpassung oder Modifikation erstellen, die Sie hinzufügen möchten.

In diesem Artikel zeigen wir Ihnen, wie Sie ein Child-Theme erstellen, wie es funktioniert und wie Sie es zum Anpassen Ihrer WordPress-Site verwenden können. Wir werden auch das Konzept der Parent-Themes behandeln und wie sie sich auf die Child-Themes beziehen.

Was ist ein WordPress Child Theme und warum sollten Sie eines erstellen?

Jede Anpassung eines WordPress-Themes birgt gewisse Risiken. Wenn Sie z. B. ein WordPress-Theme installieren und dann etwas im Code ändern, werden mit dem nächsten Update des Themes alle diese Änderungen überschrieben. Das bedeutet nicht nur, dass Ihre Website wieder zu dem wird, was sie war, bevor Sie sie angepasst haben, sondern auch, dass Ihre ganze Arbeit, die Sie mit den Änderungen gemacht haben, umsonst war. Dies gilt natürlich nicht für den Inhalt, den Sie hinzufügen – Texte oder Bilder, die Sie auf Ihrer Website platzieren, werden von den Aktualisierungen nicht beeinflusst.

Daher ist die Verwendung von Child-Themes zum Bearbeiten, Aktualisieren oder Anpassen bestehender WordPress-Themes für jeden, der an der Entwicklung einer WordPress-Website arbeitet, sehr zu empfehlen, da sie eine sichere Möglichkeit bieten, benutzerdefiniertes Design und Code zu erhalten.

Ein Child-Theme stellt einen Satz von Designregeln sowie Funktionen zum Hinzufügen von Funktionalitäten oder zum Ändern des Layouts eines bestehenden Themes dar. Ein Child-Theme ermöglicht es Ihnen also, kleine Aspekte des Erscheinungsbildes Ihrer Website zu ändern, während das Aussehen und die Funktionalität Ihres Parent-Theme erhalten bleiben. Um zu verstehen, wie Child-Themes funktionieren, werden wir zunächst die Beziehung zwischen Parent- und Child-Themes erklären.

Ein Parent-Theme ist ein komplettes WordPress-Theme, das alle WordPress-Dateien und -Ressourcen enthält, die zum Funktionieren des Themes erforderlich sind. Alle Themes, außer Child-Themes, können als Parent-Themes betrachtet werden. Auf der anderen Seite ist ein Child-Theme in WordPress ein Theme, das in Verbindung mit einem Parent-Theme arbeitet und alle Funktionen und den Stil vom Parent-Theme erbt.

Da das Child-Theme die Eigenschaften des Parent-Themes erbt, können Sie seinen Code und sein Layout anpassen, ohne die ursprünglichen Funktionalitäten zu beeinträchtigen. Auf diese Weise werden alle Änderungen, die Sie vornehmen, mit dem Child-Theme gespeichert und Sie laufen nicht Gefahr, sie zu verlieren, wenn das Parent-Theme aktualisiert wird.

Ein weiterer Grund, ein Child-Theme zu verwenden, ist, dass es Ihnen erlaubt, den Überblick darüber zu behalten, was Sie angepasst haben, da die Dateien des Child-Themes von den Dateien des Parent-Themes getrennt sind. Und es kann Ihnen zusätzlichen Schutz bieten, falls Sie unvorhergesehene Bearbeitungsfehler machen.

Erstellen eines WordPress-Child-Themes

Das erste, was Sie tun müssen, wenn Sie Ihr Child-Theme manuell erstellen, ist einen neuen Ordner zu erstellen, in dem Sie seine Dateien aufbewahren werden. Benennen Sie diesen Ordner nach Belieben; es ist üblich, einfach ein -child als Suffix an den Namen des übergeordneten Themas anzuhängen. In unserem Beispiel werden wir diese Methode anwenden und den Ordner des untergeordneten Themes bernd-child nennen. Wenn Sie fertig sind, sollten Sie Ihren Ordner auf dem Server im Verzeichnis /wp-content/themes/ Ihrer WordPress-Site speichern.

Dazu können Sie über Ihren Hosting-Account und die Option Dateimanager auf den Server zugreifen oder sich per FTP mit ihm verbinden. In den folgenden Schritten werden wir FTP und die Client-Software FileZilla verwenden, um eine Verbindung zum Server herzustellen.

Sobald Sie Ihren Ordner hochgeladen haben, können Sie damit fortfahren, ihm zwei wichtige Dateien hinzuzufügen. Das sind die Stylesheet- und Functions.php, ohne die das Child-Theme nicht funktionieren wird. Natürlich können Sie weitere Dateien hinzufügen, aber diese beiden dürfen nicht weggelassen werden.

Stylesheet CSS

Wenn Sie eine Testumgebung (z. B. localhost) oder eine Staging-Site haben, empfehlen wir Ihnen, zunächst den Ordner Ihres Child-Theme dort abzulegen. Und fügen Sie dann die Dateien hinzu, die Sie mit Ihrem benutzerdefinierten Code ändern werden. Auf diese Weise können Sie sicherstellen, dass alles richtig funktioniert, bevor Sie das Child-Theme auf den Live-Server übertragen.

Die erste Datei, die Sie für Ihr Child-Theme erstellen müssen, ist ein Stylesheet. Nennen Sie es style.css (achten Sie auf die Endung, sie muss .css lauten) und öffnen Sie es in Ihrem bevorzugten Texteditor. Geben Sie dann den folgenden Text ein:

/*
Theme Name: Bernd Child
Description: Bernd Child Theme
Theme URI: https://kasamedia.de/
Author: Philipp Masak
Version: 1.0
Text Domain: bernd
Tags: custom-background, two-columns, right-sidebar, custom-menu, editor-style, post-formats, theme-options, translation-ready, accessibility-ready
*/


/* --------- Insert your custom styles on next rows --------- */

Dieser Text stellt keinen Code dar und führt keine Funktion auf Ihrer Website aus oder bietet irgendwelche Funktionalitäten. Er wird mit der Blockkommentar-Syntax von CSS geschrieben und seine einzige Aufgabe ist es, WordPress Informationen über das Thema zu liefern. Dieser Text wird für jedes Theme hinzugefügt, da er WordPress hilft, sie zu erkennen.

Functions.php

Der nächste Schritt bei der Verwendung von WordPress zum Erstellen eines Child-Themes ist das Einfügen einer Funktionsdatei. Dies ist notwendig, damit Sie die Styles des übergeordneten Themes beibehalten können, auch wenn Sie ein neues hinzufügen. Ohne sie wird Ihr Child-Theme überhaupt keine Styles haben.

Sie müssen eine functions.php-Datei im Ordner Ihres Child-Themes erstellen und dann mit einem Texteditor diesen Code eingeben:

?php
/**
* Enqueues child theme stylesheet, loading first the parent theme stylesheet.
*/
function child_theme_enqueue_styles() {

    $parent_style = 'parent-style'; 

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

// Start writing your functions below

der Code verwendet die Funktion wp_enqueue_style (), um das Stylesheet aus dem übergeordneten Thema einzulesen, und die Funktion get_template_directory_uri (), um anzugeben, wo diese Datei gespeichert ist.

Wenn Ihre style.css-Datei CSS-Code enthält, ist es notwendig, diesen über eine Funktion aufzurufen. Wenn Sie ‚parent-style‘ als Abhängigkeit setzen, wird das Stylesheet des Child-Themes danach geladen. Natürlich können Sie diesen Code frei editieren und das entsprechende Präfix für Ihre Funktion hinzufügen.

Sobald Sie den Code an Ihre Bedürfnisse angepasst haben, speichern Sie alle Änderungen an der Datei.

Da wir nun sowohl die Style- als auch die Funktionsdatei vorbereitet haben, können wir einen Blick auf unser Child-Theme werfen. Dies können Sie tun, indem Sie sich in Ihrem WordPress-Dashboard anmelden und zu Darstellung > Themes gehen.