So erstellen Sie ein WordPress Child Theme in 4 einfachen Schritten

Child-Themes sind – wie der Name schon sagt – ein Theme, das Funktionalitäten von einem Parent-Theme ableitet. Das direkte Bearbeiten Ihres WordPress-Themes wird in einigen Fällen nicht empfohlen, z. B. wenn das Thema aktualisiert wird. Wenn ein neues Update eines Designs angewendet wird, können Sie die vorgenommene Anpassung verlieren.

Um die Anpassungen beizubehalten und auch die Updates der Themes zu erhalten, wird empfohlen, ein WordPress-Child-Theme des Parent-Themes zu erstellen, das Sie verwenden möchten. Das Erstellen eines Child-Themes hat einen weiteren Vorteil, dh Ihr Parent-Theme bleibt intakt und frei von jeglicher Bearbeitung.

Untergeordnete Designs befinden sich in einem anderen Ordner als ein übergeordnetes Design, und das untergeordnete Design hängt von den Funktionen des übergeordneten Designs ab, sofern es nicht geändert wird. Wenn Sie auf Ihrer Website ein Child-Theme verwenden, überprüft der WordPress-Kern zuerst die Dateien des Child-Themes. Wenn es nicht geändert wird, führt WordPress die Dateien des übergeordneten Themes aus.

Um das Konzept der Child-Themes in WordPress vollständig zu verstehen, werden wir ein Child-Theme des Twenty Fifteen-Standard-WordPress-Themes erstellen und bestimmte Änderungen vornehmen, um die Idee hinter Child Themes zu verstehen.

Um ein WordPress Child Theme zu erstellen, gehen wir wie folgt vor:

• Erstellen Sie einen Ordner und nennen Sie ihn zwanzigfünfzehn-Kind. Das Anhängen von -Kind wird als bewährte Vorgehensweise angesehen.
• Style.css mit Child-Theme-Informationen und der Datei functions.php erstellen
• Importieren Sie die Vorlage Twenty Fifteen in style.css
• Einreihen von Stylesheets über eine Datei functions.php
• Bearbeiten Sie Vorlagendateien wie single.php

Schritt 1: Erstellen Sie einen untergeordneten Themenordner und fügen Sie style.css hinzu

Der erste Schritt besteht darin, einen neuen Ordner für unser Child-Theme zu erstellen. Nennen Sie es 25-Kind, um sich leicht daran zu erinnern, wo sich unser Child-Thema befindet.

Verbinden Sie sich dazu mit einem FTP-Client wie FileZilla mit Ihrem Server, navigieren Sie zu /public_html/wp_content/themes und erstellen Sie einen neuen Ordner namens twentyfifteen-child

Erstellen Sie in diesem neuen Verzeichnis eine style.css-Datei und fügen Sie die folgenden Informationen ein.

 /*
Themenname: Twenty Fifteen Child
Theme-URI: https://wordpress.org/themes/twentyfifteen/
Autor: das WordPress-Team
Autoren-URI: https://wordpress.org/
Vorlage: fünfundzwanzig
Beschreibung: Kinderthema von TwentyFifteen
Version: 1.3
Lizenz: GNU General Public License v2 oder höher
Lizenz-URI: http://www.gnu.org/licenses/gpl-2.0.html
Schlagwörter: schwarz, blau, grau, pink, lila, weiß, gelb, dunkel, hell, zweispaltig, linke Seitenleiste, festes Layout, responsives Layout, barrierefrei, benutzerdefinierter Hintergrund, benutzerdefinierte Farben, benutzerdefinierte- Header, benutzerdefiniertes Menü, Editor-Stil, Featured-Images, Mikroformate, Post-Formate, RTL-Sprachunterstützung, Sticky-Post, Threaded-Kommentare, Übersetzungsbereit
Textdomäne: fünfundzwanzig-Kind
Dieses Theme ist wie WordPress unter der GPL lizenziert.
Verwenden Sie es, um etwas Cooles zu machen, Spaß zu haben und das Gelernte mit anderen zu teilen.
*/

