Share
Für Designer und Entwickler ist es sehr wichtig zu wissen, wie JavaScript- und CSS-Dateien ordnungsgemäß in WordPress-Designs und -Plugins eingefügt werden. Wenn Sie sich nicht an bewährte Vorgehensweisen halten, besteht die Gefahr, dass Sie mit anderen Designs und Plugins in Konflikt stehen und möglicherweise Probleme verursachen, die leicht vermieden werden könnten. Dieser Artikel ist als Referenz gedacht, um gut mit anderen zu spielen.
Bevor wir loslegen, können Sie durch unsere WordPress-Themes und WordPress-Plugins blättern, wenn Sie Ihr nächstes Projekt professionell starten möchten.
Wenn Sie nach dem Lesen dieses Tutorials immer noch nicht sicher sind, wie Sie Ihre JavaScript- und CSS-Dateien richtig einfügen, lohnt es sich möglicherweise, einige der in Envato Studio verfügbaren WordPress-Services zu bestellen.
Von der Installation über die Anpassung bis hin zur Optimierung von SEO und Geschwindigkeit können Sie einen professionellen WordPress-Experten einschalten, der die Dinge von Anfang an richtig einrichtet.
Wenn Sie jemals ein Theme oder Plugin für WordPress entwickelt haben oder mit einem von einem anderen Benutzer erstellten gearbeitet haben, sind Sie wahrscheinlich auf verschiedene Methoden gestoßen, um JavaScript und CSS zu verwenden. Obwohl es mehrere Methoden gibt, die unter bestimmten Umständen zu funktionieren scheinen, wird im WordPress-Codex eine Hauptmethode empfohlen. Dieser bevorzugte Weg stellt sicher, dass Ihr Theme oder Plugin in allen Fällen funktioniert, vorausgesetzt, dass andere auch den richtigen Code verwenden.
Es gibt auch einige Missverständnisse darüber, was genau der Kodex dazu sagt, und ich werde helfen, dies zu klären.
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 WordPress-Codex wp_enqueue_script Artikel.
Alle diese Bibliotheken sind enthalten, aber WordPress lädt standardmäßig nur die Bibliotheken, die benötigt werden, und nur dann, wenn sie vom Administrator benötigt werden. Wenn Sie JavaScript schreiben, das eine dieser Bibliotheken verwendet, müssen Sie WordPress mitteilen, dass für das Skript die Bibliothek zuerst geladen werden muss.
Wenn Sie JavaScript für WordPress programmieren, sollten Sie Folgendes beachten:
Wenn Sie diese Fragen beantworten, wissen Sie, was Sie zum Registrieren und Laden Ihres Skripts tun müssen. Dies geschieht mithilfe einer aufgerufenen WordPress-Funktion wp_register_script, und hier ist seine Verwendung gemäß dem WordPress-Codex:
wp_register_script ($ handle, $ src, $ deps, $ ver, $ in_footer);
Was sind diese Variablen und brauchen wir sie jedes Mal? (Dies wird auf der Codex-Seite behandelt, daher werde ich mich kurz fassen und schlichtes Englisch verwenden.)
Accentsconagua
$ handle - was Sie verwenden, um auf dieses bestimmte Skript zu verweisen, wo immer Sie es möglicherweise in die Warteschlange einreihen müssen, und Sie müssen diese Variable mindestens einschließen$ src - der Pfad zur Quelldatei in Ihrem Plugin oder Design$ deps - ein Array mit der $ handle für alle anderen Skripts, die Ihr Skript ausführen muss (d. h. eine Abhängigkeit)$ ver - Die Versionsnummer für Ihr Skript, die für das Cache-Busting verwendet werden kann. Standardmäßig verwendet WordPress eine eigene Versionsnummer als Versionsnummer für Ihr Skript$ in_footer - Soll das Skript in die Fußzeile geladen werden? Stellen Sie dies auf wahr oder falsch. Es ist falsch Standardmäßig lädt es also in der Kopfzeile wo wp_head () ist, und wenn Sie angeben wahr es wird wo laden wp_footer () erscheint im ThemaBrowser können sich daran erinnern, welche Skripts und Stylesheets sie für eine bestimmte Website anhand der URL des Skripts und des Stylesheets heruntergeladen haben. Wenn Sie die URL ändern, auch nur durch Hinzufügen eines Abfragestrings, geht der Browser davon aus, dass es sich um eine neue Datei handelt, und lädt sie herunter.
Hier ist das einfachste Beispiel für das Laden eines benutzerdefinierten Skripts:
function wptuts_scripts_basic () // Registrieren Sie das Skript wie folgt für ein Plugin: wp_register_script ('custom-script', plugins_url ('/js/custom-script.js', __FILE__)); // oder // Registrieren Sie das Skript wie folgt für ein Design: wp_register_script ('custom-script', get_template_directory_uri (). '/js/custom-script.js'); // Für ein Plugin oder ein Design können Sie das Skript dann in die Warteschlange setzen: wp_enqueue_script ('custom-script'); add_action ('wp_enqueue_scripts', 'wptuts_scripts_basic'); Zuerst registrieren wir das Skript, sodass WordPress weiß, worüber wir sprechen. Den Pfad für unsere JavaScript-Datei finden Sie auf andere Weise, unabhängig davon, ob wir ein Plugin oder ein Design programmieren. Dann stellen wir uns in eine Warteschlange, um in den HTML-Code für die Seite eingefügt zu werden, wenn diese generiert wird, standardmäßig in der bei dem die wp_head () ist im Thema.
Die Ausgabe, die wir von diesem grundlegenden Beispiel erhalten, ist:
Wenn Ihr Skript nun auf eine der in WordPress enthaltenen Bibliotheken wie jQuery angewiesen ist, können Sie den Code sehr einfach ändern:
Funktion wptuts_scripts_with_jquery () // Registrieren Sie das Skript wie folgt für ein Plugin: wp_register_script ('custom-script', plugins_url ('/js/custom-script.js', __FILE__), array ('jquery')); // oder // Registrieren Sie das Skript wie folgt für ein Design: wp_register_script ('custom-script', get_template_directory_uri (). '/js/custom-script.js', array ('jquery')); // Für ein Plugin oder ein Design können Sie das Skript dann in die Warteschlange setzen: wp_enqueue_script ('custom-script'); add_action ('wp_enqueue_scripts', 'wptuts_scripts_with_jquery'); Hinweis: Standardmäßig wird jQuery mit noConflict geladen, um Kollisionen mit anderen Bibliotheken (z. B. Prototyp) zu vermeiden. Lesen Sie den Abschnitt noConflict des 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 'Jquery'-Handle als Abhängigkeit hinzu. Hier wird ein Array verwendet, da Ihr Skript möglicherweise mehrere Abhängigkeiten hat. Wenn Ihr Skript jQuery und die jQuery-Benutzeroberfläche verwendet, fügen Sie dem Abhängigkeits-Array die jQuery-Benutzeroberfläche hinzu, wie z array ('jquery', 'jquery-ui-core')
Nun hat sich die Ausgabe geändert, und wir können sehen, dass auch jQuery in der hinzugefügt wurde der Seite:
Lassen Sie uns ein Beispiel mit all den Glocken und Pfeifen versuchen:
Funktion wptuts_scripts_with_the_lot () // So registrieren Sie das Skript für ein Plugin: wp_register_script ('custom-script', plugins_url ('/js/custom-script.js', __FILE__), array ('jquery', 'jquery-ui -Kern '),' 20120208 ', wahr); // oder // Registrieren Sie das Skript wie folgt für ein Design: wp_register_script ('custom-script', get_template_directory_uri (). '/js/custom-script.js', array ('jquery', 'jquery-ui-core' ), '20120208', wahr); // Für ein Plugin oder ein Design können Sie das Skript dann in die Warteschlange setzen: wp_enqueue_script ('custom-script'); add_action ('wp_enqueue_scripts', 'wptuts_scripts_with_the_lot'); Ok, ich habe jetzt eine Version hinzugefügt und angegeben, dass dieses Skript in die Fußzeile geladen werden muss. Ich habe mich für die Versionsnummer für das heutige Datum entschieden, da es einfach ist, den Überblick zu behalten, aber Sie können jede Versionsnummer verwenden, die Sie möchten. Die Ausgabe für dieses ist etwas anders, jQuery wird im ausgegeben und unser Skript wird zusammen mit der jQuery-Benutzeroberfläche kurz zuvor ausgegeben , so was:
… … …
Einige Benutzer ziehen es möglicherweise vor, die richtigen Warteschlangenmethoden nicht zu verwenden, da sie der Ansicht sind, dass sie die Reihenfolge, in der Skripts geladen werden, weniger kontrollieren können. In einem Thema, das modernizr verwendet, möchte der Autor des Themas beispielsweise sicherstellen, dass modernizr früh geladen wird.
Etwas, was ich vorher nicht erwähnt habe, ist genauer, wie das geht add_action Funktion 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:
add_action ($ tag, $ function_to_add, $ Priorität, $ akzeptierte_args);
Beachten Sie, dass in diesem Artikel häufig nur die $ tag und $ function_to_add Parameter werden verwendet. Das $ Priorität Der Parameter ist standardmäßig auf 10 eingestellt $ accept_args Der Standardwert für Parameter ist 1. Wenn Sie möchten, dass unsere Skripts oder Stile früher in die Warteschlange gestellt werden, verringern Sie einfach den Wert für $ Priorität von der Standardeinstellung. Zum Beispiel:
function wptuts_scripts_important () // Registrieren Sie das Skript wie folgt für ein Plugin: wp_register_script ('custom-script', plugins_url ('/js/custom-script.js', __FILE__)); // oder // Registrieren Sie das Skript wie folgt für ein Design: wp_register_script ('custom-script', get_template_directory_uri (). '/js/custom-script.js'); // Für ein Plugin oder ein Design können Sie das Skript dann in die Warteschlange setzen: wp_enqueue_script ('custom-script'); add_action ('wp_enqueue_scripts', 'wptuts_scripts_important', 5); Die Ausgabe ist dieselbe wie zuvor, sie wird jedoch früher im HTML-Dokument angezeigt.
Es kann vorkommen, dass Sie eine andere Version einer in WordPress enthaltenen Bibliothek verwenden möchten. Vielleicht möchten Sie eine topaktuelle 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 sollte nur auf Plugins oder Themes, die auf Websites verwendet werden, die Sie sein werden persönlich pflegen. Alle Plugins oder Designs, die Sie zur öffentlichen Verwendung freigeben, sollten die in WordPress enthaltenen Bibliotheken verwenden.
"Warum?!", Ich höre, wie du fragst. Aus dem einfachen Grund, dass Sie diese Sites nicht kontrollieren. Sie wissen nicht, welche anderen Plugins und Designs dort verwendet werden können, und Sie wissen nicht, wie oft sie Ihr Plugin oder Design aktualisieren. Die Verwendung der mit WordPress gelieferten Bibliotheken ist die sicherste Option.
Wenn Sie dies jedoch auf einer von Ihnen kontrollierten Site tun möchten, gehen Sie wie folgt vor:
function wptuts_scripts_load_cdn () // Deregistrierung der enthaltenen Bibliothek wp_deregister_script ('jquery'); // Registrieren Sie die Bibliothek erneut über das CDN wp_register_script von Google ('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js') ); // Registrieren Sie das Skript wie folgt für ein Plugin: wp_register_script ('custom-script', plugins_url ('/js/custom-script.js', __FILE__), array ('jquery')); // oder // Registrieren Sie das Skript wie folgt für ein Design: wp_register_script ('custom-script', get_template_directory_uri (). '/js/custom-script.js', array ('jquery')); // Für ein Plugin oder ein Design können Sie das Skript dann in die Warteschlange setzen: wp_enqueue_script ('custom-script'); add_action ('wp_enqueue_scripts', 'wptuts_scripts_load_cdn'); Zuerst muss ich die enthaltene Version der Bibliothek abmelden, da sonst Konflikte zwischen verschiedenen Versionen auftreten könnten. Registrieren Sie dann die alternative Version mit demselben Handle und ich habe als Version null angegeben (sie ist bereits in der URL!) Und nicht in der Fußzeile angegeben. Der Rest unseres Codes ist derselbe, da wir davon abhängig waren, in welchem Skript der Jquery-Handle verwendet wurde. Die Ausgabe, die wir jetzt erhalten, sieht so aus:
Hinweis: Dies ist einer der Gründe, warum dies in einem Plugin oder Thema für eine öffentliche Veröffentlichung keine gute Idee ist, da alle anderen auf dieser Site verwendeten Plugins und Designs diese Version von jQuery verwenden müssen. Für die neu registrierte Version von jQuery ist noConflict nicht gesetzt. Wenn also andere Plugins oder Designskripte Prototype verwenden, ist dies z, das wird Dinge brechen.
Bisher haben wir im Admin nur über das Front-End nichts darüber gesagt, wie das geht. Der Hauptunterschied besteht darin, welche Aktion verwendet werden soll. Anstatt add_action ('wp_enqueue_scripts', 'wptuts_scripts_basic'); Was wir für das Frontend verwenden, ist die Aktion für den Admin add_action ('admin_enqueue_scripts', 'wptuts_scripts_basic');
Für das Frontend und den Administrator ist es wichtig zu wissen, auf welchen Seiten Sie Ihre Skripts laden. Wenn für Ihr Plugin oder Design ein Skript vorhanden ist, das nur auf einer Front-End- oder Admin-Seite etwas ausführt, z. B. die Optionsseite des Themas oder möglicherweise eine 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 gutes Beispiel für das Laden von Skripts nur auf Pluginseiten. Da Plugins und Themes in ihrer Schreibweise sehr unterschiedlich sein können, werde ich hier nicht näher darauf eingehen, wie Sie auswählen, auf welchen Seiten Sie Skripts laden, aber es war wichtig zu erwähnen, dass Sie es wissen du programmierst.
Der Prozess für Stile ist fast identisch mit dem Prozess für Skripts. Dies geschieht mithilfe einer aufgerufenen WordPress-Funktion wp_register_style, und hier ist seine Verwendung gemäß dem WordPress-Codex:
wp_register_style ($ handle, $ src, $ deps, $ ver, $ media);
Beachten Sie, dass der einzige Unterschied besteht wp_register_script und wp_register_style ist das statt eines $ in_footer Parameter haben wir eine $ media Parameter. Dieser Parameter kann auf eine der folgenden Einstellungen gesetzt werden: 'alles', 'Bildschirm', "Handheld", und 'drucken', oder einen anderen von W3C anerkannten Medientyp.
Ein Beispiel dafür, wie Sie einen Stil einreihen könnten, wäre:
function wptuts_styles_with_the_lot () // Registrieren Sie den Stil wie folgt für ein Plugin: wp_register_style ('custom-style', plugins_url ('/css/custom-style.css', __FILE__), array (), '20120208', 'all '); // oder // Registrieren Sie den Stil wie folgt für ein Design: wp_register_style ('custom-style', get_template_directory_uri (). '/css/custom-style.css', array (), '20120208', 'all'); // Entweder für ein Plugin oder ein Design können Sie den Stil einreihen: wp_enqueue_style ('custom-style'); add_action ('wp_enqueue_scripts', 'wptuts_styles_with_the_lot'); Dies ist ein ziemlich umfassendes Beispiel, bei dem die meisten Parameter verwendet werden. Die Ausgabe sieht so aus:
Eine gute Frage, und die andere Frage, die Sie vielleicht fragen, ist: "Warum denken Sie, dass dies der" richtige "Weg ist und nicht nur Ihre Präferenz?". Die Antwort lautet im Wesentlichen, dass dies der von WordPress empfohlene Ansatz ist. Es stellt sicher, dass jede Kombination von Plugins und Themes in der Lage sein sollte, glücklich und ohne Verdoppelung zusammenzuarbeiten.
Ich habe ein paar Themen und Frameworks in der Umgebung gesehen, die verwendet werden und Tags in ihren header.php, und selbst footer.php, Dateien, um die Skripte und Stile für das Design selbst zu laden. Es gibt wirklich keinen Grund, die Dinge so zu machen. Wie ich oben gezeigt habe, ist es durchaus möglich, Skripts und Stile zu priorisieren und zu benennen, ob sie aus Komfort und Sicherheit in die Kopf- oder Fußzeile geladen werden Functions.php. Der Vorteil besteht darin, dass Ihr Thema / Rahmen mit einer größeren Anzahl anderer Plugins / Kind-Themen funktioniert.
Ein Beispiel war das Laden von jQuery mit der Tags, die scheinbar gut funktionieren, aber dies kann tatsächlich dazu führen, dass jQuery zweimal geladen wird! Durch das Laden von jQuery auf diese Weise wird WordPress nicht daran gehindert, seine jQuery-Version für andere Plugins zu laden, da sich die WordPress-Version standardmäßig im noConflict-Modus befindet. Ein Plugin gibt sie möglicherweise als Abhängigkeit an. Jetzt funktioniert jQuery für den noConflict-Modus und $, und brechen wahrscheinlich auch jedes Plugin, das die Prototype-Bibliothek verwendet.
WordPress ist ein fantastisches System, das mit viel Nachdenken entwickelt wurde. Wenn es einen Mechanismus gibt, mit dem etwas gemacht werden kann, ist es oft eine gute Idee, ihn zu benutzen. Denken Sie bei der Entwicklung Ihrer Plugins und Themes daran, nachdenklich zu programmieren und gut mit anderen zu spielen.
Was denkst du über die Verwendung von wp_enqueue_script und die damit verbundenen Funktionen und Aktionen? Kennen Sie Beispiele, wo es falsch gemacht wird? Kennen Sie einen Grund, die oben genannten Hinweise nicht zu befolgen?
Wenn Sie eine fertige Lösung benötigen, können Sie unsere Wordpress-Designs und Wordpress-Plugins auf Envato Market durchsuchen.
