Das Anpassen eines vorhandenen WordPress-Themes ist ein häufiger Bedarf, die direkte Bearbeitung des Themes kann jedoch zu Problemen führen. 

Wenn das Theme aktualisiert wird, werden Ihre Änderungen überschrieben! Eine bessere Möglichkeit besteht darin, ein untergeordnetes Thema zu erstellen, das vom übergeordneten Thema geerbt wird. 

Mit untergeordneten Themes können Sie ein Theme sicher und geschützt ändern und erweitern. 

In dieser ausführlichen Anleitung besprechen wir die Erstellung eines untergeordneten Themes in WordPress. Sie erfahren, welchen Zweck untergeordnete Themes haben, wie Sie eines einrichten und wie Sie es anpassen, um das Design und die Funktionalität des übergeordneten Themes zu überschreiben. 

Mit ein paar Methoden können Sie ein untergeordnetes Theme erstellen und mit der Anwendung Ihrer Änderungen beginnen, ohne die Dateien des übergeordneten Themes zu berühren. 

Also, ohne weitere Umschweife, fangen wir an.

1 Was ist ein Kinderthema?

Ein untergeordnetes Theme ist ein WordPress-Theme, das die Funktionalität eines übergeordneten Themes erbt. Es ermöglicht Ihnen, neue Funktionen zu ändern oder hinzuzufügen, ohne die übergeordneten Theme-Dateien zu ändern. 

Dies ist nützlich, denn wenn Sie die übergeordneten Theme-Dateien direkt ändern, gehen Ihre Änderungen verloren, wenn das Theme aktualisiert wird. 

Mit einem untergeordneten Theme können Sie Änderungen vornehmen, ohne das übergeordnete Theme zu beeinträchtigen, und Updates erhalten, ohne dass Ihre Änderungen verloren gehen.

In diesem Abschnitt werden Sie feststellen, dass wir das übergeordnete Thema erwähnt haben, aber was genau ist es?

2 Was ist ein übergeordnetes Thema?

Ein übergeordnetes Theme ist ein vorgefertigtes Theme, das als Grundlage für eine WordPress-Website dient. Es bietet die Grundstruktur, Layout und Funktionalität der Website. 

Ein übergeordnetes Theme kann durch Hinzufügen oder Ändern seiner Funktionen an die Bedürfnisse einer bestimmten Website angepasst werden. 

Die Verwendung eines übergeordneten Themes kann beim Erstellen einer Website Zeit und Aufwand sparen und einen Ausgangspunkt für Design und Funktionalität bieten.

An dieser Stelle können wir sagen, dass alle WordPress-Themes technisch gesehen übergeordnete Themen sind, es sei denn, sie sind speziell als untergeordnete Themen konzipiert.

Hier ist ein wichtiger Punkt, den Sie beachten sollten: Ein übergeordnetes Thema kann unabhängig voneinander existieren und funktionieren Ein untergeordnetes Thema basiert immer auf einem übergeordneten Thema Bereitstellung der Kernfunktionen und -merkmale.

3 Warum ein Child-Theme verwenden?

Es gibt einige wichtige Gründe, ein untergeordnetes Thema zu verwenden, anstatt ein Thema direkt zu ändern:

• Durch das Erstellen eines untergeordneten Themas werden Ihre Änderungen vor dem Überschreiben geschützt, wenn das Das übergeordnete Thema wurde aktualisiert.
• Es hält übergeordnete und untergeordnete Theme-Dateien getrennt. Dies hilft, Verwirrung zu vermeiden, da die Dateien organisiert sind.
• Mehrere untergeordnete Themen können für unterschiedliche Zwecke verwendet werden, z. B. zum Ändern von Stilen oder Funktionen. Beachten Sie jedoch, dass eine Website jeweils nur ein aktives Thema haben kann.
• Es ist auch eine großartige Möglichkeit, mit der Entwicklung eines neuen vollständigen WordPress-Themes zu beginnen.

Hinweis: Umfangreiche Anpassungen in einem Child-Theme können zu Verwaltungsproblemen führen. Bei größeren Projekten ist es oft besser, ein vollständiges/übergeordnetes Thema basierend auf dem ursprünglichen Thema zu erstellen, als das untergeordnete Thema weiter zu ändern.

4 Voraussetzungen für die Erstellung eines Child-Themes

Bevor Sie ein untergeordnetes Thema erstellen, müssen einige Anforderungen erfüllt sein. 

Zunächst benötigen Sie eine funktionierende WordPress-Installation und ein übergeordnetes Theme, für das Sie ein untergeordnetes Theme erstellen möchten. 