Die wichtigsten Zeilen, die Sie bearbeiten sollten, sind „Theme Name“ , „Text Domain“ und „Template“ . Da der Theme-Name nicht mit Twenty Fifteen identisch sein kann und wir WordPress in der Vorlage mitteilen, dass dieses Theme das Child-Theme von Twenty Fifteen ist, sollten wir die Dateien aus den Twenty Fifteen-Ordnern aufrufen, wenn sie nicht im Twenty-Fifteen-Child vorhanden sind Mappe. Außerdem sollte die Textdomäne für jedes Thema, das Sie mit Ihrer WordPress-Installation haben, unterschiedlich und einzigartig sein.

Wenn wir nun zu unserem WordPress Admin Dashboard → Aussehen → Thema navigieren, sehen wir, dass Twenty Fifteen Child erschienen ist. Wir können dieses Thema auf unserer Website anwenden.

Da style.css im Child-Theme-Verzeichnis vorhanden ist. WordPress lädt diese style.css und nicht die style.css des Parent-Themes. Jede andere Datei wie index.php , page.php ,functions.php wird aus dem Parent-Theme geladen.

Da in style.css des Child-Themes keine Stile definiert sind , müssen wir die Stile importieren. Die empfohlene Best Practice für den WordPress-Codex besteht darin, die Stylesheets mithilfe der Datei functions.php in die Warteschlange einzureihen.

Schritt 2: Stylesheets in die Warteschlange stellen mit der functions.php

Im Gegensatz zu anderen Dateien lautet die Theorie hinter der Datei functions.php in WordPress Child Themes: WordPress lädt zuerst die functions.php des Child-Themes und initialisiert die darin enthaltenen Funktionen, später führt es auch die functions.php des Parent-Themes aus.

Wie ich bereits erwähnt habe, ist der beste Weg, Stylesheets zu importieren, sie über die Datei functions.php einzureihen.

Erstellen Sie die Datei functions.php in Ihrem Child-Theme-Verzeichnis und fügen Sie den folgenden Code hinzu.

 <?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles');
Funktion enqueue_parent_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri().'/style.css');
}

Dadurch wird das Stylesheet „ style.css “ aus der übergeordneten Themes-Datei aufgerufen . Wenn Sie etwas in den Stylesheets bearbeiten möchten, können Sie diese Regeln in der style.css des Child-Themes hinzufügen.

Schritt 3: Bearbeiten Sie die style.css-Datei des Child-Themes

In WordPress Child Themes können Sie die Stylesheets einfach bearbeiten, indem Sie Regeln in der style.css im Child-Theme-Ordner definieren. Wenn wir beispielsweise die Ankerfarbe ändern möchten, müssen wir nur den folgenden Code in die style.css unseres Child-Themes einfügen

 ein {
Farbe: #D54E21;
Textdekoration: keine;
}

Was hier passiert, ist, dass die style.css-Regel des Child-Themes für „a“ die style.css des Parent-Themes überschreibt , der Rest bleibt intakt.

Schritt 4: Bearbeiten Sie eine Vorlagendatei von single.php

Wir können einzelne Vorlagendateien in den Child-Themes einfach bearbeiten. Wenn wir beispielsweise single.php bearbeiten möchten, müssen wir diese Datei aus dem Ordner des übergeordneten Themes kopieren und in den Ordner des untergeordneten Themes einfügen.

Nehmen wir an, wir möchten den Kommentarbereich von einzelnen Beitragsseiten entfernen. Nachdem wir die Datei in unseren Child-Theme-Ordner kopiert haben, können wir sie bearbeiten und den folgenden Kommentarbereich entfernen.

 // Wenn Kommentare geöffnet sind oder wir mindestens einen Kommentar haben, laden Sie die Kommentarvorlage.
if ( comments_open() || get_comments_number() ):
comments_template();
endif;

Was hier passiert, ist, dass WordPress den Child-Theme-Ordner auf single.php überprüft , wenn er in dem Verzeichnis vorhanden ist, wird es von dort geladen, andernfalls wird auf den Parent-Theme-Ordner zurückgegriffen.

So können wir jede einzelne Vorlagendatei in unseren Designs bearbeiten. Dieser Ansatz ist im Allgemeinen gut, da er unser übergeordnetes Thema intakt hält und das übergeordnete Thema aktualisiert, ohne unsere Anpassung zu verlieren.