Oft findet man beim Thema WordPress Child Themes den Hinweis, dass man die Parent-Theme-CSS-Datei im Childtheme dann mittels @import übernehmen soll, wie z.b. so:
/* Use @import, to borrow the style sheet from the Waipoua parent theme */
@import url('../waipoua/style.css'); Das ist zwar richtig und funktioniert, kann aber durchaus nachteilige Effekte auf das CSS-Rendering und Ladeperformance haben. Schließlich wird erst die Child-Theme-Datei geladen, die stößt den Parent-Download und dann muss das ganze lustig berechnet werden.
Einfacher ist es, wenn man die Parent-Style-Datei entweder komplett kopiert oder direkt im HTML einbindet.
Methode 1: Kopieren des Parent-Styles
Vorteil: Nur eine Style-Datei, nur ein Request, kein Style-Merging: Optimale Performance
Nachteil: Beim Theme-Update müssen Differenzen ggf. mühsam per Hand übertragen werden.
Methode 2: Einbinden ins HTML statt per @import
Vorteil: Update-Kompatibel, nur geänderte Styles müssen in die Datei, Performance besser als bei @import
Nachteil: Perfomance ist schlechter als eine Kopie des Parents
Mein Senf: Methode 2 gewinnt
Aus meiner Sicht ist die Methode 2 besser geeignet, da hier der Wartungsaufwand bei Theme-Updates gegen 0 tendiert, genau wie bei @import. Aber wie funktioniert das?
Zuerst löscht man die @import-Zeile aus der style.css. Dann fügt man in die functions.php folgendes ein:
add_action('wp_enqueue_scripts', 'add_parent_css');
function add_parent_css() {
wp_enqueue_style('waipoua_main', get_template_directory_uri() . '/style.css', false, '');
wp_enqueue_style('waipoua_child', get_stylesheet_uri(), 'waipoua_main' );
} Hier passiert folgendes: Mit get_template_directory_uri() bekommt man das Verzeichnis des Parent-Themes, während man mit get_stylesheet_uri() die Stylesheet-URL des aktiven (in diesem Fall des Child-) Themes bekommt.
Die Namen für die Stylesheets (“waipoua_main” und “waipoua_child”) sind in diesem Fall der Umgebung bei Develovers.de geschuldet, die könnt ihr nennen wie ihr wollt.
Schon meckern Perfomance-Tools evtl. nur noch die Einbindung mehrerer Stylesheets an, aber nicht mehr die Verwendung von @import.
