In diesem Artikel binden wir Stylesheets und Schriftarten, zB Dashicons und Font-Awesome, WordPress-Konform in das Theme ein. Dazu benutzen wir die WordPress Funktion wp_enqueue_scripts in unserer functions.php des Themes.
Bevor wir loslegen können, öffnen wir unsere bereits vorhandene functions.php des Themes und erstellen eine neue Funktion, mit welcher wir die gewünschten Styles und Schriftarten laden.
function zoechbauer_styles() {
}
add_action( 'wp_enqueue_scripts', 'zoechbauer_styles' );Wir beginnen mit der Hauptstylesheet Datei – style.css
Wenn sie das komplette Tutorial verfolgt haben, werden sie noch wissen, dass ich im zweiten Teil dieses Tutorials die Stylesheet-Datei des Themes direkt in den head eingebunden habe.
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
Diese Zeile wird jetzt aus der head.php des Themes aus diesem Tutorial gelöscht, da wir jetzt unsere style.css über die erstellte Funktion in der functions.php einbinden. WordPress stellt für solche Zwecke folgende Funktionen zur Verfügung.
wp_register_style( $handle, $src, $deps, $ver, $media ); wp_enqueue_style( $handle, $src, $deps, $ver, $media );
Was ist der Unterschied dieser beiden Funktionen?
Mit wp_register_style wird das Stylesheet einfach mal in WordPress registriert um dann bei bedarf geladen zu werden, während bei wp_enqueue_style das Stylesheet permanent geladen wird. Für das allgemeine Stylesheet nutzen wir daher wp_enqueue_style.
Noch kurz zu den Variablen
$handle– ein einzigartiger Stylesheetname (erforderlich)$src– der Pfad zur Datei, welche geladen werden soll (erforderlich)$deps– Abhängigkeiten – Angabe von Stylesheets welche vorher geladen werden sollen – Standardarray()– (optional)$ver– individuelle Versionsnummer – Standard?ver=WP-VERSION(optional)$media– Angabe des Mediatyps zB Druckerstyle mit'print'– Standard'all'(optional)
Stylesheet laden
Einfach diese Zeile in die oben erstellte Funktion einfügen.
wp_enqueue_style( 'zoechbauer-style', get_stylesheet_uri() );
Jetzt wird über WordPress unsere style.css des Themes geladen. Möchten wir eine eigene Versionsnummer angeben, dann ändert sich diese Zeile folgendermaßen.
wp_enqueue_style( 'zoechbauer-style', get_stylesheet_uri(), array(), '1.0' );
Zusätzliches Stylesheet laden
Natürlich können wir auch mehrere Stylesheets laden. Die URL-Angabe get_stylesheet_uri() bezieht sich jedoch immer auf die style.css-Datei des WordPress-Themes. Haben wir im Theme eine weitere CSS-Datei angelegt, so nutzen wir die WordPress Funktion get_template_directory_uri(). Beispiel: Druckerstyle – print.css
wp_enqueue_style( 'zoechbauer-print', get_template_directory_uri() . '/print.css' , array(), null, 'print' );
Anderes Stylesheet, anderer Name – zoechbauer-print – muss Einzigartig sein. Natürlich der Link zur Datei, eventuell das entsprechende Unterverzeichnis hinzufügen ( get_template_directory_uri() . '/css/print.css' ). Mit null legen wir fest, dass wir auf die Angabe der Versionsnummer im Quelltext verzichten und 'print' für Druckerstylesheet.
Individuelles Stylesheet als Ergänzung zu einer Seite oder einem Seitentemplate laden
Je nach Theme kommt es vor, dass man ganz spezielle ergänzende Styles nur einer bestimmten Seite oder einem Seitentemplate hinzufügen möchte. Auch das ist kein Problem, das uns WordPress entsprechende Conditional Tags zur Verfügung stellt – is_page(), is_single(), is_home() und noch viele mehr.
Jetzt nutzen wir so einen Conditional Tag und fügen für Seiten ein ergänzendes Stylesheet hinzu
if ( is_page() ) {
wp_enqueue_style( 'zoechbauer-page', get_template_directory_uri() . '/page.css', array( 'zoman-style' ) );
}Über den Conditional Tag is_page() wird dieses Stylesheet nur bei Seiten zusätzlich geladen. Um zu Gewährleisten, dass das Standard-Stylesheet vor der Seitenspezifischen geladen wird, haben wir im array() den Stylesheetnamen des Haupttemplates angegeben ( 'zoechbauer-style' ). Dies ist wichtig, damit wir eventuell bereits vorhandene Styles des Haupttemplates überschreiben können. Wenn wir is_page() mit is_page( 'impressum' ) ersetzen würden, dann würde diese page.css auch nur bei der Seite Impressum aufgerufen.
Noch interessanter ist natürlich das Laden eines speziellen Stylesheets zu einem bestimmten Seitentemplate, da ein Seitentemlate ja genau deswegen erstellt wird, um eben anders auszusehen. Bezugnehmend auf den vorigen Artikel, in welchem das Seitentemplate Keine Kommentare – template-no-comments.php – erstellt wurde, würde sich der Code folgendermaßen ändern.
if ( is_page_template( 'template-no-comments.php' ) ) {
wp_enqueue_style( 'zoechbauer-no-comments', get_template_directory_uri() . '/css/template-no-comments.css' );
}oder als ergänzendes Stylesheet zur style.css, je nach Theme
if ( is_page_template( 'template-no-comments.php' ) ) {
wp_enqueue_style( 'zoechbauer-no-comments', get_template_directory_uri() . '/css/template-no-comments.css', array( 'zoman-style' ), null );
}Einbinden von Schriftarten
Häufig finden auch zusätzliche Schriftarten in Themes verwendung, auch wenn es zB nur für Symbole ist wie etwa Dashicons oder Font-Awesome. Dashicons bietet in WordPress sogar schon den Vorteil, dass diese schon direkt integriert ist. Wir brauchen Dashicons nur über die style.css zu laden.
wp_enqueue_style( 'zoechbauer-style', get_stylesheet_uri(), array( 'dashicons' ), null );
Mit dem array( 'dashicons' ) wird die Schriftart in unserem Theme geladen und wir können sie dann auch direkt darin nutzen, entweder per CSS oder HTML. Die entsprechenden Codes zu den einzelnen Symbolen können sie der Entwicklerwebseite von Dashicons entnehmen.
Anders sieht es bei zB Font-Awesome aus. Font-Awesome müssen wir manuell integrieren. Dazu laden wir uns entweder das Paket direkt von der Font-Awesome Entwicklerseite herunter und entpacken es in unser Theme oder wir nutzen ein CDN, welches aus SEO-Gründen die meiner Meinung nach bessere Variante ist.
Direkt im Theme
wp_register_style( 'font-awesome', get_template_directory_uri() . '/font/css/font-awesome.min.css', array(), null );
Über ein CDN
wp_register_style( 'font-awesome', '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css', array(), null );
Anschließend laden wir Font-Awesome vor dem Hautstylesheet – in diesem Beispiel auch noch Dashicons
wp_enqueue_style( 'zoechbauer-style', get_stylesheet_uri(), array( 'font-awesome', 'dashicons' ), null );
Jede Menge Möglichkeiten um eine CSS-Datei oder eine Schriftart im Theme zu integrieren. Abschließend noch mal sämtliche Beispiele gesammelt in einem Stück.
function zoechbauer_styles() {
wp_register_style( 'font-awesome', '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css', array(), null );
wp_enqueue_style( 'zoechbauer-style', get_stylesheet_uri(), array( 'font-awesome', 'dashicons' ), null );
wp_enqueue_style( 'zoechbauer-print', get_template_directory_uri() . '/print.css' , array(), null, 'print' );
if ( is_page() ) {
wp_enqueue_style( 'zoechbauer-page', get_template_directory_uri() . '/page.css', array( 'zoman-style' ) );
}
if ( is_page( 'impressum' ) ) {
wp_enqueue_style( 'zoechbauer-impressum', get_template_directory_uri() . '/impressum.css', array(), '1.2.3', 'screen' );
}
if ( is_page_template( 'template-no-comments.php' ) ) {
wp_enqueue_style( 'zoechbauer-no-comments', get_template_directory_uri() . '/css/template-no-comments.css', array( 'zoman-style' ), null );
}
}
add_action( 'wp_enqueue_scripts', 'zoechbauer_styles' );Im nächsten Artikel binden wir Javascriptdateien in das Theme ein.
Bitte beachten Sie, dass dieser Beitrag bereits vor über einem Jahr geschrieben wurde und unter umständen nicht mehr aktuell ist.