Advertisement
  1. Code
  2. General

Wie man JavaScript und CSS in Ihre WordPress-Themes und Plugins einfügt

by
Read Time:13 minsLanguages:

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Für Designer und Entwickler ist es sehr wichtig zu wissen, wie JavaScript- und CSS-Dateien ordnungsgemäß in Ihre WordPress-Designs und -Plugins aufgenommen werden können. Wenn Sie sich nicht an Best Practices halten, besteht die Gefahr, dass Konflikte mit anderen Themen und Plugins auftreten und möglicherweise Probleme entstehen, die leicht hätten vermieden werden können. Dieser Artikel ist als Referenz gedacht, um gut mit anderen zu spielen.

Bevor wir beginnen, können Sie unsere WordPress-Themes und WordPress-Plugins durchsuchen, wenn Sie Ihr nächstes Projekt professionell starten möchten.

Und wenn Sie nach dem Lesen dieses Tutorials immer noch nicht sicher sind, wie Sie Ihre JavaScript- und CSS-Dateien richtig einbinden sollen, lohnt es sich möglicherweise, einige der in Envato Studio verfügbaren WordPress-Dienste zu bestellen.

Von der Installation über die Anpassung bis hin zur SEO- und Geschwindigkeitsoptimierung können Sie einen professionellen WordPress-Experten beauftragen, die Dinge von Anfang an richtig einzurichten.


Best Practices machen alle glücklich

Wenn Sie jemals ein Thema oder Plugin für WordPress entwickelt oder mit einem von jemand anderem erstellten Plugin gearbeitet haben, sind Sie wahrscheinlich auf verschiedene Methoden zum Einschließen von JavaScript und CSS gestoßen. Während es mehrere Methoden gibt, die unter bestimmten Umständen zu funktionieren scheinen, wird im WordPress-Codex eine primäre Methode empfohlen. Diese bevorzugte Methode stellt sicher, dass Ihr Thema oder Plugin in allen Fällen funktioniert, vorausgesetzt, andere codieren ebenfalls auf die richtige Weise.

Es gibt auch einige Missverständnisse darüber, was genau der Kodex dazu sagt, was ich zur Klärung beitragen werde.


Was ist in der Box?

Wenn Sie WordPress herunterladen, ist bereits eine Auswahl gängiger JavaScript-Bibliotheken enthalten, die Sie für Ihre JavaScript-Entwicklung verwenden können. Eine Liste der enthaltenen Bibliotheken finden Sie im Artikel WordPress Codex wp_enqueue_script.

Alle diese Bibliotheken sind enthalten, aber standardmäßig lädt WordPress nur die benötigten Bibliotheken und nur dann, wenn sie im Administrator benötigt werden. Wenn Sie JavaScript schreiben, das eine dieser Bibliotheken verwendet, müssen Sie WordPress mitteilen, dass für Ihr Skript zuerst die Bibliothek geladen werden muss.


Erzählen Sie WordPress von Ihrem Skript und was es braucht

Einige Dinge, über die Sie beim Codieren von JavaScript für WordPress nachdenken sollten, sind:

  • Gibt es eine mitgelieferte Bibliothek, die ich verwenden kann?
  • Kann ich die mitgelieferte Version verwenden?
  • Muss ich mein Skript im Frontend und im Admin laden?
  • Auf welchen Front-End- und Admin-Seiten muss ich mein Skript laden?

Durch Beantwortung dieser Fragen wissen Sie, was Sie tun müssen, um Ihr Skript zu registrieren und zu laden. Dies geschieht mit einer WordPress-Funktion namens wp_register_script, und hier ist ihre Verwendung gemäß dem WordPress-Codex:

