So binden Sie Skripte mit dem Hook wp_enqueue_scripts in WordPress ein

Der Action-Hook wp_enqueue_scripts spielt in der WordPress-Entwicklung eine entscheidende Rolle, da Entwickler damit Skripte und Styles korrekt in ihre Themes oder Plugins einbinden können. Durch die Verwendung dieses Hooks stellen Sie sicher, dass Assets effizient und ohne Konflikte geladen werden und dabei die Best Practices von WordPress eingehalten werden.

Zusammen mit den Funktionen wp_enqueue_script() und wp_enqueue_style() hilft es WordPress dabei, Inhalte auf der Website auszugeben.

In diesem Tutorial behandeln wir den Action Hook wp_enqueue_scripts zusammen mit den zugehörigen Funktionen und zeigen verschiedene Anwendungsfälle, mit denen Sie Ihre WordPress-Projekte verbessern können.

So funktioniert Enqueueing in WordPress

In WordPress bezeichnet Enqueueing das Registrieren und Einbinden von Skripten und Stylesheets in Ihre Website.

Die Funktionen wp_enqueue_script() und wp_enqueue_style() weisen den WordPress-Server an, diese Skripte und Stylesheets in eine Warteschlange aufzunehmen, damit sie im Frontend Ihrer Website geladen werden.

Der wichtigste Aspekt des Enqueueings ist, dass es die Leistung Ihrer Website verbessern kann, indem es die Ladezeiten verkürzt, und dabei hilft, Skriptkonflikte zu vermeiden, wenn verschiedene Plugins oder WordPress-Themes versuchen, dasselbe Skript oder Stylesheet zu laden.

wp_enqueue_script verstehen

Der Enqueueing-Prozess besteht aus dem WordPress-Hook wp_enqueue_scripts und zwei zusätzlichen Funktionen für Stylesheets und Skripte.

Zunächst einmal ist wp_enqueue_scripts ein Action-Hook, der dazu dient, Stylesheets und JavaScript-Dateien auf Ihrer WordPress-Website einzubinden. Dieser Hook wird in der Regel in der Datei functions.php eines WordPress-Themes oder in Plugin-Dateien verwendet.

Dies ist die empfohlene Methode, um JavaScript zu WordPress hinzuzufügen, da Entwickler festlegen können, wann der Code geladen wird, um Konflikte zu vermeiden.

Inzwischen sind wp_register_style() und wp_enqueue_style() WordPress-Funktionen, die mit Stylesheets arbeiten. Die Register-Funktion dient dazu, ein Stylesheet zur Verwendung in einem Theme oder Plugin zu registrieren, während die Enqueue-Funktion ein registriertes Stylesheet in eine WordPress-Website lädt.

Standardmäßig haben beide Funktionen zwei Hauptparameter:

• $handle – ein eindeutiger Name für ein Stylesheet, um es innerhalb der WordPress-Codebasis zu identifizieren. Er muss mit dem Handle übereinstimmen, das Sie beim Registrieren des Stylesheets angegeben haben.
• $src – eine URL oder ein Pfad zur Stylesheet-Datei. Dies kann ein relativer Dateipfad zu einem Stylesheet im Theme- oder Plugin-Verzeichnis von WordPress oder eine absolute URL zu einem an anderer Stelle gehosteten Stylesheet sein. $src ist optional und muss nur angegeben werden, wenn Sie dies nicht in der Funktion wp_register_style() getan haben.

Daher ist es möglich, die Funktion wp_enqueue_style() zu verwenden, ohne zuvor wp_register_style() zu nutzen.

Zur Veranschaulichung finden Sie hier Code mit beiden Funktionen:

function register_plugin_styles() {
	wp_register_style( 'plugin-development', plugins_url( '/css/plugin.css' ) );
	wp_enqueue_style( 'plugin-development' );
}
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );_styles' );

Nun folgt der Code ausschließlich mit wp_enqueue_style():

function register_plugin_styles() {
wp_enqueue_style( 'plugin-development', plugins_url( '/css/plugin.css' ) );
}
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );

Ebenso wichtig sind wp_register_script() und wp_enqueue_script(), WordPress-Funktionen zur Verwaltung benutzerdefinierter Skripte. Die Funktion register registriert benutzerdefinierte JavaScript-Dateien, während die Funktion wp_enqueue_script() die registrierten Skripte auf der Website lädt. Diese beiden Funktionen verwenden jeweils zwei Hauptparameter:

• $handle – eindeutiger Name für das Skript. Beachten Sie, dass der Handle in den Funktionen wp_register_script() und wp_enqueue_script() übereinstimmen muss.
• $src – URL oder Pfad zur jQuery-Skriptdatei. Dies ist für wp_enqueue_script() optional, wenn Sie es bereits in der Register-Funktion angegeben haben.

Außerdem können Sie drei zusätzliche Parameter angeben:

• $deps – ein Array anderer Skripte, von denen das aktuelle Skript abhängt. Zum Beispiel jQuery-JavaScript-Dateien oder json2.
• $ver – die Versionsnummer des Skripts. Nützlich, wenn Sie viele verschiedene Skripte haben und deren Versionen nachverfolgen möchten.
• $in_footer – legt fest, ob das Skript im Footer geladen wird. Standardmäßig lädt WordPress Skripte im Abschnitt .

Ähnlich wie bei wp_enqueue_style() können Sie auch die Funktion wp_enqueue_script() verwenden, ohne sie vorher zu registrieren.

Hier ist ein Beispiel mit beiden Funktionen:

