Laut WordPress-Codex ist es best practice, nicht nur Scripts, sondern auch Stylesheets über die Funktion wp_enqueue_style einzubinden. Das Stylesheet wird also nicht mehr klassisch per Link in den head-Bereich des HTML-Dokuments geschrieben, sondern über einen Hook in der functions.php geladen.
Ich habe mich gefragt: Wozu ist das gut? Was ist der Vorteil von enqueue_style, an welcher Stelle hat die Link-Methode Nachteile?
An der klassischen Link-Methode ist zunächst mal nichts verkehrt. Kommt das Theme mit einem einzelnen Stylesheet aus, spricht nichts dagegen, den Links zur Datei style.css direkt in die header.php einzutragen.
UPDATE: Das hat sich inzwischen geändert. Laut Codex soll ein Stylesheet nicht länger über einen Link in den head eingebaut werden, sondern über enqueue_script.
Der Weg über wp_enqueue_script ist deshalb interessant, weil man so mehrere Stylesheets hintereinander laden kann.
Bei komplexen Projekten kann man die Styles in mehrere Module aufteilen.
Ein CSS-Modul general.css enthält beispielsweise alle allegmeinen Angaben für das Theme. Ein weiteres Stylesheet skin.css enthält die die grafische Oberfläche des Themes.
Damit alles korrekt dargestellt wird, müssen diese CSS-Dateien in der richtigen Abfolge geladen werden.
- Zuerst kommt das Stylesheet „general.css“
- danach kommt das Stylesheets „skin.css“ für die Theme-Optik
Der Code
Wenn man ein Stylesheet über die functions.php einbauen möchte, sieht das so aus:
function my_styles() {
wp_register_style( 'mein_css', bloginfo('template_url') . '/css/style.css' );
wp_enqueue_style( 'mein_css' );
}
add_action(''wp_enqueue_scripts', 'my_styles');
Das Stylesheet wird in zwei Schritten eingebunden. Zuerst wird es registriert, das passiert über die Funktion wp_register_style. In diesem Schritt bekommt das Kind einen Namen (im Beispiel „mein_css“) und der Pfad zur CSS-Datei wird angegeben.
Im nächsten Schritt wird das Stylesheet mit wp_enqueue_style aktiviert. Dazu muss man im Prinzip nur der Name, der zuvor vergeben wurde, angeben. So weit, so langweilig.
Aber die Funktion wp_enqueue_style hat noch eine ganze Reihe von Parametern, mit denen man spannendere Sachen machen kann.
wp_enqueue_style($handle, $source, $dependencies, $version, $media);
$handle
Das ist der Name des Stylesheets (s.o.).
$source
Der Pfad zum Stylesheet
$dependencies
Eine Array mit anderen Stylesheets, von denen das Stylesheet abhängt. Wenn z.B. zuerst ein Stylesheet general.css geladen werden soll, bevor das Stylesheet skin.css geladen wird, dann trägt man den Namen von general.css hier ein.
(Achtung: Das Stylesheet general.css muss zuvor registriert werden mit wp_register_style).
$version
Die Version des Stylesheet. Das ist beispielsweise dann interessant, wenn man mit kompilierten Daten arbeitet (Stichwort LESS und SASS)
$media
Der default-Wert hier ist „false“. Hiermit kann man CSS media type definieren, z.B. “all“, “screen“, “handheld“ oder “print“.
Ein Beispiel mit allen Parametern sieht so aus:
function my_styles() {
wp_register_style( 'general_css', bloginfo('template_url') . '/css/general.css' );
wp_register_style( 'themeskin_css', bloginfo('template_url') . '/css/skin.css' );
wp_enqueue_style('themeskin_css', ‘/wp-content/theme/skin.css','general', '1.0', 'screen');
}
add_action(''wp_enqueue_scripts', 'my_styles');
Damit wird das Stylesheet skin.css in die Schlange (queue) gestellt und es wird festgehalten, dass es eine Abhängigkeit (dependency) vom Stylesheet general.css gibt. Die CSS-Datei general.css wird zuerst geladen, danach die Datei skin.css.