Was sind diese Variablen und brauchen wir sie jedes Mal? (Dies wird auf der Codex-Seite behandelt, daher werde ich mich kurz fassen und einfaches Englisch verwenden)

  • $handle - was Sie verwenden, um auf dieses bestimmte Skript zu verweisen, wo immer Sie es möglicherweise in die Warteschlange stellen müssen, und Sie müssen diese Variable mindestens einschließen
  • $src - Der Pfad zur Quelldatei in Ihrem Plugin oder Theme
  • $deps - Ein Array, das das $handle für alle anderen Skripte enthält, die Ihr Skript ausführen muss (d. h. eine Abhängigkeit).
  • $ver - Die Versionsnummer für Ihr Skript, die zum Cache-Busting verwendet werden kann. Standardmäßig verwendet WordPress eine eigene Versionsnummer als Versionsnummer für Ihr Skript
  • $in_footer - Soll Ihr Skript in die Fußzeile geladen werden? Setzen Sie dies auf true oder false. Es ist standardmäßig false, wird also in den Header geladen, in dem sich wp_head() befindet, und wenn Sie true angeben, wird es dort geladen, wo wp_footer() im Design angezeigt wird

Was ist "Cache-Busting"?

Browser merken sich anhand der URL des Skripts und des Stylesheets, welche Skripte und Stylesheets sie für eine bestimmte Site heruntergeladen haben. Wenn Sie die URL ändern, auch wenn Sie nur einen Querystring hinzufügen, geht der Browser davon aus, dass es sich um eine neue Datei handelt, und lädt sie herunter.


Ok, probieren wir also einige Beispiele aus

Hier ist das grundlegendste Beispiel zum Laden eines benutzerdefinierten Skripts:

Zuerst registrieren wir das Skript, damit WordPress weiß, wovon wir sprechen. Die Art und Weise, den Pfad für unsere JavaScript-Datei zu finden, ist unterschiedlich, unabhängig davon, ob wir ein Plugin oder ein Thema codieren. Daher habe ich oben Beispiele für beide aufgeführt. Dann stellen wir es in die Warteschlange, um es beim Generieren in den HTML-Code für die Seite einzufügen, standardmäßig im <head>, wo sich wp_head() im Thema befindet.

Die Ausgabe, die wir aus diesem grundlegenden Beispiel erhalten, ist:

Wenn Ihr Skript nun auf einer der in WordPress enthaltenen Bibliotheken wie jQuery basiert, können Sie den Code ganz einfach ändern:

Hinweis: Standardmäßig wird jQuery mit noConflict geladen, um Konflikte mit anderen Bibliotheken (z. B. Prototype) zu vermeiden. Lesen Sie den Abschnitt noConflict im Codex, wenn Sie nicht wissen, wie Sie damit umgehen sollen.

Siehst du was ich dort gemacht habe? Sie fügen einfach ein Array mit dem Handle 'jquery' als Abhängigkeit hinzu. Hier wird ein Array verwendet, da Ihr Skript mehrere Abhängigkeiten aufweisen kann. Wenn Ihr Skript jQuery und jQuery UI verwendet, fügen Sie Ihrem Abhängigkeitsarray jQuery UI hinzu, z. B. array( 'jquery', 'jquery-ui-core' ).

Jetzt hat sich die Ausgabe geändert und wir können sehen, dass jQuery auch in den <head> der Seite eingefügt wurde:

Lassen Sie uns ein Beispiel mit allen Schnickschnack versuchen:

Ok, also habe ich jetzt eine Version hinzugefügt und angegeben, dass dieses Skript in die Fußzeile geladen werden muss. Für die Versionsnummer habe ich mich für das heutige Datum entschieden, da es einfach ist, den Überblick zu behalten, aber Sie können eine beliebige Versionsnummerierung verwenden. Die Ausgabe für diese ist ebenfalls etwas anders, jQuery wird im <head> ausgegeben und unser Skript wird zusammen mit der jQuery-Benutzeroberfläche direkt vor </body> ausgegeben, wie folgt:


Ihre Prioritäten klarstellen

Einige Benutzer ziehen es möglicherweise vor, nicht die richtigen Enqueuing-Methoden zu verwenden, da sie das Gefühl haben, weniger Kontrolle über die Reihenfolge zu haben, in der Skripte geladen werden. In einem Thema, das modernizr verwendet, möchte der Autor des Themas möglicherweise sicherstellen, dass modernizr frühzeitig geladen wird.

