Thomas Maier | Magento & WordPress Develover post@webzunft.de | +49 162 9313 708

Antworten auf die Fragen – nicht nur meiner Kunden 

RSS
Home WordPress WordPress für Entwickler Parent Theme style.css ohne @import in Child Theme einbinden

Parent Theme style.css ohne @import in Child Theme einbinden

Für eines meiner eigenen auf WordPress basierenden Projekte wollte ich ein Child Theme erstellen. Dabei sollte auch die CSS-Datei style.css des Parent Themes genutzt werden. Der übliche Weg ist die Einbindung via @import am Anfang der style.css des Child Themes:

@import url("../parentTheme/style.css");

Dieses Vorgehen ist aber aus Gründen der Performance nicht zu empfehlen und bei der Nutzung eines Caching-Plugins ausgeschlossen. Die Lösung ist aber dennoch nicht sehr kompliziert. Er führt über die Registrierung der CSS-Dateien via wp_register_style() und wp_enqueue_style().

Dazu steht zunächst in meinem Parent Theme folgende Deklaration:

function styles_method() {
    wp_register_style('theme_style', get_template_directory_uri() . '/style.css', array('reset.css'), 0, 'all');
    wp_enqueue_style('theme_style');
}
 
add_action('wp_enqueue_scripts', 'styles_method');

Normalerweise ist dieser Aufruf nicht notwendig, weil die style.css schon geladen wird. In diesem Fall hat es aber zwei Vorteile:

1. Ich kann den dritten Parameter dazu nutzen um Abhängigkeiten zu definieren. In diesem Fall wird WordPress angewiesen zunächst die reset.css aufzurufen.
2. get_template_directory_uri() gibt auch bei Child Themes den Pfad des Parent Themes aus. Da die functions.php des Parent auch vom Child geladen wird, wird die style.css des Parent also auch immer schon geladen. Wer das nicht kann das Laden ja mit wp_dequeue_style() verhindern.

Ich habe übrigens mal nachgeschaut, ob die style.css nicht schon registriert ist und ich mir wp_register_style sparen kann. Aber das Ergebnis von wp_print_styles() enthielt keinen entsprechenden Eintrag.

Mein Quellcode in der functions.php des Child Themes sieht dann noch wie folgt aus:

function add_parent_styles() {
    wp_register_style('child_style', get_stylesheet_directory_uri() . '/style.css', array('theme_style'), 0, 'all');
    wp_enqueue_style('child_style');
}
add_action('wp_enqueue_scripts', 'add_parent_styles');

Auch dieser Aufruf ist nur noch notwendig, um die Abhängigkeit zur style.css (= theme_style) zu definieren und sicher zu gehen, dass es stets zuerst geladen wird. Sonst könnte ich ja die Einstellungen nicht überschreiben.

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.