Kurzanleitung zum Erstellen und Anpassen eines untergeordneten WordPress-Themes

Während die Themenentwicklung überwältigend erscheinen kann, sind untergeordnete Themen einfach einzurichten und eine viel schnellere Alternative zur Entwicklung eines Themas von Grund auf neu.

In diesem Beitrag werde ich weitere Details zu WordPress-Child-Themes sowie zur effizienten Erstellung und Anpassung eines solchen teilen.

Was ist ein WordPress-Child-Theme?

Bevor Sie definieren, was ein untergeordnetes WordPress-Theme ist, ist es wichtig, zunächst zu verstehen, was ein WordPress-Theme ist und woher WordPress Informationen bezieht, um das Design einer Website anzuzeigen.

Gemäß dem WordPress-Codex „ist ein Thema eine Sammlung von Dateien, die zusammenarbeiten, um eine grafische Benutzeroberfläche mit einem zugrunde liegenden einheitlichen Design für ein Weblog zu erstellen. Ein Thema ändert die Art und Weise, wie die Daten angezeigt werden, ohne die zugrunde liegende Software zu ändern.“

Wenn Ihre WordPress-Site über ein einzelnes aktives Design mit allen erforderlichen Vorlagen und Assets verfügt, gibt es keinen Unterschied zwischen dem übergeordneten oder dem untergeordneten Design.

Wenn Sie jedoch entscheiden, dass Ihnen ein gefundenes Theme wirklich gefällt, Sie aber ein paar Änderungen daran vornehmen möchten, ohne ein Theme von Grund auf neu zu erstellen, können Sie ein untergeordnetes WordPress-Theme erstellen, um diesen Zweck zu erfüllen.

Ein untergeordnetes Design erbt die Struktur des ursprünglichen Designs und enthält nur die Anpassungen, die Sie daran vornehmen. Anstatt ein Theme vollständig zu ersetzen, modifiziert oder ergänzt das Child-Theme die Dateien des bestehenden Themes.

Auf diese Weise wird beim Laden Ihrer Website für einen Besucher das ursprüngliche Design des Designs geladen, jedoch mit den Änderungen, die Sie daran vorgenommen haben.

Kinder im wirklichen Leben – und nicht in der Online-Welt – sind auf mindestens eine Elternfigur angewiesen, um zu leben. In ähnlicher Weise ist ein untergeordnetes Thema auf das ursprüngliche Thema angewiesen, um zu funktionieren.

Wenn Sie ein untergeordnetes Thema verwenden, wird das ursprüngliche Thema daher als übergeordnetes Thema bezeichnet.

Anders als ein menschliches Kind ist ein Child-Theme kein vollständiges Thema an und für sich. Das bedeutet, dass das Parent-Theme installiert werden muss, bevor Sie das entsprechende Child-Theme aktivieren können.

Das perfekte Child Theme und wann man es verwendet

Jedes Thema kann ein übergeordnetes Thema sein, einige sind jedoch besser dafür geeignet.

Wählen Sie ein Thema, das Ihnen gefällt, das ein paar kleine strukturelle Anpassungen an Ihre Bedürfnisse anpassen könnte, aber das bietet nicht die Optionen, um die gewünschten Anpassungen sofort vorzunehmen.

Beispielsweise wurde das Perfect Magazine-Thema als übergeordnetes Thema verwendet, um das Newsliner-Child-Theme zu erstellen, um nicht nur einige Farben im Design zu ändern, sondern auch ein Werbebanner zu entfernen, während oben auf der Seite ein Blogpost-Karussell hinzugefügt wurde.

Diese Art von Anpassungen sind in den Optionen von Perfect Magazine nicht möglich, aber sie sind nicht groß genug, um die Erstellung eines brandneuen Themas von Grund auf zu rechtfertigen.

Warum ein Child-Theme erstellen?

Untergeordnete WordPress-Themes sind wichtig, um die gesamte Arbeit, die Sie in eine Website gesteckt haben, zu speichern und zu erhalten. Wenn Sie ein Design direkt ändern und es dann mit einer neuen Softwareversion aktualisieren, gehen alle Ihre Änderungen und Anpassungen verloren.

Aus diesem Grund entscheiden sich viele Website-Besitzer dafür, ihr übergeordnetes Thema überhaupt nicht zu aktualisieren. Aber es ist ein ernstes Sicherheitsproblem, da 54 % der gehackten WordPress-Seiten veraltete Software hatten, die Hacker und Malware oft scannen, um sie zu finden.

Außerdem enthalten Updates oft Schwachstellenkorrekturen, sodass das Ignorieren eines Updates bedeutet, dass Ihre Website für Angriffe offen bleibt.

