Twenty Twenty-One Child-Theme

Die Standard-Themes von WordPress, die Twenty-Reihe, sind immer ein super Start um einen Einblick für die Theme-Entwicklung zu bekommen. Und erst recht eine gute Grundlage um sich seine eigene Website auf einem solchen Theme aufzubauen.

Die Standard-Themes folgen den Richtlinien der offiziellen WordPress Coding Standards und sind konform mit den Webstandards.

Ich selber habe so angefangen Themes anzupassen und finde auch das es kaum einen besseren Weg gibt in das Thema Frontend-Entwicklung einzutauchen und zu lernen.

Mit Hilfe eines Child-Themes kannst du weitreichende Änderungen an einem WordPress Theme (Parent-Theme) machen, ohne das dir nach einem Update all deine Änderungen verloren gegangen sind.

Child-Theme erstellen

Ein WordPress Child-Theme kannst du in 3 einfachen Schritten erstellen.

1. Child-Theme Ordner anlegen

Als erstes musst du einen neuen Ordner unter wp-content/themes anlegen. Diesen Ordner kannst du an sich so benennen wie du es möchtest.

Ich benenne diese Ordner meistens nach dem Parent-Theme und dem Projektname, also z.B. twentytwentyone-ckx. So findest du, in der Ordnerstruktur, schnell das dazugehörige Parent-Theme und es kommt zu keinen Problemen mit anderen Theme-Namen.

Das selbe Vorgehen schlägt übrigens auch das Child Theme Handbuch vor. 😉

Im Download findest du dann auch genau ein solches twentytwentyone-child vor.

2. Die style.css-Datei erstellen

Jetzt legst du eine style.css-Datei an, in dem neu erstellten Ordner, und setzt den folgenden Code in diese ein:

/*
Theme Name: Twenty Twenty-One Child-Theme
Theme URI: https://hejchris.de/blog/twentytwentyone-child-theme
Description: Ein Child-Theme für das WordPress Standard Theme Twenty Twenty-One.
Author: Dein Name
Author URI: https://example.com/
Template: twentytwentyone
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

Diesen Informationsbereich liest WordPress aus und erkennt dadurch automatisch das es sich hierbei um ein Child-Theme für das Twenty Twenty-One handelt.

Theme Name: Name der im WordPress Backend angezeigt wird. Dies ist unabhängig vom Ordner-Name.

Theme URI: Hier findet der Nutzer den Code zum Theme oder die Dokumentation für das Theme.

Description: Hier kannst du eine kurze Beschreibung eingeben damit der Benutzer und auch du wissen was das Theme vom Original unterscheidet.

Author: Hier kannst du deinen Namen als Entwickler einsetzen.

Author URI: Der Link geht dann direkt zu deiner eigenen Website.

Template: Hier gibst du das Parent-Theme an, den Ordner in dem das übergeordnete Theme gespeichert ist. Hier muss wirklich der Ordner-Name stehen und nicht der Name des Themes (Theme Name)! Ohne diesen kleinen Eintrag würde dein Child-Theme nicht funktionieren.

Version: Die Versionsnummer.
Wenn du mehr über die Versionierung unter WordPress wissen möchtest schau dir mal Semantic Versioning an, oder auch diesen kurzen Beitrag dazu.

License: Die Lizenzart, die GNU sein muss.

License URI: Der Link zu Informationen über diese Lizenzart.

Wenn du diesen Kopf innerhalb der style.css-Datei ausgefüllt hast kannst du anfangen deine eigenen CSS-Anpassungen zu programmieren. Damit diese Änderungen aber auch wirklich funktionieren benötigst du noch die functions.php.

3. Die functions.php-Datei erstellen

Mit Twenty Twenty-One benötigst du außerdem eine functions.php-Datei. Diese erstellst du wieder im Verzeichnis des Child-Themes, öffne die neu erstellte Datei in deinem Code-Editor und füge folgenden Code ein:

<?php
/* CSS und Skripte vom Parent-Theme übernehmen */
   
function twentytwentyone_styles() {
	wp_enqueue_style( 'child-style', get_stylesheet_uri(),
	array( 'twenty-twenty-one-style' ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');

Da das Twenty Twenty-One-Theme get_template_directory() verwendet, um sein Stylesheet zu laden, musst du das Stylesheet des Child-Themes mit wp_enqueue_scripts übernehmen.

Wenn du jetzt alles gespeicherst hast, öffnest du dein WordPress-Dashboard, gehst zu Design → Themes und aktivierst das Child-Theme von Twenty Twenty-One.

Child-Theme downloaden

Wenn dir die Anleitung zu lange dauert kannst du dir das Child-Theme hier direkt downloaden und installieren.


Twenty Twenty-One Child-Theme (1488 Downloads )

Ich hoffe die Anleitung konnte dir weiterhelfen. Wenn es Probleme gab dann schreib mir das sehr gern in die Kommentare.

Ansonsten wünsche ich viel Spaß beim ausprobieren 😉👍


Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert