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.
Kommentare
•
Liebe Kirsten,
vielen Dank für diesen aufschlussreichen Beitrag! Als Nicht-IT-Affine habe ich jetzt noch eine – wahrscheinlich recht einfache – Frage: An welcher Stelle muss man den Namen des eigenen Themes bzw. Child-Themes im Code ersetzen?
Lieben Dank für die die Zeit und Mühe, die Du Dir hier machst und herzliche Grüße von
Stephanie alias die Modeflüsterin
•
Schau mal hier, hier ist erklärt was im Code im Einzelnen passiert: zum Artikel
•
Lieben Dank, Kirsten! Das muss ich mir mal in Ruhe zu Gemüte führen – Ausgang ungewiss ;-)
•
Hallo,
danke für diesen Tipp und die Erklärung.
Ich habe sowieso immer das Gefühl, dass Child-Themes ein gutes Stück langsamer sind als es das eigentliche Theme wäre – jetzt habe ich wohl einen Grund gefunden.
Gruß
Marcus
•
Danke für die tollen ausführlichen Artikel zum Thema Child Themes hier im Blog. Gerade als WordPress Einsteiger ist das Funktionsprinzip und der korrekte Umgang mit den möglichen Einstellungen nicht einfach nachzuvollziehen. Aber spätestens nachdem man sich die Webseite nach Theme Updates schon ein paar mal zerschossen hat, fängt man eben an, sich auch für dieses Thema zu interessieren :-)