Ein Child-Theme anlegen – ein Must im Webdesign

2. März 2021 | CSS-Stylesheet, functions.php, WordPress

Geschätzte Lesezeit für diesen Beitrag: ca. 5 Minuten.

Immer wieder trifft man auf die Empfehlung, ein Child-Theme für die WordPress-Website anzulegen. Aus gutem Grund, freilich: Die Vorteile sind beachtlich. Wir erklären sie hier und zeigen, wie Sie ein Child-Theme erstellen.

Recht schnell werden Sie im Umgang mit Ihrer WordPress-Website feststellen, dass da und dort Änderungen am Look & Feel oder an den Funktionen nötig wird. Rein technisch können Sie das alles in den Originaldateien Ihres Themes vornehmen. Wenn jedoch ein Theme-Update eingespielt werden, sind all Ihre schönen CSS-Codes und Funktionen futsch. Aus diesem Grund raten wir, unbedingt ein Child Theme zu erstellen. Es ist auch gar nicht schwierig. Damit werden sämtliche Änderungen und Anpassungen in zusätzlichen Files gespeichert und überstehen so auch ein Theme-Update.

Die eine Möglichkeit, ist die Verwendung eines Plugins aus dem WordPress-Plugin-Katalog. Das bremst aber die Website meist unnötig. Wir zeigen Ihnen darum hier Schritt für Schritt, wie Sie ein Child-Theme selber erstellen.

  1. Child-Theme-Ordner mit FTP auf dem Web-Server erstellen: Starten Sie Ihr FTP-Programm und navigieren Sie auf Ihrem Webserver zum Theme-Verzeichnis. Sie finden es im wp-content-Ordner Ihrer WordPress-Installation:
    ../wp-content/themes

    In diesem Ordner liegen alle Themes, welche in für Ihre WordPress-Installation bereit liegen. Oft sind es mehrere; wir konzentrieren uns auf das von Ihnen verwendete Theme. Zum Beispiel «twentytwentyone». Nun erstellen Sie einen neuen Ordner und hängen (der Einfachheit halber) an den Ordnernamen des gewählten Themes «-child» an. Z.B. also «twentytwentyone-child».

  2. Datei style.css anlegen: Nun erstellen Sie (immer noch im FTP-Programm eine neue Datei und geben ihr den Namen «style.css». Diese neue Datei bearbeiten Sie nun und fügen dort folgenden Code ein.
/*
 Theme Name:   Twenty Twenty-One Child
 Description:  Mein Child Theme
 Author:       Ihr Name
 Author URI:   https://ihredomain.ch
 Template:     twentytwentyone
 Version:      1.0
 Text Domain:  twentytwentyone-child
*/

Den Code passen Sie so an, dass er Ihren Ordnernamen und Theme-Dateien entspricht.

  1. Datei functions.php erstellen: Nach wie vor im FTP-Programm erstellen Sie im Child-Ordner eine weitere Datei. Sie heisst «functions.php». In dieser wird nun festgelegt, dass zunächst das Stylesheet des Original-Themes (parent-style) geladen wird. Erst danach wird das Stylesheet des Child-Themes (child-theme-css) geladen. Bearbeiten Sie auch diese soeben erstellte Datei und fügen Sie folgenden Text ein:
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' );
  1. Screenshot erstellen (optional): Wenn Sie mögen, können Sie nun noch einen Screenshot mit dem Aussehen Ihres Themes im FTP-Ordner ablegen. Diese Bilddatei muss 880px breit und 660px hoch sein. Sie muss «screenshot.png» genannt werden. Der Screenshot ist zwar nicht zwingend – hilft aber bei der Unterscheidung der einzelnen installierten Themes durchaus.
  2. Child-Theme aktivieren: Das Child-Theme findet sich nun im WordPress-Backend unter Design/Themes, Dort kann es aktiviert werden. Falls es bei der Aktivierung eine Fehlermeldung abwirft, überprüfen Sie am besten die Angaben in der «style.css» auf allfällige Tippfehler.

Das Eltern-Theme sollten Sie neben dem Child-Theme installiert belassen. Es ist nun gleichsam Ihr «Fallback-Theme»: Die WordPress-Installation wird nun bei jedem Seitenaufruf nachsehen, ob in Ihrem Child-Theme Anweisungen vorhanden sind und diese bevorzugt behandeln. Wenn WordPress nicht fündig wird, greift es einfach auf die Originaldateien des Eltern-Themes zurück.

Bereits hinterlegte Anpassungen übernehmen

Wenn Sie bereits vor der Erstellung eines Child-Themes Änderungen an der style.css oder der functions.php ihres Original-Themes gemacht haben, dann sind diese im Child-Theme nun nicht mehr verfügbar. Sie können die Anpassungen aber einfach wieder holen: Aktivieren Sie das vorherige Theme noch einmal, speichern sie die fraglichen Inhalte (meist namentlich der style.css und der functions.php) lokal auf Ihren Rechner und fügen Sie die Inhalte nach der Aktivierung Ihres neuen Child-Themes in die entsprechenden Dateien ein.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.









Vielen Dank.

Pin It on Pinterest

Share This