Es ist außerdem hilfreich, HTML, CSS und PHP zu verstehen, da Sie den Code ändern, um das untergeordnete Thema anzupassen. 

Außerdem sollten Sie in der Lage sein, Codefragmente aus anderen Quellen zu kopieren und einzufügen. 

Es wird empfohlen, in einer lokalen Entwicklungsumgebung zu üben, indem Sie Dummy-Inhalte verwenden oder eine Live-WordPress-Site zu Testzwecken auf einen lokalen Server verschieben. Auf diese Weise können Sie Ihr Child-Theme testen, bevor Sie es auf einer Live-Site implementieren.

Schließlich ist es wichtig, eine zu haben Website-Backup für den Fall, dass während des Vorgangs etwas schief geht.

Sobald Sie also alle diese Anforderungen festgelegt haben, können Sie ein untergeordnetes Thema erstellen. Alles, was Sie tun müssen, ist, den in dieser Anleitung beschriebenen Prozess zur Einrichtung des untergeordneten Themes zu befolgen.

Für diese Anleitung verwenden wir jedoch das Standard-WordPress-Theme Twenty Twenty-four.

5 Erstellen eines Child-Themes in WordPress

Nachdem Sie nun das Konzept der Child-Themes verstanden haben, wollen wir uns mit der Erstellung eines Child-Themes in WordPress befassen. 

Wir untersuchen zwei gängige Methoden, aus denen Sie wählen können, je nach Komfortniveau:

5.1 Erstellen eines untergeordneten Themas mithilfe eines Codes

Greifen Sie zunächst über FTP oder einen von Ihrem Hosting-Kontrollpanel bereitgestellten Dateimanager auf Ihre WordPress-Installation zu. Navigieren Sie zu wp-content/themes Verzeichnis und erstellen Sie einen neuen Ordner mit einem eindeutigen Namen für Ihr untergeordnetes Thema. 

Für dieses Tutorial verwenden wir den Namen „mtschild“ für den untergeordneten Theme-Ordner.

Dieses Verzeichnis fungiert als primärer Speicherplatz für Ihre untergeordneten Theme-Komponenten.

Erstellen Sie im untergeordneten Themenordner eine neue Datei mit dem Titel style.css. Diese Datei enthält die wesentlichen Details zum Erkennen und Aktivieren Ihres Child-Themes. Öffnen Sie die Datei style.css und fügen Sie den folgenden Code ein:

Theme Name: MTS Child Theme
Theme URI: https://www.mythemeshop.com/
Description: Child theme for the Twenty Twenty-Four Theme
Author: MyThemeShop
Author URI: https://www.mythemeshop.com
Template: twentytwentyfour
Version: 1.0.0
Text Domain: mtschild

Dieser Code benachrichtigt WordPress darüber, dass Ihr untergeordnetes Thema das angegebene übergeordnete Thema erweitert. Ersetzen Sie „MTS Child Theme“ durch den Namen Ihres bevorzugten Child Themes und das Vorlagenfeld durch den Ordnernamen des Parent Themes.

Der nächste Schritt besteht darin, sicherzustellen, dass Ihr untergeordnetes Thema Stile vom übergeordneten Thema erbt. Um dies zu erreichen, müssen Sie das Stylesheet des übergeordneten Themes in die Warteschlange stellen.

Greifen Sie dazu auf die Datei „functions.php“ in Ihrem untergeordneten Theme-Verzeichnis zu (erstellen Sie eine, falls diese nicht vorhanden ist) und implementieren Sie einen der folgenden Codes.

Wenn Ihr übergeordnetes Theme kein Stylesheet lädt, verwenden Sie den folgenden Code, um style.css über Functions.php zu laden:

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
wp_enqueue_style( 'mts_child_theme-style', get_stylesheet_uri() );
}

Dieser Code kann auch funktionieren, wenn das übergeordnete Theme nur sein Stylesheet lädt. 

Wenn das übergeordnete Theme jedoch nur das Stylesheet des aktiven Themes lädt, müssen Sie zusätzlich das Stylesheet des übergeordneten Themes über in die Warteschlange stellen functions.php Verwenden Sie den folgenden Code:

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
	wp_enqueue_style( 'mts-child-theme-parent-style', get_parent_theme_file_uri( 'style.css' ) );
}

Für das in diesem Handbuch verwendete Theme „Twenty Twenty-Four“ wenden wir den ersten Code an, da das Theme überhaupt kein Stylesheet lädt. 

Denken Sie daran, mit dem zu beginnen <?php Tag beim Hinzufügen des Codes. Ändern Sie diese Codes entsprechend Ihren Anforderungen, insbesondere den Themennamen mts_child_theme wird benutzt.