Etwas, das ich zuvor nicht erwähnt habe, ist detaillierter, wie die Funktion add_action funktioniert, da wir hier einen kleinen Einfluss auf die Reihenfolge der Dinge ausüben können. Hier ist die Verwendung der Funktion gemäß der WordPress-Codex-Seite:

Beachten Sie, dass in diesem Artikel häufig und bis jetzt nur die Parameter $tag und $function_to_add verwendet werden. Der Parameter $priority ist standardmäßig 10 und der Parameter $accept_args ist standardmäßig 1. Wenn wir möchten, dass unsere Skripte oder Stile früher in die Warteschlange gestellt werden, senken wir einfach den Wert für $priority von der Standardeinstellung. Beispielsweise:

Die Ausgabe ist dieselbe wie zuvor, wird jedoch früher im HTML-Dokument ausgeführt.


Überschreiben von Standardbibliotheken und Verwenden von Content Delivery-Netzwerken

Es kann vorkommen, dass Sie eine andere Version einer Bibliothek verwenden möchten, die in WordPress enthalten ist. Vielleicht möchten Sie eine hochmoderne Version verwenden oder nicht auf die nächste Version von WordPress warten, bevor Sie die neueste stabile Version von jQuery verwenden. Ein weiterer Grund könnte sein, dass Sie die CDN-Version einer Bibliothek von Google nutzen möchten.

Es ist wichtig zu beachten, dass dies nur für Plugins oder Themen erfolgen sollte, die auf Websites verwendet werden, die Sie persönlich pflegen. Alle Plugins oder Themes, die Sie zur öffentlichen Verwendung freigeben, sollten die in WordPress enthaltenen Bibliotheken verwenden.

"Warum?!", Höre ich Sie fragen. Aus dem einfachen Grund, dass Sie diese Websites nicht kontrollieren. Sie wissen nicht, welche anderen Plugins und Themes dort verwendet werden könnten, und Sie wissen nicht, wie oft sie Ihr Plugin oder Theme aktualisieren. Die Verwendung der mit WordPress gepackten Bibliotheken ist die sicherste Option.

Wenn Sie dies jedoch auf einer von Ihnen kontrollierten Site tun möchten, gehen Sie wie folgt vor:

Daher melde ich zunächst die enthaltene Version der Bibliothek ab, da sonst Konflikte zwischen verschiedenen Versionen auftreten können. Registrieren Sie dann die alternative Version mit demselben Handle, und ich habe mich dafür entschieden, null als Version anzugeben (sie befindet sich bereits in der URL!) Und nicht in der Fußzeile angegeben. Der Rest unseres Codes ist der gleiche, da wir davon abhängig waren, welches Skript das 'jquery'-Handle verwendete. Die Ausgabe, die wir jetzt erhalten, sieht folgendermaßen aus:

Hinweis: Einer der Gründe, warum dies in einem Plugin oder Theme für die öffentliche Veröffentlichung eine schlechte Idee ist, besteht darin, dass alle anderen auf dieser Site verwendeten Plugins und Themes jetzt diese Version von jQuery verwenden müssen. In der neu registrierten Version von jQuery ist noConflict nicht festgelegt. Wenn also andere Plugins oder Themenskripte beispielsweise Prototype verwenden, kann dies zu Problemen führen.


Sei nicht gierig

Bisher haben wir im Admin nichts darüber erwähnt, wie das alles geht, nur im Frontend. Der Hauptunterschied besteht darin, welche Aktion verwendet werden soll. Anstelle von add_action( 'wp_enqueue_scripts', 'wptuts_scripts_basic' ); Die Aktion für den Administrator lautet add_action( 'admin_enqueue_scripts', 'wptuts_scripts_basic' ).

Was sowohl für das Front-End als auch für den Administrator wichtig ist, ist die Auswahl der Seiten, auf die Sie Ihre Skripte laden. Wenn Ihr Plugin oder Thema ein Skript enthält, das nur auf einer Front-End- oder Administrationsseite ausgeführt wird, z. B. auf der Optionsseite des Themas oder auf einer Seite mit einem bestimmten Widget, müssen Sie Ihr Skript nur auf dieser Seite laden. Es macht keinen Sinn, Dinge zu verstopfen und Skripte auf Seiten zu laden, auf denen sie nicht verwendet werden!