Alternativ können Sie ein untergeordnetes Thema erstellen, um diese Fallstricke zu vermeiden.

Wie bereits erwähnt, kann die Verwendung eines WordPress-Child-Themes auch die Entwicklung beschleunigen.

Da die Dateisysteme und wesentlichen Elemente einer Site bereits eingerichtet sind, müssen Sie nicht bei Null anfangen. Sie können auf einem bereits vorhandenen Thema aufbauen und die Funktionalität nutzen, während Sie das Design anpassen.

Erste Schritte mit einem WordPress Child Theme

Es gibt ein paar Schlüsselelemente, die Sie benötigen, um ein untergeordnetes Thema zu erstellen:

1. Ein Themenverzeichnisordner
2. Eine style.css -Datei
3. Eine functions.php -Datei

Während die einzige erforderliche Datei in einem untergeordneten Design style.css ist, wird die Datei functions.php benötigt, um das Stylesheet des übergeordneten Designs korrekt einzureihen.

Es wird daher dringend empfohlen, eine functions.php -Datei in Ihrem untergeordneten Design zu erstellen, um Fehler zu vermeiden.

Erstellen eines WordPress-Child-Themes

Beim Erstellen Ihres untergeordneten WordPress-Themes gibt es vier Schritte, die unten im Detail beschrieben werden: Erstellen eines Verzeichnisordners, Erstellen eines Stylesheets, Einreihen der neuen und übergeordneten Stylesheets und Aktivieren des Designs.

Erstellen eines Verzeichnisordners

Alle Themes befinden sich im Ordner /wp-content/themes/ deiner WordPress-Installation.

Navigieren Sie zu diesem Verzeichnis und erstellen Sie einen neuen Ordner, der als untergeordneter Themenordner dient.

Normalerweise wird das Design mit dem Namen des übergeordneten Designs umbenannt, aber am Ende mit -child versehen .

Die beiden Dateipfade lauten beispielsweise /wp-content/themes/yourtheme/ und /wp-content/themes/yourtheme-child/ .

Der Name des Child-Themes darf auch keine Leerzeichen enthalten.

Dies sind zwar keine festen und schnellen Regeln für die Benennung Ihres Ordners, insbesondere wenn Sie das Design nicht zur öffentlichen Nutzung verteilen, aber es ist eine gängige WordPress-Entwicklungspraxis, da es bei der Organisation hilft.

Erstellen eines Stylesheets

WordPress-Child-Themes werden oft für ziemlich umfangreiche Designbearbeitungen verwendet, daher ist eine separate style.css erforderlich.

Die Datei enthält alle CSS-Regeln und -Deklarationen, die das Aussehen Ihres Designs beeinflussen.

Erstellen Sie eine style.css -Datei im Stammverzeichnis Ihres neuen Child-Theme-Ordners. Geben Sie dann diese Kopfzeile oben auf der Seite ein:

 /*
 Themenname: Twenty Seventeen Child
 Design-URI: http://example.com/twenty-seventeen-child/
 Beschreibung: Twenty Seventeen Child Theme
 Autor: Jane Doe
 Autoren-URI: http://example.com
 Vorlage: Siebenundzwanzig
 Version: 1.0.0
 Lizenz: GNU General Public License v2 oder höher
 Lizenz-URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags: hell, dunkel, zweispaltig, rechte Seitenleiste, responsives Layout, barrierefrei
 Textdomäne: 27-Kind
*/

Der Header ist ein wichtiger Teil der Datei, da er WordPress grundlegende Details über das Thema mitteilt. Es signalisiert auch, dass es sich um ein untergeordnetes Thema mit einem bestimmten übergeordneten Thema handelt, wie durch den Vorlagenabschnitt angegeben.

Die einzigen Anforderungen für den Header sind der Name des Designs und das Template . Es empfiehlt sich jedoch, den Rest auszufüllen.

Stellen Sie sicher, dass Sie auch alle erforderlichen Details ändern, damit sie korrekt sind. Beispielsweise der Autor und die Autoren- URI sowie Verweise auf Twenty Seventeen, wenn das von Ihnen verwendete übergeordnete Thema ein anderes ist.

Der Abschnitt Tags bezieht sich auf das WordPress-Theme-Verzeichnis. Wenn Sie Ihr Thema dort hochladen möchten, stellen Sie sicher, dass Sie Tags auswählen, die sich auf Ihr Thema beziehen.

Einreihen der Parent- und Child-Theme-Stylesheets

Als nächstes ist es wichtig sicherzustellen, dass das Stylesheet jedes Themes in einem Prozess namens Enqueuing korrekt geladen wird.

