{"id":11553,"date":"2026-05-14T11:02:32","date_gmt":"2026-05-14T04:02:32","guid":{"rendered":"\/de\/tutorials\/?p=11553"},"modified":"2026-05-14T11:02:34","modified_gmt":"2026-05-14T04:02:34","slug":"wp-enqueue-script-verwenden","status":"publish","type":"post","link":"\/de\/tutorials\/wp-enqueue-script-verwenden","title":{"rendered":"So binden Sie Skripte mit dem Hook wp_enqueue_scripts in WordPress ein"},"content":{"rendered":"<p>Der Action-Hook <strong>wp_enqueue_scripts<\/strong> spielt in der WordPress-Entwicklung eine entscheidende Rolle, da Entwickler damit Skripte und Styles korrekt in ihre Themes oder Plugins einbinden k&ouml;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.<\/p><p>Zusammen mit den Funktionen <strong>wp_enqueue_script()<\/strong> und <strong>wp_enqueue_style()<\/strong> hilft es WordPress dabei, Inhalte auf der Website auszugeben.<\/p><p>In diesem Tutorial behandeln wir den Action Hook <strong>wp_enqueue_scripts<\/strong> zusammen mit den zugeh&ouml;rigen Funktionen und zeigen verschiedene Anwendungsf&auml;lle, mit denen Sie Ihre WordPress-Projekte verbessern k&ouml;nnen.<\/p><h2 class=\"wp-block-heading\" id=\"h-how-enqueueing-works-in-wordpress\">So funktioniert Enqueueing in WordPress<\/h2><p>In WordPress bezeichnet Enqueueing das Registrieren und Einbinden von Skripten und Stylesheets in Ihre Website.<\/p><p>Die Funktionen <strong>wp_enqueue_script()<\/strong> und <strong>wp_enqueue_style()<\/strong> weisen den WordPress-Server an, diese Skripte und Stylesheets in eine Warteschlange aufzunehmen, damit sie im Frontend Ihrer Website geladen werden.<\/p><p>Der wichtigste Aspekt des Enqueueings ist, dass es die Leistung Ihrer Website verbessern kann, indem es die Ladezeiten verk&uuml;rzt, und dabei hilft, Skriptkonflikte zu vermeiden, wenn verschiedene Plugins oder WordPress-Themes versuchen, dasselbe Skript oder Stylesheet zu laden.<\/p><h2 class=\"wp-block-heading\" id=\"h-understanding-wp-enqueue-script\">wp_enqueue_script verstehen<\/h2><p>Der Enqueueing-Prozess besteht aus dem WordPress-Hook <strong>wp_enqueue_scripts<\/strong> und zwei zus&auml;tzlichen Funktionen f&uuml;r Stylesheets und Skripte.<\/p><p>Zun&auml;chst einmal ist <strong>wp_enqueue_scripts<\/strong> ein Action-Hook, der dazu dient, Stylesheets und JavaScript-Dateien auf Ihrer WordPress-Website einzubinden. Dieser Hook wird in der Regel in der Datei <strong>functions.php<\/strong> eines WordPress-Themes oder in Plugin-Dateien verwendet.<\/p><p>Dies ist die empfohlene Methode, um JavaScript zu WordPress hinzuzuf&uuml;gen, da Entwickler festlegen k&ouml;nnen, wann der Code geladen wird, um Konflikte zu vermeiden.<\/p><p>Inzwischen sind <strong>wp_register_style()<\/strong> und <strong>wp_enqueue_style()<\/strong> WordPress-Funktionen, die mit Stylesheets arbeiten. Die Register-Funktion dient dazu, ein Stylesheet zur Verwendung in einem Theme oder Plugin zu registrieren, w&auml;hrend die Enqueue-Funktion ein registriertes Stylesheet in eine WordPress-Website l&auml;dt.<\/p><p>Standardm&auml;&szlig;ig haben beide Funktionen zwei Hauptparameter:<\/p><ul class=\"wp-block-list\">\n<li><strong>$handle <\/strong>&ndash; ein eindeutiger Name f&uuml;r ein Stylesheet, um es innerhalb der WordPress-Codebasis zu identifizieren. Er muss mit dem Handle &uuml;bereinstimmen, das Sie beim Registrieren des Stylesheets angegeben haben.<\/li>\n\n\n\n<li><strong>$src <\/strong>&ndash; 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. <strong>$src<\/strong> ist optional und muss nur angegeben werden, wenn Sie dies nicht in der Funktion <strong>wp_register_style()<\/strong> getan haben.<\/li>\n<\/ul><p>Daher ist es m&ouml;glich, die Funktion <strong>wp_enqueue_style()<\/strong> zu verwenden, ohne zuvor <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_register_style\/\" target=\"_blank\" rel=\"noopener\"><strong>wp_register_style()<\/strong><\/a> zu nutzen.<\/p><p>Zur Veranschaulichung finden Sie hier Code mit beiden Funktionen:<\/p><pre class=\"wp-block-preformatted\">function register_plugin_styles() {<br>\twp_register_style( 'plugin-development', plugins_url( '\/css\/plugin.css' ) );<br>\twp_enqueue_style( 'plugin-development' );<br>}<br>add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );_styles' );<\/pre><p>Nun folgt der Code ausschlie&szlig;lich mit <strong>wp_enqueue_style()<\/strong>:<\/p><pre class=\"wp-block-preformatted\">function register_plugin_styles() {<br>wp_enqueue_style( 'plugin-development', plugins_url( '\/css\/plugin.css' ) );<br>}<br>add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );<\/pre><p>Ebenso wichtig sind <strong>wp_register_script()<\/strong> und <strong>wp_enqueue_script()<\/strong>,<strong> <\/strong>WordPress-Funktionen zur Verwaltung benutzerdefinierter Skripte. Die Funktion register registriert benutzerdefinierte JavaScript-Dateien, w&auml;hrend die Funktion <strong>wp_enqueue_script()<\/strong> die registrierten Skripte auf der Website l&auml;dt. Diese beiden Funktionen verwenden jeweils zwei Hauptparameter:<\/p><ul class=\"wp-block-list\">\n<li><strong>$handle<\/strong> &ndash; eindeutiger Name f&uuml;r das Skript. Beachten Sie, dass der Handle in den Funktionen <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_register_script\/\" target=\"_blank\" rel=\"noopener\"><strong>wp_register_script()<\/strong><\/a> und <strong>wp_enqueue_script()<\/strong> &uuml;bereinstimmen muss.<\/li>\n\n\n\n<li><strong>$src<\/strong> &ndash; URL oder Pfad zur jQuery-Skriptdatei. Dies ist f&uuml;r <strong>wp_enqueue_script()<\/strong> optional, wenn Sie es bereits in der Register-Funktion angegeben haben.<\/li>\n<\/ul><p>Au&szlig;erdem k&ouml;nnen Sie drei zus&auml;tzliche Parameter angeben:<\/p><ul class=\"wp-block-list\">\n<li><strong>$deps<\/strong> &ndash; ein Array anderer Skripte, von denen das aktuelle Skript abh&auml;ngt. Zum Beispiel jQuery-JavaScript-Dateien oder json2.<\/li>\n\n\n\n<li><strong>$ver<\/strong> &ndash; die Versionsnummer des Skripts. N&uuml;tzlich, wenn Sie viele verschiedene Skripte haben und deren Versionen nachverfolgen m&ouml;chten.<\/li>\n\n\n\n<li><strong>$in_footer<\/strong> &ndash; legt fest, ob das Skript im Footer geladen wird. Standardm&auml;&szlig;ig l&auml;dt WordPress Skripte im Abschnitt .<\/li>\n<\/ul><p>&Auml;hnlich wie bei <strong>wp_enqueue_style()<\/strong> k&ouml;nnen Sie auch die Funktion <strong>wp_enqueue_script()<\/strong> verwenden, ohne sie vorher zu registrieren.<\/p><p>Hier ist ein Beispiel mit beiden Funktionen:<\/p><pre class=\"wp-block-preformatted\">function register_plugin_script() {<br>\twp_register_script( 'new-script', plugins_url( '\/script.js' ) );<br>\twp_enqueue_script( 'new-script' );<br>}<br>add_action( 'wp_enqueue_scripts', 'register_plugin_script' );<\/pre><p>Sehen wir uns nun ein Beispiel mit einer einzelnen Funktion <strong>wp_enqueue_script()<\/strong> an:<\/p><pre class=\"wp-block-preformatted\">function register_plugin_script() {<br>wp_enqueue_script( 'new-script', plugins_url( '\/script.js' ) );<br>}<br>add_action( 'wp_enqueue_scripts', 'register_plugin_script' );<\/pre><h2 class=\"wp-block-heading\" id=\"h-how-to-use-wp-enqueue-script-in-wordpress\">So verwenden Sie wp_enqueue_script in WordPress<\/h2><p>Nachdem wir die wichtigsten Aspekte der Funktion <strong>wp_enqueue_script()<\/strong> behandelt haben, sehen wir uns nun einige g&auml;ngige Anwendungsf&auml;lle an, damit Sie sie besser verstehen.<\/p><h3 class=\"wp-block-heading\" id=\"h-how-to-use-wp-enqueue-script-with-jquery\">So verwenden Sie wp_enqueue_script mit jQuery<\/h3><p>Die Funktion <strong>wp_enqueue_script()<\/strong> verf&uuml;gt &uuml;ber einen zus&auml;tzlichen Parameter <strong>array()<\/strong>, mit dem Benutzer die erforderlichen Skriptabh&auml;ngigkeiten angeben k&ouml;nnen.<\/p><pre class=\"wp-block-preformatted\">function my_custom_script() {<br>    wp_enqueue_script( 'registered-script', get_template_directory_uri() . '\/js\/my-script.js', array('jquery'), '1.0', true );<br>}<br>add_action( 'wp_enqueue_scripts', 'my_custom_script' );<\/pre><p>Im obigen Code haben wir die Funktion <strong>wp_enqueue_scripts()<\/strong> verwendet, um ein Skript mit dem Namen <strong>my-script.js<\/strong> einzubinden.<\/p><p>Wir haben festgelegt, dass es von der jQuery-Bibliothek abh&auml;ngt und im Footer der Seite geladen wird. Au&szlig;erdem haben wir die Funktion <strong>get_template_directory_uri()<\/strong> verwendet, um die URL des aktuellen Theme-Verzeichnisses abzurufen.<\/p><h3 class=\"wp-block-heading\" id=\"h-how-to-load-scripts-in-the-footer-with-wp-enqueue-script\">So laden Sie Skripte im Footer mit wp_enqueue_script<\/h3><p>Die Geschwindigkeit Ihrer Website k&ouml;nnen Sie verbessern, indem Sie Skripte im Footer laden. Standardm&auml;&szlig;ig l&auml;dt WordPress Skripte im Header-Bereich Ihrer Website, also noch bevor die &uuml;brigen Inhalte geladen werden.<\/p><p>Das kann zu l&auml;ngeren Ladezeiten der Seite f&uuml;hren, da der Browser auf diese Skripte warten muss.<\/p><p>Wenn Sie Skripte in den Footer-Bereich verschieben, kann der Browser zuerst den Inhalt anzeigen und anschlie&szlig;end die Skripte laden. Weitere Informationen finden Sie im folgenden Beispiel:<\/p><pre class=\"wp-block-preformatted\">function plugin_assets() {<br>wp_enqueue_script( 'custom-script', plugins_url( '\/js\/my-script.js' , __FILE__ ), array( 'jquery' ), true );<br>}<br>add_action( 'wp_enqueue_scripts', 'plugin_assets' );<\/pre><p>Hier haben wir den Parameter <strong>$in_footer<\/strong> <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/\" target=\"_blank\" rel=\"noopener\">der Funktion <strong>wp_enqueue_script()<\/strong><\/a> auf <strong>true<\/strong> gesetzt; dadurch wird das Skript im Footer statt in <strong>&lt;head&gt;<\/strong> eingebunden.<\/p><h3 class=\"wp-block-heading\" id=\"h-how-to-use-wp-enqueue-scripts-to-specify-media-for-styles\">So verwenden Sie wp_enqueue_scripts, um Medien f&uuml;r Styles festzulegen<\/h3><p>Die Funktionen <strong>wp_register_style()<\/strong> und <strong>wp_enqueue_style()<\/strong> verf&uuml;gen &uuml;ber einen media-Parameter. Es gibt den vorgesehenen Medientyp f&uuml;r das Stylesheet an. Standardm&auml;&szlig;ig ist dieser Parameter auf &bdquo;<strong>all<\/strong>&ldquo; gesetzt; das bedeutet, dass das Stylesheet f&uuml;r alle Medientypen gilt.<\/p><p>So sieht eine ge&auml;nderte Funktion aus:<\/p><pre class=\"wp-block-preformatted\">function my_custom_styles() {<br>  \/\/ Register custom stylesheet<br>  wp_register_style( 'my-styles', get_template_directory_uri() . '\/css\/my-styles.css', array(), '1.0', 'screen' );<br>  \/\/ Enqueue custom stylesheet<br>  wp_enqueue_style( 'my-styles' );<br>}<br>\/\/ Add the hook to the wp_enqueue_scripts action<br>add_action( 'wp_enqueue_scripts', 'my_custom_styles' );<\/pre><p>In diesem Beispiel haben wir eine Funktion namens <strong>my_custom_styles<\/strong> erstellt, die ein benutzerdefiniertes Stylesheet mit dem Namen <strong>my-styles.css<\/strong> registriert und eingebunden hat.<\/p><p>Au&szlig;erdem haben wir den Medienparameter auf <strong>screen<\/strong> gesetzt. Das bedeutet, dass das Stylesheet f&uuml;r Bildschirmmedien wie Desktop-Monitore, Laptops oder Tablets gilt.<\/p><p>Sie k&ouml;nnen auch verschiedene Medientypen verwenden, etwa <strong>print<\/strong> f&uuml;r Druckmedien oder <strong>handheld<\/strong> f&uuml;r Handheld-Ger&auml;te.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/de\/wordpress-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/DE-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-4104\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/DE-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/DE-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/DE-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Fazit<\/h2><p>Der Hook <strong>wp_enqueue_scripts<\/strong> und erg&auml;nzende Funktionen wie <strong>wp_enqueue_script()<\/strong> und <strong>wp_enqueue_style()<\/strong> sind n&uuml;tzlich, um Ihrer WordPress-Website einfach und effizient benutzerdefinierte Skripte und Styles hinzuzuf&uuml;gen.<\/p><p>In diesem Tutorial haben wir den Enqueueing-Prozess in WordPress behandelt und verschiedene Anwendungsbeispiele f&uuml;r die Funktionen <strong>wp_register_script()<\/strong>, <strong>wp_register_style()<\/strong>, <strong>wp_enqueue_script()<\/strong> und <strong>wp_enqueue_style()<\/strong> vorgestellt.<\/p><p>Wir hoffen, dass dieses Tutorial f&uuml;r Sie hilfreich war und Sie den Enqueueing-Prozess jetzt besser verstehen. Wenn Sie Fragen haben, lesen Sie unseren <a href=\"\/de\/tutorials\/wordpress-tutorial\">WordPress-Leitfaden<\/a> oder hinterlassen Sie unten einen Kommentar.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&ouml;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 [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/de\/tutorials\/wp-enqueue-script-verwenden\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":190,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"wp_enqueue_script verwenden und Assets richtig laden","rank_math_description":"wp_enqueue_script verwenden, um Skripte und Styles korrekt im Frontend zu laden. Lernen Sie Syntax und Best Practices.","rank_math_focus_keyword":"wp_enqueue_script verwenden","footnotes":""},"categories":[20],"tags":[],"class_list":["post-11553","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"hreflangs":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/11553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/users\/190"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/comments?post=11553"}],"version-history":[{"count":4,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/11553\/revisions"}],"predecessor-version":[{"id":11842,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/11553\/revisions\/11842"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/media?parent=11553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/categories?post=11553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/tags?post=11553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}