Im WordPress-Codex gibt es ein großartiges Beispiel dafür, wie Skripte nur auf Plugin-Seiten geladen werden. Da Plugins und Themes in ihrer Schreibweise sehr unterschiedlich sein können, werde ich hier nicht näher darauf eingehen, wie Sie auswählen können, auf welche Seiten Sie Skripte laden, aber es war wichtig zu erwähnen, dass Sie sich dessen bewusst sind, wann Sie codieren.


Das sind Skripte, jetzt Stile

Der Prozess für Stile ist fast genau der gleiche wie der Prozess für Skripte. Dies geschieht mit einer WordPress-Funktion namens wp_register_style, und hier ist ihre Verwendung gemäß dem WordPress-Codex:

Beachten Sie, dass der einzige Unterschied zwischen wp_register_script und wp_register_style darin besteht, dass wir anstelle eines $in_footer-Parameters einen $media-Parameter haben. Dieser Parameter kann auf einen der folgenden Werte eingestellt werden: 'all', 'screen', 'handheld' und 'print' oder einen anderen von W3C erkannten Medientyp.

Ein Beispiel dafür, wie Sie einen Stil in die Warteschlange stellen könnten, wäre:

Dies ist ein ziemlich umfassendes Beispiel, bei dem die meisten Parameter verwendet werden. Die von ihm erzeugte Ausgabe sieht folgendermaßen aus:


Warum macht nicht jeder schon Dinge so?

Gute Frage, und die andere Frage, die Sie vielleicht stellen, lautet: "Warum denken Sie, dass dies der 'richtige' Weg ist und nicht nur Ihre Präferenz?". Im Wesentlichen lautet die Antwort, dass dies der von WordPress empfohlene Ansatz ist. Es stellt sicher, dass jede Kombination von Plugins und Themes problemlos und ohne Verdoppelung zusammenarbeiten kann.

Ich habe einige Themen und Frameworks gesehen, die <script></script> und <link /> Tags in ihren header.php- und sogar footer.php-Dateien verwenden, um die Skripte und Stile für das Thema selbst zu laden . Es gibt wirklich keinen Grund, die Dinge so zu machen. Wie ich oben gezeigt habe, ist es durchaus möglich, Skripte und Stile anhand des Komforts und der Sicherheit Ihrer functions.php zu priorisieren und zu bestimmen, ob sie in die Kopf- oder Fußzeile geladen werden. Der Vorteil ist, dass Ihr Thema / Framework mit einer größeren Auswahl anderer Plugins / untergeordneter Themen funktioniert.

Ein Beispiel war das Laden von jQuery mithilfe der <script></script>-Tags, was anscheinend gut funktioniert. Dies kann jedoch dazu führen, dass jQuery zweimal geladen wird! Das Laden von jQuery auf diese Weise hindert WordPress nicht daran, seine Version von jQuery für andere Plugins zu laden, da sich die Version von WordPress standardmäßig im NoConflict-Modus befindet und ein Plugin dies möglicherweise als Abhängigkeit angibt. Jetzt funktioniert jQuery sowohl für den noConflict-Modus als auch für $ und kann wahrscheinlich auch alle Plugins beschädigen, die die Prototype-Bibliothek verwenden.


Abschluss

WordPress ist ein fantastisches System und wurde mit viel Nachdenken entwickelt. Wenn ein Mechanismus zur Verfügung gestellt wird, um etwas zu tun, ist es oft eine gute Idee, ihn zu verwenden. Denken Sie bei der Entwicklung Ihrer Plugins und Themes daran, nachdenklich zu programmieren und gut mit anderen zu spielen.

Was halten Sie von der Verwendung von wp_enqueue_script und den damit verbundenen Funktionen und Aktionen? Kennen Sie Beispiele, bei denen es falsch gemacht wird? Kennen Sie einen Grund, den obigen Ratschlägen nicht zu folgen?

Wenn Sie eine vorgefertigte Lösung benötigen, können Sie unsere Wordpress-Designs und Wordpress-Plugins auf Envato Market durchsuchen.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.