Sobald Sie die oben genannten Schritte ausgeführt haben, melden Sie sich wieder bei Ihrem WordPress-Dashboard an und fahren Sie fort Aussehen → Themen. Bewegen Sie den Mauszeiger über das untergeordnete Thema und klicken Sie auf Mehr erfahren .

Da Sie noch keine Änderungen an Ihrem untergeordneten Thema vorgenommen haben, behält Ihre Website die Funktionalität und das Erscheinungsbild des übergeordneten Themas bei. 

Wir werden Sie jedoch bei der Anpassung des untergeordneten Themas unterstützen, um Sie auf weitere Änderungen vorzubereiten.

Dies ist der manuelle Prozess zum Erstellen eines untergeordneten Themas mithilfe von Code in WordPress. Wenn Ihnen diese Methode komplex erscheint, können Sie den Plugin-Ansatz erkunden, den wir im nächsten Abschnitt behandeln.

5.2 Erstellen eines untergeordneten Themas mithilfe eines Plugins

Das Erstellen eines Child-Themes mit einem Plugin ist einfach und unkompliziert. Zuerst müssen Sie das installieren und aktivieren Konfigurator für untergeordnete Themen Plugin. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung unter Wie installiere ich ein WordPress Plugin?.

Sobald das Plugin aktiviert ist, gehen Sie zum WordPress-Dashboard und navigieren Sie zu Extras → Untergeordnete Themen.

Auf dem Wählen Sie eine Registerkarte „Übergeordnetes Thema“ aus. Wählen Sie das übergeordnete Thema aus dem Dropdown-Menü für die Erstellung des untergeordneten Themas aus. Normalerweise ist das aktive Thema auf Ihrer Website vorausgewählt.

Danach klicken Sie auf die Analysieren Taste. Das Plugin prüft das ausgewählte übergeordnete Thema, um festzustellen, ob es ein untergeordnetes Thema generieren kann und ob für die Darstellung die Datei „style.css“ erforderlich ist.

Als nächstes weisen Sie Ihrem Child-Theme einen Namen zu. Sie können das Stylesheet, die Funktionen und andere Konfigurationen nach Ihren Wünschen anpassen. 

Ändern Sie die Einstellungen jedoch erst, wenn Sie Abschnitt 7 erreichen.

Klicken Sie in Abschnitt 7 auf die Schaltfläche mit der Bezeichnung Klicken Sie hier, um die Attribute des untergeordneten Themes zu bearbeiten.

Von dort aus können Sie die Details Ihres untergeordneten Themas eingeben.

Wenn Sie ein untergeordnetes Thema manuell erstellen, gehen möglicherweise die Menüs und Widgets des übergeordneten Themas verloren. 

Das Child-Theme-Konfigurator-Plugin kann sie jedoch vom übergeordneten Thema auf das untergeordnete Thema übertragen. 

Wenn Sie damit fortfahren möchten, markieren Sie das Kontrollkästchen in Abschnitt 8. Klicken Sie abschließend auf Neues Child-Theme erstellen Schaltfläche, um das Child-Theme zu erstellen.

Nach Abschluss erstellt das Plugin einen Ordner für Ihr Child-Theme, der die wesentlichen Dateien „style.css“ und „functions.php“ für zukünftige Anpassungen enthält.

Bevor Sie das Theme aktivieren, sehen Sie sich eine Vorschau an, indem Sie oben auf dem Bildschirm auf den Link „Vorschau Ihres untergeordneten Themes anzeigen“ klicken, um sein Erscheinungsbild zu überprüfen und sicherzustellen, dass es Ihre Website nicht beeinträchtigt.

Nachdem Sie überprüft haben, dass alles ordnungsgemäß funktioniert, klicken Sie auf Aktivieren und veröffentlichen Taste. Dadurch wird Ihr Child-Theme auf Ihrer Website live geschaltet.

Sobald Sie Ihr Child-Theme auf Ihrer Website aktiviert haben, ist es an der Zeit, mit der Anpassung zu beginnen. Wir werden dies im nächsten Abschnitt behandeln.

6 So passen Sie Ihr Child-Theme an

Bevor Sie sich mit der Anpassung befassen, identifizieren Sie die Elemente Ihrer Website, die Sie ändern möchten, z. B. Stile, Vorlagen, Funktionen, Widget-Bereiche oder benutzerdefinierte Seitenvorlagen. 

Wenn Sie eine klare Vorstellung von Ihren Zielen haben, wird der Anpassungsprozess rationalisiert. Es gibt verschiedene Methoden zum Anpassen Ihres untergeordneten Themas, darunter:

6.1 Anpassen von Stilen mit CSS

Die style.css-Datei Ihres Child-Themes dient als Plattform zum Optimieren des Erscheinungsbilds Ihrer Website. Hier können Sie benutzerdefinierte CSS-Regeln einfügen, um die Stile des übergeordneten Themes zu ändern oder zu verbessern.

Bevor Sie fortfahren, sind grundlegende Kenntnisse von HTML und CSS erforderlich. 

Sie können das Inspect-Tool Ihres Browsers effektiv nutzen oder Stile direkt aus der style.css-Datei des übergeordneten Themes kopieren.

Um mit Ihrem Browser auf die CSS-Codes einer Webseite zuzugreifen, klicken Sie einfach mit der rechten Maustaste auf die Seite und wählen Sie aus Inspizieren aus den angezeigten Optionen. Dieses Tool zeigt die CSS-Stilcodes an, sodass Sie die Elemente lokalisieren können, die Sie ändern möchten.

Wenn Sie mit der rechten Maustaste klicken und „Inspizieren“ auswählen, teilt sich Ihr Browserbildschirm und zeigt den HTML- und CSS-Code für die Seite an. 

Abhängig von Ihren Browsereinstellungen werden die HTML- und CSS-Details entweder auf der rechten Seite oder am unteren Bildschirmrand angezeigt.

Wenn Sie mit der Maus über verschiedene HTML-Zeilen fahren, hebt der Chrome-Inspektor diese auf der Registerkarte „Elemente“ hervor und zeigt die entsprechenden CSS-Regeln an, die sich auf das hervorgehobene Element beziehen.

Sie können experimentieren, indem Sie das CSS direkt bearbeiten, um eine Vorschau zu erhalten, wie es aussehen wird. Wenn Sie beispielsweise die Hintergrundfarbe der Standard-Homepage des Twenty Twenty-Four-Themas von #f9f9f9 in #6841ea ändern möchten.

Sobald Sie die Hintergrundfarbe im Browser-Inspektor anpassen, ist die Änderung vorübergehend. Um es dauerhaft zu machen, müssen Sie diese CSS-Regel in die style.css-Datei Ihres Child-Themes übertragen:

body {
background-color: #6841ea;
}

Denken Sie nach dem Einfügen des Codes daran, Ihre Änderungen zu speichern. Sie können diesen Vorgang für jedes andere Webseitenelement wiederholen, das Sie anpassen möchten.

Angenommen, Sie möchten die Farben auf Ihrer Website ändern. Wir können Ihnen einige CSS-Codes zur Verfügung stellen, die Ihnen dies ermöglichen.

Um die Textfarbe in Dunkelgrau zu ändern, fügen Sie Ihrer CSS-Datei den folgenden Code hinzu:

