In WordPress solltest du, anstatt diese einfach im Header hinzuzufügen, eine Methode namens Enqueueing verwenden, die eine standardisierte Methode zur Handhabung deiner Assets mit dem zusätzlichen Vorteil der Verwaltung von Abhängigkeiten darstellt. Finde weiter unten heraus, wie du es mit wp_enqueue_scripts machen kannst.

Wie Enqueueing funktioniert

Wenn ein Skript oder ein Stil in die Warteschlange gestellt wird, sind zwei Schritte erforderlich. Zuerst registriere es – sage WordPress, dass es da ist – und dann stelle 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 der Modularität zu tun. Manchmal will man WordPress über ein Asset informieren, aber man möchte es vielleicht nicht auf jeder Seite verwenden. Zum Beispiel: Wenn du einen benutzerdefinierten Galerie-Shortcode mit Javascript erstellst, brauchst du das JS eigentlich nur zu 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 erst dann in die Warteschlange zu stellen, wenn der Shortcode angezeigt wird (empfohlener Artikel: Der ultimative Leitfaden für WordPress-Shortcodes).

Grundlagen des Enqueueing mit wp_enqueue_scripts

Um Skripte und Stile im Front-End einzureihen, muss der wp_enqueue_scripts-Hook verwendet werden. Innerhalb der angehängten Funktion kann man 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 eine Warteschlange eingereiht, was ein wenig redundant ist. Tatsächlich kann man die Enqueue-Funktionen verwenden, um sie sofort zu registrieren und in eine Warteschlange einzureihen, indem man die gleichen Argumente wie in den Registerfunktionen verwendet:

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 Shortcode, um sie in eine 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
}

Management von Abhängigkeiten

Der Warteschlangenmechanismus von WordPress verfügt über integrierte Unterstützung für die Verwaltung von Abhängigkeiten, wobei das dritte Argument der Funktionen wp_register_style() und wp_register_script() verwendet wird. Du kannst die Enqueuing-Funktionen auch sofort verwenden, wenn du sie nicht trennen musst.

Der dritte Parameter ist ein Array von registrierten Skripten/Stilen, die geladen werden müssen, bevor das aktuelle Asset in die Warteschlange eingereiht wird. Unser obiges Beispiel würde sich höchstwahrscheinlich auf jQuery stützen, also lasst uns das jetzt spezifizieren:

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 eine Warteschlange stellen, da es bereits Teil von WordPress ist. Eine Liste der in WordPress verfügbaren Skripte und Stile findest du im Codex.

Wenn du eigene Abhängigkeiten hast, musst du sie registrieren, sonst werden deine Skripte nicht geladen. Hier ist 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' ) );
}

Nehmen wir an, dass das erste Skript eine Galerie ist, das zweite ist eine Erweiterung dessen, was Bilder in einer Lightbox aufklappen lässt. Beachte, dass, obwohl unser zweites Skript auf jQuery angewiesen ist, wir dies nicht angeben müssen, da unser erstes Skript bereits jQuery lädt. Trotzdem kann es eine gute Idee sein, alle Abhängigkeiten anzugeben, um sicherzustellen, dass nichts kaputt gehen kann, wenn man vergisst, eine Abhängigkeit anzugeben.

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

Wann immer man mit dem Laden von Skripten in dem Footer auskommen kann, sollte man das tun. Dies erhöht die erkennbare Seitenladezeit und kann verhindern, dass die Webseite beim Laden von Skripten hängen bleibt, insbesondere wenn sie AJAX-Aufrufe enthalten.

Der Enqueuing-Mechanismus kann mit dem fünften Parameter (der vierte ist eine optionale Versionsnummer) Skripte in dem Footer einfügen. Unser obiges Beispiel würde die Skripte in dem Footer laden, wenn wir sie leicht modifizieren.

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 man true als fünften Parameter angibt, werden Skripte in dem Footer gesetzt, wenn man false verwendet, oder wenn man den Parameter weglässt, werden Dinge in dem Header geladen. Wie ich bereits erwähnt habe, werden Skripte wann immer möglich in dem Footer geladen.

Angeben von Medien für Stile

Mit dem fünften Parameter der Stilregister-/Warteschlangenfunktionen lässt sich der Medientyp steuern, für den das Skript definiert wurde (print, screen, handheld usw.). Durch die Verwendung dieses Parameters kann das Laden der Stile auf den jeweiligen Medientyp beschränkt werden, 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, schaue dir die CSS-Spezifikationen an.

Zusammenfassung

Die Einreihung von Assets in eine Warteschlange ist ein wirksames Mittel, um damit umzugehen. Es gibt dir und anderen Plugin-/Theme-Herstellern mehr Kontrolle über das System als Ganzes und nimmt dir das Abhängigkeitsmanagement aus den Händen.

Als ob das noch nicht genug wäre, ist es die Art und Weise, wie du deine Assets hinzufügst, viele Theme-Marktplätze und das WordPress Repository selbst werden deine Arbeit nicht genehmigen, wenn du diese Methode nicht verwendest.

Daniel Pataki

Hallo, mein Name ist Daniel, ich bin der CTO hier bei Kinsta. Du kennst mich vielleicht vom Smashing Magazine, WPMU Dev, Tuts+ und anderen WordPress/Entwicklungsmagazinen. Abgesehen von WordPress und PHP verbringe ich die meiste Zeit mit Node, React, GraphQL und anderen Technologien im Bereich Javascript. Wenn ich nicht gerade an der besten Hosting-Lösung des Universums arbeite, sammle ich Brettspiele, spiele Tischfußball im Büro, reise oder spiele Gitarre und singe in einer ziemlich schlechten Band.