Arbeiten mit Childthemes

@kirstenschelper

Childthemes

Kirsten Schelper

www.schelperdesign.net · www.die-netzialisten.de

@kirstenschelper

@kirstenschelper

Was ist ein Childtheme?

?

– WordPress Codex

„Ein Childtheme ist ein Theme, das Funktionalität und Design von

einem anderen Theme erbt, dem sogenannten Parent-Theme.

Der Weg über Childthemes wird für Anpassungen von Themes

empfohlen.“

@kirstenschelper

1. Man kann das Design anpassen (style.css)

2. Man kann Funktionen ergänzen (z.B. zusätzliche Menüs oder Widget-Bereiche)

3. Updates vom Parent-Theme können problemlos durchgeführt werden (Childtheme beilbt davon unberührt)

4. Alle Änderungen bleiben übersichtlich, weil im Childtheme-Ordner nur wenige Dateien mit wenigen Zeilen Code liegen

Vorteile Childtheme

@kirstenschelper

1. Wenn man die Anpassungen, die man braucht, auch über den Customizer machen kann

2. Wenn man eine Eierlegend Wollmichsau (Divi, Enfold etc.) gekauft hat

Wann braucht man kein Childtheme?

@kirstenschelper

Wie macht man einChildtheme?

@kirstenschelper

Childtheme anlegen

1. Verzeichnis anlegen

2. style.css anlegen

Fertig

@kirstenschelper

Woraus besteht ein Childtheme?

• style.css • functions.php

• screenshot.png

• [header.php, single.php, archive.php…]

@kirstenschelper

style.css

@kirstenschelper

Die style.css braucht einen header

Theme Name: Twentyfifteen ChildDescription: Ein schönes ChildthemeAuthor: Kirsten SchelperAuthor URI: http://www.schelperdesign.netTemplate: twentyfifteenVersion: 1.0Tags: lightText Domain: twentyfifteen-child*/

Demo

@kirstenschelper

Parent-Styles einbinden (1)

Theme Name: Twentyfifteen ChildDescription: Ein schönes ChildthemeAuthor: Kirsten SchelperAuthor URI: http://www.schelperdesign.netTemplate: twentyfifteenVersion: 1.0Tags: light*/

@import url(../twentyfifteen/style.css);

@kirstenschelper

Parent-Styles einbinden (2)

function theme_enqueue_styles() {wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

= style.css vom Parent Theme laden (functions.php Childtheme wird zuerst geladen)

@kirstenschelper

Warum nicht @import?

@import

• schlechte Performance

• hart gecodet = unmodern und unflexibel

enqueue • gute Performance

• per functions.php steuerbar: – Plugins, die Scripte und CSS zusammenfassen – Reihenfolge mehrere CSS-Dateien

@kirstenschelper

Parent-Styles einbinden (3)wp_deregister_style( 'twentyfifteen-style');wp_register_style('twentyfifteen-style',

get_template_directory_uri(). '/style.css');wp_enqueue_style('twentyfifteen-style', get_template_directory_uri(). '/style.css');

wp_enqueue_style( 'childtheme-style', get_stylesheet_directory_uri().'/style.css', array('twentyfifteen-style') );}add_action( 'wp_enqueue_scripts', 'twentyfifteen_child_styles' );

@kirstenschelper

Childtheme bitte beachten

@kirstenschelper

Childtheme und Theme-Updates

• style.css + functions.php = sichere Sache

• header.php, single.php, archive.php …

Was passiert, wenn diese Dateien im Eltern-Theme ein Update bekommen?

@kirstenschelper

Templates und Updates

• Templates, die vom Childtheme überschrieben werden, werden beim Update des Parent-Themes NICHT aktualisiert

• Sicherheitslücken im Theme, die der Autor durch ein Update behoben hat, können so im Childtheme weiterleben

Achtung

@kirstenschelper

Die gute Nachricht: Da gibt’s ein Plugin für!

@kirstenschelper

Plugin „Child Theme Check“ (1)

https://wordpress.org/plugins/child-theme-check/

@kirstenschelper

Plugin „Child Theme Check“ (2)

@kirstenschelper

Childtheme Tipps• Plugin „Child Theme Check“ installieren,

Funktionen regelmäßig überprüfen (ab und zu mal wp_debug aktivieren)

• get_stylesheet_directory (statt get_template_directory)

• im Parent Theme nach! function_exists suchen, macht Funktionen einfach überschreibbar

• (…)

@kirstenschelper

Childtheme Fragen!