Einreihen bedeutet das Hinzufügen eines Elements oder einer Liste von Elementen zu einer Warteschlange für die Datenverarbeitung. In diesem Fall handelt es sich bei der Warteschlange um die Dateien, die Ihre Website laden muss, wenn ein Browser sie anfordert.

Wenn Sie das Einreihen überspringen würden, würde Ihre Website nur aus Ihrem Child-Theme-Stylesheet ziehen und keinen der Stile verwenden, die das Parent-Theme bereitstellt.

Es kann auch wichtig sein zu beachten, dass es möglich ist, die übergeordnete style.css mit der @import- Methode in die Warteschlange einzureihen. Dies wird jedoch aufgrund von Leistungsproblemen nicht mehr empfohlen.

Um die Stylesheets einzureihen, müssen Sie eine functions.php -Datei erstellen, falls Sie dies noch nicht getan haben.

Erstellen Sie dazu eine neue Datei und benennen Sie sie functions.php . Dann. Platziere diesen Code ganz oben:

 <?php

Stellen Sie sicher, dass Sie vor der obigen Zeile keine Leerzeichen einfügen, da dies zu einem Fehler führt.

Fügen Sie in der Datei functions.php den folgenden Code hinzu, um sicherzustellen, dass Ihre Website sowohl die übergeordnete style.css als auch die style.css des untergeordneten Designs in der richtigen Reihenfolge lädt:

 add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Funktion my_theme_enqueue_styles() {

    $eltern_; // Das ist 'twentyseventeen-style' für das Thema Twenty Seventeen.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'Kind-Stil',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
?>

Stellen Sie sicher, dass Sie den übergeordneten Stil , der in der Variablen $parent-style gespeichert wird, so ändern, dass er den Namen Ihres Designs enthält.

Wie vom WordPress-Codex empfohlen, stellt dieser Code sicher, dass die übergeordnete style.css als Abhängigkeit geladen wird, was bedeutet, dass sie für das Laden der style.css des untergeordneten Designs erforderlich ist.

Aktivierung des Child-Themes

Nachdem Sie alle Ihre Dateien gespeichert haben, gehen Sie zu Darstellung > Themen , um Ihr untergeordnetes Thema zu finden, und klicken Sie dann auf die Schaltfläche Aktivieren.

Sie müssen Ihr übergeordnetes Thema nicht zusätzlich aktivieren. Es sollte jedoch immer noch installiert werden und im Ordner /wp-content/themes/ verbleiben.

Der Header-Text in der style.css -Datei deines Child-Themes verbindet die beiden miteinander und verdeutlicht die Beziehung für deine WordPress-Installation.

Nachdem Sie Ihr untergeordnetes Design aktiviert haben, müssen Sie möglicherweise Ihr Menü unter Darstellung > Menüs sowie einige andere Inhalte in den Designoptionen des Customizers erneut speichern, wenn Sie Probleme mit Ihrem Design haben.

Schnelle Anpassungstipps

Bevor Sie mit dem Entwicklungsprozess beginnen, finden Sie unten ein paar Tipps zum Anpassen Ihres untergeordneten WordPress-Themes.

Themenbild

Auf der Seite Darstellung > Themen müssen Sie Ihr eigenes Bild für das Thema einfügen.

Wenn Sie stattdessen etwas einfügen möchten, um das karierte Kästchen zu ersetzen, können Sie eine 880 x 660 PNG-Bilddatei mit dem Namen screenshot.png hochladen.

Legen Sie das Bild im Stammverzeichnis Ihres untergeordneten Themenordners ab. Auf diese Weise weiß die WordPress-Installation, dass sie es als Bild für Ihr Design verwendet.

Überschreiben von Parent-Theme-Dateien

Wenn Sie neue Dateien in Ihr WordPress-Child-Theme einfügen möchten, um alte Komponenten zu überschreiben, kopieren Sie die übergeordnete Datei in das Child-Theme, das Sie dann anpassen können.

Beim Laden der Seite prüft WordPress, ob das Child-Theme Dateien enthält, die dem Parent-Theme entsprechen. Wenn welche gefunden werden, überschreiben sie die Datei des ursprünglichen übergeordneten Designs.

Es braucht kein Dorf

Die Erstellung von untergeordneten WordPress-Themes muss nicht so kompliziert sein, wie es sich anhört. Befolgen Sie die obigen Schritte und seien Sie versichert, dass Ihre Änderungen intakt bleiben. Es wird auch dazu beitragen, dass Ihre Website ein wenig sicherer wird.

Welche Art von Child-Theme möchten Sie erstellen? Konnten Sie es erfolgreich erstellen? Sind Sie dabei auf Schwierigkeiten gestoßen? Fühlen Sie sich frei, Ihre Erfahrungen in den Kommentaren unten zu teilen.