Hier erfährst du wie du ein WordPress Child Theme erstellen kannst und dort deine Änderungen speicherst.
Früher oder später hat man den Wunsch Änderungen an einem WordPress Theme vorzunehmen. Dies kann eine neue Funktionalität oder nur eine kleine Änderung am Aussehen sein.
Wenn man diese Änderungen direkt im Parent Theme macht sind alle Änderungen beim nächsten Update des Themes oder beim Wechsel eines Themes verloren.
Bei dieser Schritt für Schritt Anleitung nutze ich das aktuelle Standard Theme „Twenty Seventeen“ und WordPress in Version 4.7, welches im Verzeichnis „wordpress“ installiert ist.
1. Verzeichnis anlegen
Ich gehe davon aus, dass du bereits eine bestehende FTP Verbindung angelegt hast oder lokal auf deine Installation zugreifen kannst.
Navigiere jetzt ins Hauptverzeichnis deiner WordPress Installation und von dort aus über „wp-content“ in das Verzeichnis „themes“.
In diesem Verzeichnis liegen alle momentan verfügbaren und aktivierbaren Themes.
Bei einer WordPress 4.7 Standard Installation sind das momentan die Themes (Verzeichnisse) „Twenty Fifteen“ (twentyfifteen), „Twenty Sixteen“ (twentysixteen) und „Twenty Seventeen“ (twentyseventeen).
Hier erzeugst du jetzt ein neues Verzeichnis und nennst es „twentyseventeen-child“.
2. Stylesheet Datei anlegen
Wechsle jetzt in das neu angelegte Verzeichnis „twentyseventeen-child“ und lege dort eine Datei „style.css“ an.
Kopiere dir den Stylesheet Header aus der „style.css“ des Parent Theme. Diese befindet sich in unserem Fall im Verzeichnis „twentyseventeen“.
Der Stylesheet Header ist übrigens der obere Teil der CSS Datei, welcher zwischen den Kommentar Zeichen /* und */ steht.
Alternativ kannst du natürlich auch gleich die ganze CSS Datei kopieren und den nicht benötigten CSS Code entfernen.
Das ganze sieht dann so aus:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* Theme Name: Twenty Seventeen Theme URI: https://wordpress.org/themes/twentyseventeen/ Author: the WordPress team Author URI: https://wordpress.org/ Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentyseventeen Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready 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. */ |
3. Stylesheet anpassen
Die Werte einiger Zeilen müssen jetzt angepasst oder können gleich ganz entfernt werden.
Theme Name (Pflichtfeld)
Den Namen des Child Themes änderst du auf „Twenty Seventeen Child“. Dieser Name wird später im Bereich Theme Auswahl angezeigt. Dieser Name muss eindeutig sein.
Description (optional)
Hier kannst du eine kurze Beschreibung hinterlassen, welche Funktionalitäten und Änderungen dein Child Theme bewirken sollen.
Version (optional)
Dies zeigt die Version deines Child Theme und wird gern benutzt um JS oder CSS Dateien zu versionieren, damit sie bei einer Änderung nicht aus dem Cache geladen werden.
License und License URI (optional)
Obwohl es funktional gesehen keine Pflichtfelder sind solltest du sie aus lizenztechnischen Gründen nicht entfernen.
Text Domain (optional)
Falls du eine Übersetzung anbieten willst solltest du auch eine Text Domain eintragen. Ich lasse es hier weg.
Tags (optional)
Die Header Tags zeigen welche Funktionalitäten das Theme hat. Ist eigentlich nur für das Parent Theme notwendig und kann weg.
Template (Pflichtfeld)
Diese Zeile kommt neu hinzu und erhält als Wert den Verzeichnisnamen des Parent Theme. Dies wäre hier also „twentyseventeen“.
Das ganze sieht jetzt so aus:
|
1 2 3 4 5 6 7 8 |
/* Theme Name: Twenty Seventeen Child Description: Trage hier deine Beschreibung ein. Version: 1.0.0 Template: twentyseventeen License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ |
4. functions.php anlegen
Dieser Schritt ist optional. Aber wenn du auch Funktionalitäten ändern willst benötigst du diese Datei. Später kannst du dort deinen PHP Code ablegen.
Erstelle einfach eine leere Datei im Child Theme Verzeichnis und nenne sie functions.php.
Wenn du deine bereits erstellte Stylesheet Datei auch für die Anpassung des Erscheinungsbildes deiner Website nutzen möchtest und nicht nur für die Verwaltung des Child Themes, musst du noch folgenden Code hinzufügen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?php add_action( 'wp_enqueue_scripts', function() { $parent_style = 'twentyseventeen-style'; // name of the parent stylesheet wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); } ); // Hier kannst du weiteren Code hinterlegen ?> |
Dieser bewirkt, dass zuerst das Stylesheet des Parent Theme geladen wird und erst danach dein Stylesheet für das Child Theme.
Somit bleiben deine Änderungen erhalten und werden nicht vom Stylesheet des Parent Theme wieder überschrieben.
5. Screenshot erstellen
Du könntest jetzt noch einen Screenshot deines Themes erstellen und diesen als PNG Datei im Child Theme abspeichern. Dann hast du außer dem Namen noch eine weitere Hilfe bei der Auswahl des Themes. Aber auch das ist optional.
6. WordPress Child Theme aktivieren
Zum Abschluss gehst du in den WordPress Admin unter Design > Themes und aktivierst dein Child Theme. Dies ist jetzt das aktive Theme.
Jetzt kanst du deine gewünschten Änderungen in der style.css oder der functions.php machen ohne dass du Angst haben musst. dass dein Code bei einem Update überschrieben wird.
Schlussfolgerung
Ein WordPress Child Theme erstellen ist kein Hexenwerk und die Vorteile gegenüber Änderungen am Parent Theme liegen auf der Hand.
Falls du anderer Meinung bist oder etwas anzumerken hast kannst du gern einen Kommentar hinterlegen.