von Kirsten

Childtheme-CSS auf korrekte Weise laden

Dieser Artikel ist ursprünglich am 04. 03. 2015 erschienen.
Das ist eine ganze Weile her. Der Inhalt ist womöglich nicht mehr ganz aktuell.

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.

Die neuesten Artikel

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die weitgehend inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

5 Kommentare zu “Childtheme-CSS auf korrekte Weise laden”

  • 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

  • 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 :-)

Die Kommentare sind geschlossen.

Hinweise zum Datenschutz
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.