WordPress hat eingebaute Funktionen, die dir dabei helfen, Skripte und Stylesheets korrekt zu managen. Diese Funktionen sind in deinem WordPress-Theme und werden üblicherweise in der functions.php-Datei definiert. Wir verwenden die WordPress-Funktionen wp_enqueue_script für JavaScript und wp_enqueue_style für CSS.
Schritt 1: Erstelle deine JavaScript- und CSS-Dateien
Zuerst musst du deine JavaScript- und CSS-Dateien erstellen. Zum Beispiel:
- script.js
- style.css
Speichere diese Dateien in deinem Theme-Verzeichnis. Üblicherweise wird ein Unterordner wie /js für JavaScript und /css für CSS verwendet.
Schritt 2: Füge die Dateien zur functions.php Datei deines Themes hinzu
Öffne die functions.php Datei deines Themes und füge den folgenden Code ein:
<?php
add_action( 'wp_enqueue_scripts', 'prefix_load_scripts' );
function prefix_load_scripts() {
// Registrieren von die Skripte und Styles
wp_register_script( 'script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0.0', true );
wp_register_style( 'style', get_template_directory_uri() . '/css/style.css', array(), '1.0.0', 'all' );
// Einbinden von Skripte und Styles
wp_enqueue_script( 'script' );
wp_enqueue_style( 'style' );
}
?>
In diesem Code registrierst du zuerst die Skripte und Styles mit wp_register_script und wp_register_style. Dabei gibst du den Pfad zu den Dateien an, wobei get_template_directory_uri() den Pfad zum aktiven Theme-Verzeichnis zurückgibt.
Der Parameter array( 'jquery' ) in wp_register_script gibt an, dass dein Skript von jQuery abhängt, was bedeutet, dass jQuery vor deinem Skript geladen wird.
Die Parameter ‘1.0.0’ sind die Versionsnummern deiner Skripte und Styles, und ‘true’ und ‘all’ sind die Medientypen, für die deine Skripte und Styles gelten.
Nach der Registrierung fügst du die Skripte und Styles zur Warteschlange hinzu, sodass sie auf der Webseite geladen werden. Dies geschieht mit den Funktionen wp_enqueue_script und wp_enqueue_style.
Schließlich bindest du deine Funktion prefix_load_scripts an den WordPress-Hook wp_enqueue_scripts an. Dieser Hook wird von WordPress aufgerufen, wenn es an der Reihe ist, Skripte und Styles in die Warteschlange zu stellen.
Das war’s! Jetzt sind deine JavaScript- und CSS-Dateien korrekt in dein WordPress-Theme eingebunden.
