Anleitung Childtheme anlegen (Update)

Dies ist eine überarbeitete Version des Artikels „Ein WordPress-Child-Theme anlegen“

Torsten Landsiedel hat auf dem WordCamp Köln 2015 einen sehr spannenden Vortrag gehalten: „Das Childtheme Dilemma“. Darin hat er gezeigt, in welche Fallen man tappen kann, wenn man mit Childthemes arbeitet. Diesen Vortrag habe ich zum Anlass genommen, die Childthemes-Anleitung hier im Blog endlich mal zu aktualisieren.

Ein WordPress-Theme an die eigenen Bedürfnisse anzupassen ist gar nicht so schwer. Die meisten Anpassungen kann man über die CSS-Datei des Themes umsetzen. Bei WordPress hat diese Datei immer den Namen style.css. Man findet sie auf der obersten Ebene des Theme-Ordners.

Das Stylesheet (style.css) im WordPress Theme könnt Ihr in einem Editor wie Textmate (Mac), Notepad (Windows) oder Coda (Mac) bearbeiten. Besser ist es aber, Ihr arbeitet mit einem Childtheme. Ein Childtheme ist ein kleiner Ableger des Original-Themes, das damit zum Parent (=Eltern)-Theme wird. Der Vorteil dabei: Das Eltern-Theme bleibt wie es ist und wird nicht angetastet. Wenn also mal etwas schiefgeht beim Basteln, dann ist nicht gleich das ganze Theme kaputt. Und wenn die Entwickler des Themes ein Update zur Verfügung stellen, könnt Ihr das Parent-Theme updaten, ohne dass Eure Anpassungen überschrieben werden.
Im Childtheme-Ordner liegen nur die Dateien, die tatsächlich verändert wurden. Das macht es leichter, die Änderungen nachzuhalten.

Weiterlesen →

Childtheme-CSS auf korrekte Weise laden

Lange Zeit war es üblich, in einem Childtheme die CSS-Angaben vom Parenttheme als @import Anweisung an den Anfang der CSS-Datei des Childthemes zu schreiben.

/*   
Theme Name: Childtheme
Theme URI:
Description: Your child theme description text...
Author: Your Name
Author URI: http://www.yourdomain.com/
Template: parenttheme
Version: 1.0
Tags: Child Theme
*/

/* Import the stylesheet from the parent theme */
@import url('../parenttheme/style.css');

Das ist schön einfach und übersichtlich. Aber @import ist nicht die eleganteste Methode ein Stylesheet einzubinden, denn diese Konstruktion kostet Ladezeit.
Auch der WordPress Codex sagt, man möge Stylesheets nicht mehr per @import, sondern über die functions.php einbinden.

function child_styles() {
wp_enqueue_style( 'childtheme-style', get_stylesheet_directory_uri().'/style.css', array('parenttheme-style'), 'YOUR_THEME_VERSION' );
}
add_action( 'wp_enqueue_scripts', 'child_styles' );

Was passiert hier?

Das CSS des Childthemes wird so eingebunden, dass zuerst das CSS des Eltern-Themes geladen wird. Das erreicht man dadurch, dass man dem Child-CSS eine dependency (Abhängigkeit) zuweist, nämlich das Parent-CSS. Im Codebeispiel ist das der Teil, der in dem array steht:

array('parenttheme-style')

Der Browser bekommt dadurch die Anweisung: Lade das Child-CSS nach dem Parent-CSS. Oder anders formuliert: Lade zuerst das Eltern-CSS, dann das Child-CSS.

Nach dem Array kann man noch die Version des Themes eintragen. So kann man sicherstellen, dass nach einem Update des Themes die Parent-Styles neu geladen werden und nicht einfach nur aus dem Cache geholt werden.

Was kann man mit einem Childtheme machen?

Wie man ein Childtheme anlegt, hat Kirsten hier beschrieben. Aber wozu ist ein Childtheme gut und was kann man eigentlich damit machen? Oder anders gefragt: Wann ist ein Childtheme sinnvoll und wann eher nicht?

Über ein Childtheme passt man ein schon vorhandenes WordPress-Theme an die eigenen Vorstellungen an.
Man fängt also nicht bei Null an, sondern nutzt die Infrastruktur, die das Parent-Theme mitbringt. Und kann sich ganz auf die Details – auf die individuelle Note sozusagen – konzentrieren. Weiterlesen →

Funktionen aus dem Parent-Theme im Childtheme deaktivieren

Selbstverständlich kann man auch eine eigene functions.php ins Childtheme tun und zusätzliche Funktionen einbauen. Zum Beispiel ein zusätzliches Menü und weitere Sidebars oder Widget-Areas.

Andersherum funktioniert es aber auch: Falls das Parent-Theme Funktionen hat, die man nicht haben will, kann man die über die functions.php im Childtheme deaktivieren. Hier ein Beispiel, wie man Sidebars, die man nicht nutzen möchte, aus einem Parent-Theme herausfiltert:

function remove_some_widgets(){

	// Unregister some of the TwentyTen sidebars
	unregister_sidebar( 'first-footer-widget-area' );
	unregister_sidebar( 'second-footer-widget-area' );
	unregister_sidebar( 'third-footer-widget-area' );
	unregister_sidebar( 'fourth-footer-widget-area' );
}
add_action( 'widgets_init', 'remove_some_widgets', 11 );

Quelle: Codex

Weiterlesen →