In WordPress sollten Sie, anstatt diese einfach in den Header einzufügen, eine Methode namens Enqueueing verwenden, die eine standardisierte Art der Handhabung Ihrer Assets mit dem zusätzlichen Bonus der Verwaltung von Abhängigkeiten ist. Wie das geht, erfahren Sie weiter unten unter Verwendung von wp_enqueue_scripts.

• Wie Enqueueing funktioniert
• Grundlagen des Enqueueing mit wp_enqueue_scripts
• Abhängigkeitsmanagement
• Skripte im Fußzeile
• Medien für Stile festlegen

Wie Enqueueing funktioniert

Beim Enqueueing eines Skripts oder eines Stils werden zwei Schritte durchgeführt. Zuerst registriert man es – teilt WordPress mit, dass es da ist – und dann stellt man es tatsächlich in die Warteschlange, was es schließlich im Header oder kurz vor dem abschließenden Body-Tag ausgibt.

Der Grund für die zwei Schritte hat mit Modularität zu tun. Manchmal möchte man WordPress über ein Asset informieren, aber man möchte es vielleicht nicht auf jeder Seite verwenden. Ein Beispiel: Wenn Sie einen benutzerdefinierten Galerie-Shortcode erstellen, der Javascript verwendet, müssen Sie das JS nur laden, wenn der Shortcode verwendet wird – wahrscheinlich nicht auf jeder Seite.

Der Weg, dies zu erreichen, besteht darin, das Skript zuerst zu registrieren und es nur dann einzureihen, wenn der Shortcode angezeigt wird (empfohlene Lektüre: The Ultimate Guide to WordPress Shortcodes).

Enqueueing Basics With wp_enqueue_scripts

Um Skripte und Stile im Frontend einzureihen, müssen Sie den wp_enqueue_scripts-Hook verwenden. Innerhalb der Hook-Funktion können Sie die Funktionen wp_register_script(), wp_enqueue_script(), wp_register_style() und wp_enqueue_style() verwenden.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) ); wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) ); wp_enqueue_style( 'custom-gallery' ); wp_enqueue_script( 'custom-gallery' );}

Im obigen Beispiel habe ich die Assets innerhalb derselben Funktion registriert und in die Warteschlange gestellt, was ein wenig redundant ist. Tatsächlich können Sie die Enqueue-Funktionen verwenden, um sich zu registrieren und sich einzureihen, indem Sie die gleichen Argumente wie bei den Register-Funktionen verwenden:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) ); wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );}

Wenn ich die beiden Funktionen trennen würde, würde ich sie in verschiedenen Hooks verwenden. In einem realen Beispiel könnten wir den wp_enqueue_scripts-Hook verwenden, um die Assets zu registrieren, und die Funktion des Shortcodes, um sie in die Warteschlange zu stellen.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) ); wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );}add_shortcode( 'custom_gallery', 'custom_gallery' );function custom_gallery( $atts ){ wp_enqueue_style( 'custom-gallery' ); wp_enqueue_script( 'custom-gallery' ); // Gallery code here}

Abhängigkeitsmanagement

Der Enqueueing-Mechanismus von WordPress hat eine eingebaute Unterstützung für das Abhängigkeitsmanagement, die das dritte Argument der Funktionen wp_register_style() und wp_register_script() verwendet. Sie können die Enqueueing-Funktionen auch direkt verwenden, wenn Sie sie nicht trennen müssen.

Der dritte Parameter ist ein Array von registrierten Skripten/Stilen, die geladen werden müssen, bevor das aktuelle Asset in die Warteschlange gestellt wird. Unser obiges Beispiel würde höchstwahrscheinlich auf jQuery beruhen, also geben wir das jetzt an:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );}

Wir müssen jQuery nicht selbst registrieren oder in die Warteschlange stellen, da es bereits Teil von WordPress ist. Eine Liste der in WordPress verfügbaren Skripte und Stile finden Sie im Codex.

Wenn Sie eigene Abhängigkeiten haben, müssen Sie diese registrieren, sonst werden Ihre Skripte nicht geladen. Hier ein Beispiel:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) ); wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery' ) );}

Angenommen, das erste Skript ist eine Galerie, das zweite ist eine Erweiterung, die dafür sorgt, dass sich Bilder in einer Lightbox öffnen. Obwohl unser zweites Skript auf jQuery basiert, brauchen wir dies nicht anzugeben, da unser erstes Skript jQuery bereits lädt. Trotzdem kann es eine gute Idee sein, alle Abhängigkeiten anzugeben, nur um sicherzustellen, dass nichts kaputt gehen kann, wenn man vergisst, eine Abhängigkeit einzuschließen.

WordPress weiß jetzt, welche Skripte wir brauchen, und kann berechnen, in welcher Reihenfolge sie der Seite hinzugefügt werden müssen.

Skripte in der Fußzeile laden

Wann immer Sie es schaffen, Skripte in der Fußzeile zu laden, sollten Sie das tun. Dies erhöht die offensichtlichen Ladezeiten der Seite und kann verhindern, dass Ihre Website beim Laden von Skripten hängen bleibt, insbesondere wenn diese AJAX-Aufrufe enthalten.

Der Enqueuing-Mechanismus kann Skripte mit dem fünften Parameter (der vierte ist eine optionale Versionsnummer) in die Fußzeile einfügen. Unser obiges Beispiel würde die Skripte in die Fußzeile laden, wenn wir es leicht abändern.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ), '1.0', true ); wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery', 'jquery' ), '1.0', true );}

Wenn Sie true als fünften Parameter angeben, werden die Skripte in die Fußzeile geladen, wenn Sie false verwenden oder den Parameter weglassen, werden die Dinge in die Kopfzeile geladen. Wie bereits erwähnt, sollten Skripte, wann immer möglich, in die Fußzeile geladen werden.

Specifying Media For Styles

Mit dem fünften Parameter der Style-Register/Enqueue-Funktionen können Sie den Medientyp steuern, für den das Skript definiert wurde (Druck, Bildschirm, Handheld, etc.). Durch die Verwendung dieses Parameters können Sie das Laden der Stile auf einen bestimmten Medientyp beschränken, was ein praktischer kleiner Optimierungstrick ist.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_register_style( 'custom-gallery-print', plugins_url( '/css/gallery.css' , __FILE__ ), array(), '1.0', 'print' );}

Für eine vollständige Liste der Medientypen, die verwendet werden können, werfen Sie einen Blick auf die CSS-Spezifikationen.

Zusammenfassung

Assets in die Warteschlange zu stellen, ist eine leistungsstarke Methode, sie zu handhaben. Es gibt Ihnen und anderen Plugin-/Theme-Herstellern mehr Kontrolle über das System als Ganzes und nimmt Ihnen die Verwaltung von Abhängigkeiten aus den Händen.

Als ob das nicht genug wäre, ist es die Art und Weise, wie Sie Ihre Assets hinzufügen. Viele Theme-Marktplätze und das WordPress-Repository selbst werden Ihre Arbeit nicht genehmigen, wenn Sie diese Methode nicht verwenden.