Alphasinn Logo

Sinnvolle und effektive Online Marketing Lösungen für Unternehmen & Blogger.

Instagram

Besucht mich auch hier:

Das Child-Theme für Wordpress - Warum du es für deine Website nutzen solltest | alphasinn.at

Das Child-Theme – Warum du es nutzen solltest

Ich nutze WordPress schon seit vielen Jahren und durfte bereits mit den verschiedensten Themes (bzw. Templates) meine Bekanntschaft machen. Vielleicht verwendest du gerade ein Theme für deine Website und bist auch total zufrieden damit aber du würdest gerne ein paar Kleinigkeiten am Design, den Funktionen oder generell am Look der Seite ändern. Glaub mir, ich kenne das nur zu gut. Heute möchte ich dir zeigen wie du mit Hilfe von einem WordPress Child Theme dein Template anpassen kannst ohne dein ursprüngliches Template zu ändern. Warum ich seit Jahren damit arbeite und warum auch du es ab sofort tun solltest erkläre ich dir in diesem Blog-Post.

Warum du mit einem Child-Theme arbeiten solltest

Um zu verstehen wozu man ein Child-Theme benötigt muss man sich schon ein wenig im Backend der Seite und den einzelnen Ordnern und Unterordnern einer Website auseinandersetzen. Wenn man ein neues Template in WordPress installiert wird im Hintergrund der Website unter wp-content » themes ein jeweiliger Ordner mit allen Inhalten deines neuen Templates angelegt. Dieses Template wird auch als parent-theme bezeichnet. Das Child-Theme befindet sich ebenfalls im Ordner wp-content und ist ein eigener Ordner. Darin enthalten sind für gewöhnlich die style.css und die functions.php. Man kann aber auch andere Ordner oder Dateien hinzufügen sofern man diese benötigt.

Mit der genannten .css und .php Datei kannst du dein Theme bereits grundlegend verändern. Von Styling-Anpassungen, verschiedenen Layout-Anpassungen mit Hilfe von Parametern oder programmierten Skripten und Funktionen können alle Änderungen direkt im Child-Theme erfolgen.

Du kannst dir vorstellen das alle Änderungen die im Child-Theme erfolgen, die jeweilige Datei im Parent-Theme quasi überlagern bzw. ergänzen. WordPress nimmt nämlich automatisch alle Einstellungen vom Child-Theme und ergänzt alle fehlenden Funktionen und Styles mit Hilfe des Parent-Themes. Als Ergebnis erhältst du also deine Änderungen im Child-Theme ohne dein Original-Theme verändern zu müssen.

Ein weiterer wichtiger Punkt der für ein Child-Theme spricht

Oftmals haben gekaufte Themes den Vorteil das es Updates gibt. Leider passiert es aber oft das man das eigene Theme updaten will und dann gehen alle zuvor getätigten Änderungen plötzlich verloren. Das Update überschreibt einfach das bestehende Theme und somit auch alle Anpassungen. Mit dem Child-Theme legt man diese ganzen Anpassungen quasi wo anders hin und somit kann ein Update deinem Child-Theme nichts anhaben!

So kannst du ein Child-Theme erstellen

1.) Verbinde dich mit deinem Server

Verbinde dich mittels FTP mit deinem Server (dazu kannst du bspw. FileZilla (Windows, iOS), TotalCommander (Windows) oder Commander One (iOS) verwenden)
Dazu benötigst du den Server-Namen, FTP-User und das FTP-Passwort – diese Infos erhältst du von deinem Provider.

2.) Finde den richtigen Ordner

Sobald du eingeloggt bist suchst du nach dem Ordner deiner WordPress-Installation. Darin findest du dann den Ornder wp-content » themes

3.) Erstelle einen neuen Ordner

Erstelle im Ordner themes einen neuen Ordner (als Ordnername wähle ich immer den Namen des Parent-Themes und hänge noch ein „-child“ dran!)
Wichtig: Versuche beim erstellen von Ordnern Leerzeichen zu vermeiden, da das oft später zu Fehlern führen kann!

4.) styles.css anlegen

In deinem neuen Ordner erstellst du jetzt eine styles.css. Der erste Inhalt in der .css-Datei sieht so aus:

/* Theme Name: Twenty Twenty Child 
Theme URL: http://deinedomain.com 
Description: Twenty Twenty Child Theme 
Author: Dein Name 
URL: http://deinedomain.com 
Template: twentytwenty 
Version: 1.0.0 
Text Domain: twentytwenty-child 
*/

Ändere alle Angaben ab so wie du sie benötigst. Die wichtigste Zeile ist hier „Template:“ denn sie sagt WordPress was das Haupttheme ist.
Speichere und Schließe die Datei nun.

5.) Erstelle eine functions.php

Erstelle nun eine zweite Datei im selben Ordner die functions.php heißt. In diese Datei fügst du nun folgenden Code ein:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/styles.css' );
}
?>

6.) Zurück ins WordPress-Backend

Melde dich nun bei deinem WordPress-Backend an und gehe zu Design » Themes. Aktiviere das Child-Theme das du gerade erstellt hast und du wirst merken es sieht genau gleich aus wie das Original.

Damit deine Anpassungen nicht verloren gehen

Wenn du am Originaltheme bereits Änderungen gemacht hast (z.B. in den Theme-Options deines Templates oder im Customizer) kann es sein das diese Änderungen nicht von Child-Theme übernommen werden. Am besten ist du exportierst diese Einstellungen und fügst sie beim Child-Theme wieder ein. Für den Customizer gibt es dazu ein eigenes Plugin Customizer Export/Import. Nach der Installation des Plugins wird dir direkt im Customizer der Button Export/Import angezeigt.

Wie kannst du das Child-Theme anpassen

Um dein Child-Theme anzupassen benötigst du grundlegendes Wissen über CSS und solltest wissen wie du Elemente auf deiner Website untersuchen kannst um ihnen spezielle CSS-Anweisungen zu geben. Deine styles.css kannst du dann ganz normal verwenden um Farben, Abstände, Schriftarten oder -größen anzupassen.

Child-Theme für deine WordPress-Website | alphasinn.at

PREVIOUS POST