Javascript und CSS über wp_enqueue_scripts einbinden

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