Child Theme für Twenty Twenty-Two

Kind Elefant quert eine Straße in Südafrika

Viele Webseiten nutzen ein Child Theme (Kindthema), um dem Parent Theme (Eltern Thema) weitere Funktionalitäten, Design-Anpassungen oder Templates hinzuzufügen, ohne bei einem Update des Themes alle Änderungen zu verlieren.

Auch bei den neuen Block-Themes – ab Ende Januar 2022 mit WordPress 5.9 – wird schnell das Bedürfnis nach einem Child-Theme entstehen. Hier lernst du am Beispiel des Standard-Themes Twenty Twenty-Two, was zu tun ist.

Voraussetzungen

Stand: 03. Januar 2022

Die Entwicklung der Full-Site-Editing Funktionalitäten ist mit WordPress 5.9 noch nicht am Ende, daher wird sich im Laufe der nächsten ein bis zwei Jahre noch einiges ändern. Also schau bitte immer mal wieder, was sich geändert hat.

Ein brauchbares Plugin habe ich bisher für die Kombination FSE und WP 5.9 (noch)nicht gefunden. Kennt ihr eins, dann schreibt es doch bitte in die Kommentare. Ich werde diesen Artikel dann gerne anpassen.

Was benötigt ein Child Theme bei Block-Themes?

Es muss das Parent-Theme installiert sein. Also in diesem Fall Twenty Twenty-Two.

Die folgenden Dateien bzw. Ordner benötigst du:

Details zu allen Dateien weiter unten.

Technische Voraussetzungen

Du benötigst einen Zugang per FTP um im Dateiverzeichnis die oben genannten Dateien ablegen zu können. Als Programm nutze ich FileZila. Die erforderlichen Zugangsdaten hat dein Hoster für dich.

Außerdem ist ein Programm zu bearbeiten von Codes erforderlich. Die Auswahl ist riesig. Wenn du bist hier hin gelesen hast, hast du sicherlich einen Favoriten. Ich nutze gerne Visual Studio Code.

Lade dir den aktuellen Code des Themes Twenty Twenty-Two hier von Github herunter und speichere ihn auf deiner lokalen Festplatte.

Bzw. den Code, des Themes, das das Parent Theme werden soll.

Die style.css für das Child Theme

Die style.css des Child-Themes ist manuell anzulegen und folgt den “Vorschriften” von WordPress für Kind-Themen.

/*
Theme Name: Twenty Twenty-Two Child
Theme URI: https://github.com/wordpress/twentytwentytwo/
Author: DeinName
Author URI: https://
Description: Child Theme für Twenty Twenty-Two
Requires at least: 5.7
Tested up to: 5.9
Requires PHP: 5.7
Version: 1.1.31
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentytwo
Text Domain: twentytwentytwochild
Tags: Custom Child Theme

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Außerdem habe ich alle Zeilen der Parent style.css ab Zeile 19 angefügt! Hier wird sich im Laufe des oben beschriebenen Vorankommens von WordPress sicherlich noch einiges ändern bzw. vieles wird entfallen. Daher solltest du immer mal wieder schauen. In den Zeilen 19 ff werden aktuell noch offene Tickets der Entwicklung ausgeglichen.

Die theme.json für das Child Theme

Die theme.json kann zum Einrichten des Child-Themes leer bleiben. Dann wird die theme.json des Eltern-Themes herangezogen. Änderungen in der theme.json sollten aber nur in einem Kind-Theme vorgenommen werden.

Du kannst aber auch die komplette theme.json deines Eltern-Themes 1:1 kopieren. Dann werden von diesem Stand aus die gewünschten Anpassungen (vorsichtig ?) vorgenommen. Der Vorteil für dich: Die Struktur der theme.json ist schon vorhanden.

Die template- und parts Ordner

Mein Tipp: hier eine 1:1 Kopie der vorhandenen Ordner machen und ins Child-Theme einfügen. Zunächst startest du so. Alle templates und parts kannst du als Vorlage für deine Änderungen nehmen. Das erleichtert es für dich. Twenty Twenty-Two kommt mit einer großen Anzahl von Templates. Das ist schon toll vorgearbeitet.

Die functions.php

Die functions.php bleibt leer. Möglicherweise möchtest du Blockstile oder Muster hinzuzufügen, dann ist die function.php im Child-Ordner erforderlich.

Oder Du möchtest den “alten” Customizer wieder zur Verfügung haben? Das geht mit einem einfachen Code Snippet in der functions.php. Du findest die Details dazu hier: https://haurand.com/twenty-twenty-two-in-wordpress-5-9-customizer/

Customizer im Child Theme durch Code-Snippet in der functions.php
Customizer mit Code-Snippet in der functions.php.

Die screenshot.png Datei

Dieses Bild wird als Anzeige in Theme-Auswahl gezeigt.

Ein Beispiel für eine Screenshot Media Datei
Zum Download

Der Fonts-Ordner

20-22 arbeitet entweder mit System-Fonts oder wahlweise mit einer lokal gespeicherten Serifenlosen Schrift. Den Font-Type wählst in den Styles. Die Dateien liegen unter “assets” -> “fonts”.

blank

Aktuell habe ich noch keine Erfahrung mit dem Hinzufügen von lokalen Fonts im Twenty Twenty-Two. Hat jemand da schon eine neue Schrift-Type erfolgreich implementiert? Lass es uns gerne wissen.

Die fertige Datei-Struktur

Alle Dateien kommen in einen Ordner, der z.b. twentytwentytwo-child heißt.

Alle oben genannten Dateien müssen in der selben Struktur (Ebene) wie im Eltern-Theme liegen.

Die Ordnerstruktur des Child-Themes für Twenty Twenty-Two
Die Datei- und Ordner-Struktur des neuen Child-Themes

Fertigstellen

Deinen neuen Ordner “twentytwentytwo-child” lädtst du mithilfe von FileZila in deine Ordner “wp-content” -> “themes”

Upload Ordner für das Child Theme

Jetzt noch das Child Theme aktivieren und loslegen. Viel Spaß.

Wie kann ich Dir helfen?

blauer anker Individuelle Schulung

Du möchtest eine individuelle, auf deinen Bedarf abgestimmte Online-Schulung? Für dich und dein Team oder als Einzel-Schulung? Wir besprechen den Inhalt, den Zeitpunkt und die Dauer.

blauer anker Projekt Set-Up

Welches Design wünschst du dir? Woher kommt das Logo? Bei der Auswahl der Domain, Auswahl des Hosters, Auswahl des Themes und der richtigen Plugins berate ich dich gerne.

blauer anker SEO für Anfänger:innen

Damit deine Website im Netz gefunden wird, gibt es Tipps und Tricks, um bei Google oben zu ranken. Die ersten Schritte zur Keyword-Findung, Einstellung von ALT-Texten, SEO-Title und Site-Description.

blank
Veröffentlicht am
Kategorisiert in Themes

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.