Als wir anfingen, mit WordPress zu arbeiten, schien das Hinzufügen von JavaScript und CSS einfach genug zu sein. Sie haben den Code einfach direkt in Ihr Theme oder Plugin eingefügt und sind weitergegangen.
Aber im Laufe der Jahre haben wir (und viele unserer Leser) auf die harte Tour gelernt, dass diese Abkürzung zu ernsthaften Problemen führen kann. Von Skripten, die miteinander in Konflikt geraten, bis hin zu ganzen Websites, die nach einem Update abstürzen, wir haben alles gesehen.
Die gute Nachricht ist, dass WordPress tatsächlich eine richtige Methode zum Laden Ihrer Skripte und Stile hat – und wenn Sie diese einmal kennen, ersparen Sie sich auf lange Sicht viele Kopfschmerzen.
In diesem Leitfaden zeigen wir Ihnen, wie Sie JavaScript und CSS in WordPress richtig hinzufügen. Egal, ob Sie ein benutzerdefiniertes Theme erstellen oder Ihr erstes Plugin entwickeln, diese Schritte helfen Ihnen dabei, dies auf sichere und zuverlässige Weise zu tun.
Häufiger Fehler beim Hinzufügen von Skripten und Stylesheets in WordPress
Viele neue WordPress-Plugin- und Theme-Entwickler machen den Fehler, ihre Skripte oder Inline-CSS direkt in ihre Plugins und Themes einzufügen.
Einige verwenden fälschlicherweise die wp_head Funktion, um ihre Skripte und Stylesheets zu laden.
<?php add_action('wp_head', 'wpb_bad_script'); function wpb_bad_script() { echo 'jQuery goes here'; } ?> Während der obige Code einfacher erscheinen mag, ist dies der falsche Weg, Skripte in WordPress hinzuzufügen, und er führt zu mehr Konflikten in der Zukunft.
Wenn Sie beispielsweise jQuery manuell laden und ein anderes Plugin jQuery über die richtige Methode lädt, dann wird jQuery zweimal geladen. Wenn es auf jeder Seite geladen wird, wirkt sich dies negativ auf die WordPress-Geschwindigkeit und -Leistung aus.
Es ist auch möglich, dass die beiden unterschiedliche Versionen sind, was ebenfalls zu Konflikten führen kann.
Das gesagt, schauen wir uns den richtigen Weg an, Skripte und Stylesheets hinzuzufügen.
Warum Skripte und Stile in WordPress enqueuen?
WordPress hat eine starke Entwickler-Community. Tausende von Menschen aus der ganzen Welt entwickeln Themes und Plugins für WordPress.
Um sicherzustellen, dass alles ordnungsgemäß funktioniert und niemand anderen behindert, verfügt WordPress über ein Enqueuing-System. Dieses System bietet eine programmierbare Möglichkeit, JavaScript und CSS-Stylesheets zu laden.
Durch die Verwendung der Funktionen wp_enqueue_script und wp_enqueue_style teilen Sie WordPress mit, wann eine Datei geladen werden soll, wo sie geladen werden soll und welche Abhängigkeiten sie hat.
Dieses System ermöglicht es Entwicklern auch, die integrierten JavaScript-Bibliotheken zu nutzen, die mit WordPress gebündelt sind, anstatt dasselbe Drittanbieter-Skript mehrmals zu laden. Dies reduziert die Ladezeit von Seiten und hilft, Konflikte mit anderen Plugins und Themes zu vermeiden.
Wie man Skripte in WordPress richtig einreiht?
Das korrekte Laden von Skripten in WordPress ist sehr einfach. Unten finden Sie ein Beispielcode, den Sie in Ihre Plugin-Datei, in die functions.php-Datei Ihres Themes oder in ein Code-Snippet-Plugin einfügen würden, um Skripte in WordPress korrekt zu laden.
?php function wpb_adding_scripts() { wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true); wp_enqueue_script('my_amazing_script'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); ?> Erklärung:
Wir haben damit begonnen, unser Skript über die Funktion wp_register_script() zu registrieren. Diese Funktion akzeptiert 5 Parameter:
- $handle – Handle ist der eindeutige Name Ihres Skripts. Unserer heißt „my_amazing_script“
- $src – src ist der Speicherort Ihres Skripts. Wir verwenden die Funktion plugins_url, um die richtige URL unseres Plugin-Ordners zu erhalten. Sobald WordPress dies gefunden hat, sucht es in diesem Ordner nach unserer Datei amazing_script.js.
- $deps – deps steht für Abhängigkeit. Da unser Skript jQuery verwendet, haben wir jQuery im Abhängigkeitsbereich hinzugefügt. WordPress wird jQuery automatisch laden, wenn es nicht bereits auf der Website geladen wird.
- $ver – Dies ist die Versionsnummer unseres Skripts. Dieser Parameter ist nicht erforderlich.
- $in_footer – Wir möchten unser Skript im Footer laden, daher haben wir den Wert auf true gesetzt. Wenn Sie das Skript im Header laden möchten, setzen Sie ihn auf false.
Nachdem wir alle Parameter in wp_register_script angegeben haben, können wir das Skript einfach in wp_enqueue_script() aufrufen, was alles bewirkt.
Der letzte Schritt ist die Verwendung des Action Hooks `wp_enqueue_scripts`, um das Skript tatsächlich zu laden. Da dies ein Beispielcode ist, haben wir ihn direkt unter allem anderen hinzugefügt.
Wenn Sie dies zu Ihrem Theme oder Plugin hinzufügen würden, können Sie diesen Action-Hook dort platzieren, wo das Skript tatsächlich benötigt wird. Dies ermöglicht es Ihnen, den Speicherbedarf Ihres Plugins zu reduzieren.
Nun fragen sich vielleicht einige, warum wir den zusätzlichen Schritt machen, das Skript zuerst zu registrieren und es dann einzureihen? Nun, das erlaubt anderen Website-Besitzern, Ihr Skript zu deregistrieren, ohne den Kerncode Ihres Plugins zu ändern.
Styles in WordPress richtig einreihen
Genau wie Skripte können Sie auch Ihre Stylesheets einreihen. Sehen Sie sich das folgende Beispiel an:
<?php function wpb_adding_styles() { wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__)); wp_enqueue_style('my_stylesheet'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' ); ?> Anstatt wp_enqueue_script zu verwenden, verwenden wir jetzt wp_enqueue_style, um unser Stylesheet hinzuzufügen.
Beachten Sie, dass wir den wp_enqueue_scripts Action Hook sowohl für Stile als auch für Skripte verwendet haben. Trotz des Namens funktioniert diese Funktion für beides.
In den obigen Beispielen haben wir die Funktion plugins_url verwendet, um auf den Speicherort des Skripts oder Stils zu verweisen, den wir einreihen wollten.
Wenn Sie jedoch die Funktion enqueue scripts in Ihrem Theme verwenden, verwenden Sie stattdessen einfach get_template_directory_uri(). Wenn Sie mit einem Child Theme arbeiten, verwenden Sie get_stylesheet_directory_uri().
Unten ist ein Beispielcode:
<?php function wpb_adding_scripts() { wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true); wp_enqueue_script('my_amazing_script'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); ?> Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie JavaScript und Stile in WordPress richtig hinzufügen. Möglicherweise möchten Sie auch den Quellcode der besten WordPress-Plugins für einige reale Codebeispiele studieren oder unseren Leitfaden zum Thema einfaches Hinzufügen von JavaScript in WordPress-Seiten oder -Beiträgen lesen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Mrteesurez
Dieser Beitrag ist etwas technisch, aber ich liebe ihn, da ich mich mit der WordPress-Entwicklung beschäftige. Er hat mir geholfen, mehr über die Verwendung von PHP und das richtige Hinzufügen von Stylesheets und Skripten zu lernen. Die Best Practices sind in diesem Artikel aufgeführt, damit es in Zukunft keine Konflikte zwischen Codes gibt.
Schrödingers Katze
Prost, danke fürs Teilen! Tolle Erklärung.
WPBeginner Support
You’re welcome
Admin
Jean-Michel
Hallo,
Ich habe befolgt, was hier gesagt wurde, aber jetzt bekomme ich eine leere weiße Seite auf meiner Website. Könnte mir jemand einen Tipp geben?
Danke
WPBeginner Support
Es sieht so aus, als hätten Sie den Code falsch kopiert oder es gab ein Problem mit etwas auf Ihrer Website. Sie können den Code entfernen mit: https://www.wpbeginner.com/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/
Wenn Sie ihn manuell hinzugefügt haben, ansonsten könnten Sie verwenden:
https://www.wpbeginner.com/wp-tutorials/how-to-fix-the-wordpress-white-screen-of-death/
Admin
Orhan
Dieser Artikel war sehr hilfreich für mich. Danke.
Mark
Typischer Artikel, der einen nachher noch mehr verwirrt als vorher…
Zaved Hossain
Das ist gut, obwohl ich normalerweise wp_enqueue_script/style in einer einzigen Zeile hinzufüge, ohne sie zu registrieren. Coder müssen vorsichtig mit den Parametern sein, vielleicht wäre eine kleine Erklärung dazu hilfreich. Zum Beispiel die verschiedenen Versionen von jQuery (Ihr jQuery-Skript benötigt möglicherweise eine andere Version als die von WordPress) und wo es hinzugefügt werden soll (Header oder Footer, was durch den true/false-Parameter bestimmt wird). Das jQuery-Skript muss im Header hinzugefügt werden (daher muss ein 'false' als Parameterwert übergeben werden), sonst funktioniert es möglicherweise nicht.
Hansjörg Leichsenring
Es gibt oft viele style.css.
Wie kann ich die korrekte Lade-Reihenfolge mit enque sicherstellen und sicherstellen, dass das Child-CSS zuletzt geladen wird?
Prost aus Deutschland
Hansjörg
Carlos Araya
Wie übergebe ich einen leeren Parameter an register_script? Ich möchte sicherstellen, dass das Skript am Ende der Seite geladen wird, kann aber keine Informationen finden, ob dies das Standardverhalten ist oder nicht.
Kerry Beeher
Bonjour,
Vielen Dank für Ihre exzellente Ressource. Merci !!!
Ich bin ein kleiner Anfänger und beginne gerade meine Reise, um PHP zu lernen und wie WordPress wp_enqueue_script und wp_register_script verwendet, um JavaScript und CSS hinzuzufügen.
Ich benutze dieses kostenlose Plugin namens Easy Code Manager, um Ihre Beispiele durchzugehen:
Ich bin mir jedoch nicht sicher, ob dies das richtige Plugin ist.
Ich habe vorher gelesen, dass es keine gute Idee ist, Code in functions.php zu ändern, daher frage ich mich, ob das in Ordnung ist?
Wird es sich bei einem Theme-Update nicht ändern?
Entschuldigung für die Frage, ich lerne noch WordPress.
Danke,
Kerry
Vaibhav Bansal
Ich möchte eine Amazon-Anzeige hinzufügen
Ich habe versucht, sie in ein Text-Widget einzufügen, aber es bleibt leer.
Unten ist der Code-
Dies ist meine Seite-
Hilfe mir. Wie füge ich JS auf meiner Seite hinzu?
WPBeginner Support
Hallo Vaibhav,
Bitte sehen Sie sich unsere Liste der Ad-Management-Plugins für WordPress an. Sie können diese Plugins verwenden, um Anzeigen auf Ihrer WordPress-Website anzuzeigen, ohne Ihre Theme-Dateien zu bearbeiten.
Admin
pradyumna
Ich habe ein JavaScript mit diesem Plugin eingefügt, muss es aber jetzt entfernen. Ich habe versucht, das Plugin zu deinstallieren und zu deaktivieren, aber das JavaScript wird immer noch ausgeführt.
Vijay.Rajpal
Hallo Sir,
Ich benutze das "esteem" Theme und wollte meiner Website einige JavaScript-Funktionalitäten wie Lightbox hinzufügen. Ich habe ein Child-Theme erstellt und der Code sieht wie folgt aus. in der functions.php.
and I am getting an error:-Parse error: syntax error, unexpected '{' in E:\InstantWP_4.5\iwpserver\htdocs\wordpress\wp-content\themes\esteem-child\functions.php on line 18
Please Help I am using sublime as my text editor.
Please Help!!!!!
WPBeginner Support
Es gibt ein unerwartetes { im Code. Gehen Sie zu Zeile 18 Ihrer functions-Datei und studieren Sie den Code sorgfältig. Möglicherweise haben Sie winzigen Code vergessen, wie ein fehlendes ;
Admin
Pramod
Hallo…..
Ich füge eine .js-Datei im js-Verzeichnis von WordPress hinzu und gebe ihre Referenz in der function.php an.
aber es funktioniert nicht
wp_enqueue_script( ‘any-navigation’, get_template_directory_uri() . ‘/js/menu.js’);
Bobbie
Vielen Dank! Ich habe versucht, eine benutzerdefinierte .js-Datei hinzuzufügen, aber dies ist die erste Erklärung, dass register_script benötigt wurde.
colkav
Hey, tolles Tutorial. Ich habe ein Problem beim Hinzufügen eines JavaScripts für Google Analytics, wie hier beschrieben:
Ich habe das Skript in den 'js'-Ordner meines Child-Themes gelegt (nachdem ich den HTML-Code entfernt hatte).
Wenn ich die Seite lade, erhalte ich immer wieder die Fehlermeldung:
ReferenceError: Variable ga kann nicht gefunden werden
(anonyme Funktion)myscript.js:6
…und mir wurde gerade klar, dass ich vielleicht ‘analytics.js’ als Abhängigkeit hinzufügen muss!
Does that sounds right? And if so, how would I add analytics as a dependency for my script? I’ve tried experimenting here to no avail
Shoaib
Gibt es ein Plugin dafür? Ich bin ein Neuling und kann nicht mit Codes spielen. Bitte helfen Sie mir, Sir.
xavi
Hallo.
Danke für dieses großartige Tutorial! Aber wenn Sie sagen „wo das Skript hochgeladen werden soll“, können Sie nur Kopf oder Fuß (auf allen Webseiten!) definieren? Könnten Sie eine bestimmte Seite definieren, auf der es geladen werden soll? Ich brauche es nur auf einer. Danke im Voraus und weiter so! Prost.
technofranchise
Ich möchte JavaScript oder JQuery auf meiner WordPress-Seite verwenden. Irgendwelche Ideen?
Skye Barcus
Ich bin ein absoluter Neuling in JS, kenne aber HTML. Ich möchte dies auf einer WordPress-Seite einfügen:
Grundsätzlich ist es ein Widget, um an einem GoToMeeting teilzunehmen. Das funktioniert, wenn man es einfach in den Body einer HTML-Seite wirft, aber in WordPress wird es unterdrückt.
Können Sie mir eine "Für Dummies"-Version geben, wie ich das zum Laufen bringe?
Tyler Longren
Beim Laden des Stils, in Zeile 6, sollte wp_register_script meiner Meinung nach wp_register_style sein.
WPBeginner Support
Tyler, no this will work too.
Admin
Pedro de Carvalho
warum hast du dich entschieden, _script stattdessen zu verwenden?
Pali Madra
Ich möchte auch wissen, warum _script und nicht _style verwendet wird? Gibt es Vorteile oder funktionieren beide, sodass entweder verwendet werden kann?
Dejan
Ich mag Ihre Seite wirklich, sie ist voller nützlicher Tipps, aber es sieht so aus, als ob Sie es für CSS-Enqueue nicht „richtig“ machen, obwohl Ihr Titel das sagt :) Der richtige Weg wäre:
wp_register_style( ‘my-css-style’, get_template_directory_uri() . ‘/css/style.css’, array(), ‘1.0’, ‘all’ );
wp_enqueue_style( ‘my-css-style’ );
Weiter so mit der guten Arbeit… Cheers!
Adrian Zumbrunnen
Danke für die Mühe, die Sie sich gemacht haben. Es fühlt sich einfach falsch an, wp_enque_script zum Laden von Stylesheets zu verwenden. Wordpress könnte schließlich Skripte anstelle der Stylesheet-Syntax dafür ausgeben.
Betten Sie das wirklich so ein?
WPBeginner Support
Dieses Tutorial zeigt, wie Sie JavaScript- und Stylesheet-Dateien für Ihre Themes oder Plugins in WordPress laden. Wenn Sie mit Einbetten meinten, wie wir Code in Artikeln anzeigen, dann verwenden wir dafür das Syntax Highlighter Plugin.
Admin
oiveros
Hallo, ich bin neu in der WordPress-Themenentwicklung und lese über diese Themen. Ich wollte Sie etwas dazu fragen. Wenn ich den Link zur jQuery-Bibliothek aktualisieren möchte, wie mache ich das oder wo finde ich den Link? Ich habe versucht, es zu tun, aber ich kann es nicht finden. Vielen Dank im Voraus für Ihre Hilfe.
WPBeginner Support
Wenn Sie mit dem Aktualisieren des jQuery-Bibliothekslinks meinen, jQuery von Googles Bibliothek hinzuzufügen. WordPress wird mit jQuery geliefert und um es in Ihrem Theme zu laden, verwenden Sie diese Zeile in Ihrem Theme:
<?php wp_enqueue_script('jquery'); ?>Admin
oiveros
okay, wenn ich also das neueste jQuery haben möchte, benutze ich einfach diese Zeile? Denn jemand hat mir gesagt, ich soll dafür ein Plugin verwenden, aber ich wollte lernen, wie man es ohne Plugin macht.
oliveros
Vielen Dank für Ihre Antwort, ich habe den Beitrag zu diesem Problem hier auf Ihrer Website gefunden.
Mark
Vielen Dank für dieses Tutorial.
Elliott Richmond
Nützlicher Syed, danke.
Ich hatte kürzlich ein Problem beim Laden einer CSS-Datei mit _underscore als Framework. Obwohl das Stylesheet mycustomstyles.css hieß, rief das Theme mycustomstyles.css?ver=xx auf und das Theme lud die Datei aufgrund der Benennung der Datei durch Anhängen von ?ver=xx am Ende des Namens nicht.
Hat das etwas mit dem Standardwert von $ver zu tun?