function register_plugin_script() {
	wp_register_script( 'new-script', plugins_url( '/script.js' ) );
	wp_enqueue_script( 'new-script' );
}
add_action( 'wp_enqueue_scripts', 'register_plugin_script' );

Sehen wir uns nun ein Beispiel mit einer einzelnen Funktion wp_enqueue_script() an:

function register_plugin_script() {
wp_enqueue_script( 'new-script', plugins_url( '/script.js' ) );
}
add_action( 'wp_enqueue_scripts', 'register_plugin_script' );

So verwenden Sie wp_enqueue_script in WordPress

Nachdem wir die wichtigsten Aspekte der Funktion wp_enqueue_script() behandelt haben, sehen wir uns nun einige gängige Anwendungsfälle an, damit Sie sie besser verstehen.

So verwenden Sie wp_enqueue_script mit jQuery

Die Funktion wp_enqueue_script() verfügt über einen zusätzlichen Parameter array(), mit dem Benutzer die erforderlichen Skriptabhängigkeiten angeben können.

function my_custom_script() {
    wp_enqueue_script( 'registered-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_script' );

Im obigen Code haben wir die Funktion wp_enqueue_scripts() verwendet, um ein Skript mit dem Namen my-script.js einzubinden.

Wir haben festgelegt, dass es von der jQuery-Bibliothek abhängt und im Footer der Seite geladen wird. Außerdem haben wir die Funktion get_template_directory_uri() verwendet, um die URL des aktuellen Theme-Verzeichnisses abzurufen.

So laden Sie Skripte im Footer mit wp_enqueue_script

Die Geschwindigkeit Ihrer Website können Sie verbessern, indem Sie Skripte im Footer laden. Standardmäßig lädt WordPress Skripte im Header-Bereich Ihrer Website, also noch bevor die übrigen Inhalte geladen werden.

Das kann zu längeren Ladezeiten der Seite führen, da der Browser auf diese Skripte warten muss.

Wenn Sie Skripte in den Footer-Bereich verschieben, kann der Browser zuerst den Inhalt anzeigen und anschließend die Skripte laden. Weitere Informationen finden Sie im folgenden Beispiel:

function plugin_assets() {
wp_enqueue_script( 'custom-script', plugins_url( '/js/my-script.js' , __FILE__ ), array( 'jquery' ), true );
}
add_action( 'wp_enqueue_scripts', 'plugin_assets' );

Hier haben wir den Parameter $in_footer der Funktion wp_enqueue_script() auf true gesetzt; dadurch wird das Skript im Footer statt in <head> eingebunden.

So verwenden Sie wp_enqueue_scripts, um Medien für Styles festzulegen

Die Funktionen wp_register_style() und wp_enqueue_style() verfügen über einen media-Parameter. Es gibt den vorgesehenen Medientyp für das Stylesheet an. Standardmäßig ist dieser Parameter auf „all“ gesetzt; das bedeutet, dass das Stylesheet für alle Medientypen gilt.

So sieht eine geänderte Funktion aus:

function my_custom_styles() {
  // Register custom stylesheet
  wp_register_style( 'my-styles', get_template_directory_uri() . '/css/my-styles.css', array(), '1.0', 'screen' );
  // Enqueue custom stylesheet
  wp_enqueue_style( 'my-styles' );
}
// Add the hook to the wp_enqueue_scripts action
add_action( 'wp_enqueue_scripts', 'my_custom_styles' );

In diesem Beispiel haben wir eine Funktion namens my_custom_styles erstellt, die ein benutzerdefiniertes Stylesheet mit dem Namen my-styles.css registriert und eingebunden hat.

Außerdem haben wir den Medienparameter auf screen gesetzt. Das bedeutet, dass das Stylesheet für Bildschirmmedien wie Desktop-Monitore, Laptops oder Tablets gilt.

Sie können auch verschiedene Medientypen verwenden, etwa print für Druckmedien oder handheld für Handheld-Geräte.

Fazit

Der Hook wp_enqueue_scripts und ergänzende Funktionen wie wp_enqueue_script() und wp_enqueue_style() sind nützlich, um Ihrer WordPress-Website einfach und effizient benutzerdefinierte Skripte und Styles hinzuzufügen.

In diesem Tutorial haben wir den Enqueueing-Prozess in WordPress behandelt und verschiedene Anwendungsbeispiele für die Funktionen wp_register_script(), wp_register_style(), wp_enqueue_script() und wp_enqueue_style() vorgestellt.

Wir hoffen, dass dieses Tutorial für Sie hilfreich war und Sie den Enqueueing-Prozess jetzt besser verstehen. Wenn Sie Fragen haben, lesen Sie unseren WordPress-Leitfaden oder hinterlassen Sie unten einen Kommentar.

Alle Tutorial-Inhalte auf dieser Website unterliegen Hostingers strengen redaktionellen Standards und Normen.

Erstellt von

Faradilla Ayunindya

Faradilla, auch bekannt als Ninda, ist Content Marketing Specialist bei Hostinger mit über fünf Jahren Erfahrung und einem zehnjährigen Hintergrund als Linguistin. Sie möchte Technologie für alle zugänglich machen, indem sie komplexe Anleitungen in klare und leicht verständliche Schritt-für-Schritt-Guides verwandelt. In ihrer Freizeit interessiert sie sich für Biowissenschaften oder schaut gerne lustige Tiervideos. Vernetzen Sie sich mit ihr auf LinkedIn.

Mehr von Faradilla Ayunindya