WordPress bietet eine Möglichkeit um CSS und Javascript über die Funktion wp_enqueue_scripts einzubinden. Der Codex empfiehlt diese Vorgehensweise gegenüber etwa dem hardcoden in den Theme-Dateien wie der header.php oder der footer.php. Zur Verbesserung der Website-Performance können dann gleich noch Script-Aufrufe nach wp_footer (also gegen Ende des Quelltexts) verschoben werden.
In der header.php finden sich beispielsweise solche oder ähnliche Anweisungen, die durch die Funktionen ersetzt werden sollen:
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/print.css" type="text/css" media="print" />
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/themename.js">
<script type='text/javascript' src='/js/jquery.js'></script>
<script type='text/javascript' src='/js/jquery-migrate.min.js'></script>
In folgendem Beispiel sollen nun die themename.js, die die jquery-Bibliothek benötigt, sowie die style.css und print.css des Themes eingebunden werden. Im wp_footer soll außerdem die WordPress-eigene jquery-Bibliothek eingebunden werden. Ein angenehmer Nebeneffekt ist, dass die eigene jquery-Kopie nicht mehr von Hand aktualisiert werden muss.
functions.php
// Theme Scripts & Styles registrieren
function themename_scripts_styles() {
// Scripts: Name, URI, Abhängigkeiten, Version, in wp_footer platzieren?
wp_register_script( 'themename-js', get_template_directory_uri() . '/js/themename.js', array( 'jquery' ), '2.05', true );
wp_enqueue_script( 'themename-js' );
// Andere Scripts in den Footer verschieben
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
// CSS: Name, URI, Abhängigkeiten, Version, CSS Media Type
wp_register_style( 'themename-screen', get_template_directory_uri() . '/style.css', false, '20140925', 'screen' );
wp_enqueue_style( 'themename-screen' );
wp_register_style( 'themename-print', get_template_directory_uri() . '/print.css', false, '20140925', 'print' );
wp_enqueue_style( 'themename-print' );
}
add_action( 'wp_enqueue_scripts', 'themename_scripts_styles' );
Beim Erstellen eigener Funktionen können Generatoren zu Hilfe genommen werden. Bei der Verwendung von Child-Themes mit alternierenden CSS-Klassen sollte get_template_directory_uri() mit get_stylesheet_directory_uri() ersetzt werden.
Referenz
