Wenn Du eine Website mit Hilfe von WordPress aufbaust, verwendest Du im Normalfall ein Theme. Dies gibt Dir die benötigten Funktionalitäten und Designvorlagen, um Deine Seite einfach und schnell zu erstellen. Themes für fast jedes Thema und Funktion findest Du hier.
Doch für was benötigt man ein Child Theme?
Wenn Du Dich für ein Theme entschieden hast und anfängst, Deine Website zu gestalten, ist es meistens so, dass Du nicht alles genau so gestalten kannst, wie Du es gerne möchtest. In diesem Fall musst Du individuelle Anpassungen vornehmen. Wenn Du diese im Parent Theme (also dem Original) machst, werden diese mit dem nächsten Update wieder überschrieben. Ein Child Theme erbt sämtliche Style-Eigenschaften und Funktionen des Parten Themes und kann beliebig angepasst werden, ohne dass bei Updates etwas verloren geht. Die Website ladet also zuerst das Style-Sheet der Parent- und danach die Anpassungen aus dem Child Theme.
Vorteile:
- Sämtliche individuellen Anpassungen werden im Child Theme gespeichert und gehen bei einem Update des Themes nicht verloren.
- Wenn etwas mit den Anpassungen schief geht, kann einfach auf die Einstellungen des Parent Themes zurückgegriffen werden.
Nachteile:
- Die Website Performance kann verlangsamt werden, da auf zwei Style Sheets geladen werden müssen. Mehrere Tests haben aber gezeigt, dass dies gar nicht oder kaum Einwirkungen hat.
Wie erstelle ich ein Child Theme?
In den folgenden sechs Schritten erklären wir Dir, wie Du selbst ein Child Theme erstellen und dieses dann auf der Website aktivieren kannst:
Schritt 1 – FTP-Verbindung herstellen
Verbinde Dich per FTP mit deinem Server, auf welcher Du die Website erstellt hast. Dazu benötigst Du die folgenden Login-Daten:
- Server-Name
- FTP-User
- FTP-Passwort
Die Verbindung kannst Du ganz einfach mit Deiner Server- und Client-Software erstellen. Weit verbreitet Softwares sind Filezilla oder Cyberduck.
Schritt 2 – Child-Theme Ordner erstellen
Suche den Ordner „wp-content“ und wähle dann „Themes“. Hier findest Du sämtliche Themes, welche aktuell auf Deinem WordPress installiert sind. Erstelle nun einen neuen Ordner mit dem folgenden Namen: „Themename-Child“
Schritt 3 – style.css Datei anlegen
In diesem Ordner werden nun zwei Dateien angelegt. Als erstes erstellst Du die Style-Datei mit dem Namen „style.css“, in welcher Du dann Deine individuellen Anpassungen vornehmen kannst. In diese Datei kopierst Du dann den folgenden Text ein:
/*
Theme Name: Twenty Fifteen Child
Description: Mein Child Theme
Author: GLA United
Author URI: https://agency.gla-united.com/
Template: twentyfifteen
Version: 1.0
Text Domain: twenty-fifteen-child
*/
Wenn Du für ein anderes Theme als Twenty Fifteen ein Child Theme erstellst, fügst Du bei diesen Stellen jeweils den originalen Theme-Name ein. Achte darauf, dass Du keine Rechtschreibfehler machst. Sonst wird das Style-Sheet nicht geladen. Speichere die Datei und schliesse sie danach.
Schritt 4 – function.php Datei anlegen
Lege nochmals eine neue Datei an mit dem Namen „function.php“ an. Mit dieser Datei legst Du fest, dass die Website als erstes die Styles und Functions des Parent Themes übernimmt und danach erst die Anpassungen aus dem Child Theme lädt. Somit bleibt das originale Theme immer clean und Du kannst jederzeit Updates machen. In dieser Datei fügst Du nun den folgenden Text ein:
<?php
/**
* Child theme stylesheet einbinden in Abhängigkeit vom Original-Stylesheet
*/
function child_theme_styles() {
wp_enqueue_style( ‹parent-style›, get_template_directory_uri() . ‹/style.css› );
wp_enqueue_style( ‹child-theme-css›, get_stylesheet_directory_uri() .’/style.css› , array(‹parent-style›));
}
add_action( ‹wp_enqueue_scripts›, ‹child_theme_styles› );?>
Schliesse die Datei und lade Sie in Deiner FTP-Software hoch.
Schritt 5 – Screenshot erstellen
Wie Du sicherlich schon bemerkt hast, hat jedes Theme sein eigenes „Titelbild“. Damit Du sicher gehen kannst, dass Du auch das richtige Child Theme verwendest, kannst Du ebenfalls einen Screenshot hochladen. Optional kannst Du auch den Screenshot aus dem Parent Theme kopieren und im Child Theme integrieren. Damit WordPress das Titelbild erkennt, nenne es „screenshot.png“.
Dieser Schritt hilft Dir bei der Auswahl, ist aber nicht unbedingt nötig.
Schritt 6 – Child Theme aktivieren
Melde Dich nun auf Deiner Website bei WordpPress an und gehe zu Design -> Themes. Hier wird definiert, welches Theme Du für Deine Website verwendest. Nun sollte das Child Theme zu sehen sein, welches Du ganz einfach aktivieren kannst.
Trouble-Shooting
Falls Du alle Schritte sorgfältig befolgt hast, das Child Theme trotzdem nicht angezeigt wird, dann überprüfe nochmals die style.css Datei. Es ist wichtig, dass man bei „Template“ den korrekten Theme-Namen des Parent Themes verwendet und keine Schreibfehler gemacht hat. Vergewissere Dich ausserdem, dass Du die Änderungen auch aktualisiert und hochgeladen hast.
Wenn Du Hilfe beim Erstellen Deiner Website benötigst, stehen wir Dir gerne zur Verfügung. Melde Die einfach hier.