body { color: #3b3b3b; } 

Um die Überschriftenfarbe in Blau zu ändern, verwenden Sie den folgenden Code:

h1, h2, h3 { color: #007bff; }

Verwenden Sie für die Hintergrundfarbe der Kopfzeile den folgenden Code:

#header { background-color: #f5f5f5; } /* Light grey background for header */

Und für den Inhaltsbereich verwenden Sie diesen Code, um die Hintergrundfarbe auf Weiß zu setzen:

.site-container { background-color: #fff; } 

Sie können diese CSS-Stile entweder über das Child-Theme-Verzeichnis Ihrer Website oder über Ihr WordPress-Dashboard in die style.css-Datei Ihres Child-Themes kopieren.

Wenn Sie Ihren CSS-Code hinzufügen, ähnelt er diesem Format:

Versuchen Sie nach dem Speichern Ihrer Änderungen, Ihre Website-Seite zu aktualisieren. Wenn die Änderungen nicht angezeigt werden, leeren Sie den Cache Ihres Browsers, um sicherzustellen, dass Sie die neueste Version des CSS anzeigen.

6.2 Überschreiben von Vorlagendateien

Während die CSS-Anpassung das Erscheinungsbild Ihrer Website steuert, bieten untergeordnete Themes eine robustere Funktion: das Überschreiben von Vorlagendateien.

Mit dieser erweiterten Funktion können Sie das Layout umgestalten und Struktur der Seiten Ihrer Website und Elemente. Seien Sie jedoch vorsichtig, da hierfür ein tieferes Verständnis von WordPress-Templating, HTML und PHP erforderlich ist.

Um eine Vorlage zu überschreiben, kopieren Sie die ursprüngliche .php-Datei aus dem übergeordneten Theme-Ordner in Ihr untergeordnetes Theme und behalten Sie dabei den genauen Dateinamen bei. 

Um beispielsweise header.php zu überschreiben, müssen Sie die Datei header.php aus dem Verzeichnis /parent-theme/ kopieren und als header.php in das Verzeichnis /child-theme/ einfügen.

Sie können jetzt die header.php in Ihrem Child-Theme bearbeiten.

Einige gängige Vorlagen zum Überschreiben:

• header.php – Enthält Tag- und Site-Branding, Navigation usw.
• footer.php – Der Abschluss Tag und Markup.
• page.php - Standardvorlage für Seiten.
• single.php – Vorlage für einzelne Beiträge.
• index.php – Homepage-Vorlage.

Sie können beispielsweise footer.php ändern, indem Sie ein benutzerdefiniertes Copyright für Ihre Website anzeigen:

<!-- Modified child footer.php -->

<footer>
  <p>&copy; <?php echo date('Y'); ?> My Company</p>

  <?php if ( is_active_sidebar('footer-1') ) : ?>
    <?php dynamic_sidebar('footer-1'); ?>
  <?php endif; ?>

</footer>

6.3 Erweiterung der Funktionalität

Das functions.php Mit der Datei im untergeordneten Thema können Sie neue PHP-Funktionen, Hooks, Filter und Code einführen, um die Standardfunktionen des übergeordneten Themas zu erweitern.

Diese Flexibilität ermöglicht es Ihnen, benutzerdefinierte Beitragstypen zu registrieren, benutzerdefinierte Widgets zu integrieren, neue Shortcodes zu erstellen, zusätzliche Skripte in die Warteschlange zu stellen und vieles mehr.

Wenn Sie beispielsweise auf Ihrer WordPress-Site einen eigenen Bereich für benutzerdefinierte Widgets wünschen, verwenden Sie den folgenden Codeausschnitt, um einen Widget-Bereich mit dem Namen „Benutzerdefinierter Widget-Bereich“ einzurichten:

function register_custom_widget() {
    register_sidebar( array(
        'name'          => 'Custom Widget Area',
        'id'            => 'custom_widget_area',
        'description'   => 'Add widgets here to appear in the custom widget area',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'register_custom_widget' );

Nachdem Sie diesen Code in der Datei „functions.php“ Ihres untergeordneten Themes gespeichert haben, navigieren Sie zurück zu Ihrer WordPress-Site und greifen darauf zu Aussehen → Widgets. Sie werden feststellen, dass das Widget „Benutzerdefinierter Widget-Bereich“ zur Verwendung verfügbar ist.

7 Häufig gestellte Fragen

8 Zusammenfassung

Das Erstellen eines untergeordneten Themes in WordPress ist eine wertvolle Fähigkeit, die Ihnen dabei helfen kann, Ihre Website anzupassen, ohne das Risiko einzugehen, dass Ihre Änderungen bei Theme-Updates verloren gehen. Auch wenn es zunächst entmutigend erscheinen mag, geben Sie nicht zu schnell auf, wenn Sie Fehler machen. 

Die häufigsten Fehler, auf die Sie stoßen können, sind Syntaxfehler, die dadurch verursacht werden, dass etwas im Code fehlt. Wenn etwas schief geht, können Sie jederzeit von vorne beginnen. 

Wenn Sie beispielsweise versehentlich etwas löschen, das Ihr übergeordnetes Theme benötigt, können Sie die Datei einfach aus Ihrem untergeordneten Theme löschen und von vorne beginnen. 

Denken Sie daran, dass Ihnen die Erstellung eines untergeordneten Themes mit ein wenig Beharrlichkeit die Flexibilität geben kann, Ihrer Website ein einzigartiges Erscheinungsbild zu verleihen und gleichzeitig die Stabilität und Sicherheit Ihres übergeordneten Themes zu wahren.

Probieren Sie es also aus und sehen Sie, welchen Unterschied es für Ihre WordPress-Website machen kann.

Wir hoffen, dass dieser Leitfaden Ihnen dabei geholfen hat, ein untergeordnetes Thema für Ihre Website zu erstellen. Wenn ja, lassen Sie es uns wissen @rankmathseo twittern.

• SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
• PlatoData.Network Vertikale generative KI. Motiviere dich selbst. Hier zugreifen.
• PlatoAiStream. Web3-Intelligenz. Wissen verstärkt. Hier zugreifen.
• PlatoESG. Kohlenstoff, CleanTech, Energie, Umwelt, Solar, Abfallwirtschaft. Hier zugreifen.
• PlatoHealth. Informationen zu Biotechnologie und klinischen Studien. Hier zugreifen.
• Quelle: https://rankmath.com/blog/wordpress-child-theme/