Alles über das Hinzufügen von Stilen und Skripten in WordPress
WordPress bietet mehrere Methoden zum Hinzufügen von Stilen und Skripten für Frontend und Admin, sowohl zum Hinzufügen von Dateien als auch zum direkten Ausgeben von Variablen/Ausgaben. Dieser Beitrag geht detailliert mit Codebeispielen darauf ein, wie man Skripte und Stile richtig zu WordPress hinzufügt.
Skripte und Stile können registriert und in die Warteschlange eingereiht werden, indem eindeutige Handles (Slug-ähnliche IDs) definiert werden, was es WordPress ermöglicht, Duplikate, wie z. .
Wenn es nicht notwendig ist, Stile oder Skripte zu registrieren, können Sie sie einfach sofort in die Warteschlange einreihen und die Registrierung überspringen. wp_dequeue_scriptEs ist auch möglich, Stile und Skripte (und) abzumelden oder aus der Warteschlange zu entfernen, wp_dequeue_styleindem auf das Handle verwiesen wird. Normalerweise hilft es, der Priorität des Hooks eine höhere Zahl hinzuzufügen (damit er nach dem Hook läuft, an dem die Elemente eingereiht wurden).
PS: Das Hinzufügen von Stilen und Skripten zu Gutenberg (sowohl Admin- als auch Frontend-Blöcke) wird in meinem Beitrag Gutenberg: Die Grundlagen erklärt .
Hinzufügen von Skripten und Stilen zum Frontend
Um Stile und Skripte nur zum Frontend hinzuzufügen, verwenden Sie den Hook wp_enqueue_scripts. Trotz des Namens des Hakens wird er sowohl für Skripte als auch für Stile verwendet. Hier ist ein Beispiel für das Einreihen eines Stylesheets und einer Javascript-Datei in ein Design:
add_action('wp_enqueue_scripts', function() {
// Styles
wp_enqueue_style('main-style', get_stylesheet_directory_uri().'/style.css', [], '1.0');
// Scripts
wp_enqueue_script('main-script', get_stylesheet_directory_uri().'/assets/js/main.js', ['jquery'], '', true);
});Das dritte Argument für Stile und Skripte ist ein Array mit Abhängigkeiten. Für Skripte möchten Sie zB die jQuery-Bibliothek vor Ihrer Skriptdatei laden. Hinweis: WordPress-Installationen enthalten eine Reihe gängiger Skriptbibliotheken (z. B. jQuery, jQuery UI, Backbone und Underscore). Solange Sie eines dieser Handles als Abhängigkeit in Ihrem enqueue_script hinzufügen, wird WordPress diese in die Warteschlange einreihen, sodass Sie keine eigenen Dateien für diese Bibliotheken hinzufügen müssen.
Das fünfte Argument für Skripte ist, ob das Skript am Ende <body>(in der Fußzeile) statt innerhalb des <head>Tags geladen werden soll oder nicht.
Für die Verwendung in einem Plugin müssen Sie andere Methoden verwenden, um die URL zu einer lokalen Datei zu erhalten, z. B. plugin_dir_url(__FILE__).
Hinzufügen von Skripten und Stilen zu Admin
WordPress bietet einen weiteren Haken, admin_enqueue_scripts, zum Hinzufügen von Stilen und Skripten nur zum Administrator. Verwenden Sie dieselben Methoden wie oben zum Registrieren, Einreihen und Lokalisieren von Skripten und Stilen:
add_action('admin_enqueue_scripts', function() {
global $pagenow, $post_type;
// Example: $hook == 'edit.php'
// Example: $post_type == 'post'
// wp_enqueue_style or wp_enqueue_script
});Hinzufügen von Skripten und Stilen zur Anmeldeseite
Da keiner der oben genannten Hooks im Admin-Anmeldebildschirm erscheint, bietet WordPress für diesen Zweck einen separaten Hook an, login_enqueue_scripts.
add_action('login_enqueue_scripts', function() {
// wp_enqueue_style or wp_enqueue_script
});Ausgabe von Javascript-Variablen
Für die Ausgabe von Javascript-Variablen (z. B. Abrufen von Pfaden, übersetzten Zeichenfolgen oder anderen Variablen) können Sie wp_localize_script verwenden. Diese Funktion erfordert ein eingereihtes Skript-Handle. Der zweite Parameter wäre der Variablenname und der dritte sein Wert. Der Wert kann beispielsweise ein Array sein :
Innerhalb Ihres Skripts haben Sie Zugriff auf die übergebenen Variablen wie folgt:
jQuery(document).ready(function($) {
console.log(Theme_Variables.ajax_url);
});In diesem Hook können Sie auf globale Variablen zugreifen $pagenowund $post_typeweiter spezifizieren, wo Sie Ihre Stile und Skripte einreihen möchten.
Ausgabe von Inline-Stilen
Wenn Sie Inline-Stile ausgeben müssen, zum Beispiel für Themenvariablen, die Sie im Customizer eingerichtet haben (z. B. mit get_theme_mod), können Sie diese mit der wp_add_inline_styleFunktion ausgeben. Es funktioniert ziemlich ähnlich wie das Ausgeben von Javascript-Variablen, bei denen Sie ein Handle im eingereihten Stil bereitstellen müssen:
add_action('wp_enqueue_scripts', function() {
// wp_enqueue_style('main-style'); // Must exist!
$color = get_theme_mod('my-custom-color'); // e.g. #FF0000
$custom_css = "
body {
background: {$color};
}";
wp_add_inline_style('main-style', $custom_css);
});Hinzufügen von asynchronen Tags zu Skripten
Leider gibt es keine direkte Funktion oder Filter, die Sie asyncIhren Skript-Tags hinzufügen können, aber wir können dies erreichen, indem wir die Zeichenfolge manipulieren, die WordPress verwendet, um die Skript-Tags für alle in die Warteschlange eingereihten Skripts auszugeben, wie folgt (denken Sie daran, Ihr Skript anhand seines Handles anzugeben):
Nützliche Dokumentationslinks
- wp_enqueue_scripts (Hook)
- admin_enqueue_scripts (Hook)
- login_enqueue_scripts (Hook)
- wp_enqueue_style
- wp_dequeue_style
- wp_enqueue_script
- wp_dequeue_script
- wp_localize_script
- wp_add_inline_style