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

Anmerkung oder Frage schreiben

Jeder Beitrag wird von Hand freigeschaltet. Mit dem Absenden Ihres Kommentars willigen Sie ein, dass der angegebene Name im Zusammenhang mit Ihrem Kommentar und ggf. Ihrer Website gespeichert wird.