Ich habe meine Skripte bereits hinzugefügt, wollte aber den bevorzugten Weg kennen.
Ich habe gerade ein <script>
Tag direkt in header.php
meine Vorlage eingefügt.
Gibt es eine bevorzugte Methode zum Einfügen von externen oder benutzerdefinierten JS-Dateien?
Wie würde ich eine js-Datei an eine einzelne Seite binden? (Ich habe die Homepage im Auge)
theme-development
javascript
naugtur
quelle
quelle
Antworten:
Verwenden Sie
wp_enqueue_script()
in Ihrem ThemaDie grundlegende Antwort ist die Verwendung
wp_enqueue_script()
in einemwp_enqueue_scripts
Hook für das Front-Endadmin_enqueue_scripts
für den Administrator. Es könnte ungefähr so aussehen (was davon ausgeht, dass Sie aus derfunctions.php
Datei Ihres Themas aufrufen ; beachten Sie, wie ich auf das Stylesheet-Verzeichnis verweise):Das sind die Grundlagen.
Vordefinierte und mehrfach abhängige Skripte
Angenommen, Sie möchten sowohl jQuery als auch jQuery UI Sortable aus der Liste der in WordPress enthaltenen Standardskripte einbeziehen und möchten, dass Ihr Skript davon abhängt. Ganz einfach, fügen Sie die ersten beiden Skripte mit den in WordPress definierten vordefinierten Handles ein und stellen Sie für Ihr Skript einen dritten Parameter bereit, zu
wp_enqueue_script()
dem ein Array der von jedem Skript verwendeten Handles gehört.Skripte in einem Plugin
Was ist, wenn Sie es stattdessen in einem Plugin tun möchten? Verwenden Sie die
plugins_url()
Funktion, um die URL Ihrer Javascript-Datei anzugeben:Versionierung Ihrer Skripte
Beachten Sie auch, dass wir oben unserem Plugin eine Versionsnummer gegeben und diese als 4. Parameter an übergeben haben
wp_enqueue_script()
. Die Versionsnummer wird in der Quelle als Abfrageargument in der URL zum Skript ausgegeben und dient dazu, den Browser zum erneuten Herunterladen einer möglicherweise zwischengespeicherten Datei zu zwingen, wenn sich die Version ändert.Laden Sie Skripte nur auf Seiten, auf denen sie benötigt werden
Die erste Regel der Webleistung besagt, dass HTTP-Anforderungen minimiert werden müssen. Sie sollten daher die Skripten nach Möglichkeit so beschränken, dass sie nur bei Bedarf geladen werden. Wenn Sie beispielsweise Ihr Skript nur im Admin-Bereich benötigen, beschränken Sie es
admin_enqueue_scripts
stattdessen mit dem Hook auf Admin-Seiten :Laden Sie Ihre Skripte in die Fußzeile
Wenn Ihre Skripte zu denjenigen gehören, die in die Fußzeile geladen werden müssen, gibt es einen fünften Parameter
wp_enqueue_script()
, der WordPress anweist , sie zu verzögern und in die Fußzeile einzufügen (vorausgesetzt, Ihr Thema hat sich nicht schlecht benommen und es ruft tatsächlich den Haken wp_footer wie alle auf gute WordPress Themes sollten ):Feinkörnigere Steuerung
Wenn Sie eine feinkörnigere Steuerung benötigen, dann finden Sie in Ozh einen großartigen Artikel mit dem Titel Gewusst wie: Laden von Javascript mit Ihrem WordPress-Plugin , in dem mehr Details enthalten sind.
Deaktivieren von Skripten zur Erlangung der Kontrolle
Justin Tadlock hat einen schönen Artikel mit dem Titel So deaktivieren Sie Skripte und Stile für den Fall, dass Sie:
Übergabe von Werten von PHP an JS mit
wp_localize_script()
Auf seinem Blog hat Vladimir Prelovac einen großartigen Artikel mit dem Titel " Best Practice" zum Hinzufügen von JavaScript-Code zu WordPress-Plugins, in dem er erläutert,
wp_localize_script()
wie Sie den Wert von Variablen in Ihrem serverseitigen PHP festlegen können, um ihn später in Ihrem clientseitigen Javascript zu verwenden.Wirklich feinkörnige Kontrolle mit
wp_print_scripts()
Und schließlich, wenn Sie wirklich feinkörnige Kontrolle benötigen, können Sie nachlesen,
wp_print_scripts()
wie auf Beer Planet in einem Beitrag mit dem Titel Wie man CSS und JavaScript bedingt und nur dann einbindet, wenn dies von den Posts benötigt wird .Epiloque
Das war's für Best Practices beim Einbinden von Javascript-Dateien in WordPress. Wenn ich etwas verpasst habe (was ich wahrscheinlich habe), lass es mich in den Kommentaren wissen, damit ich ein Update für zukünftige Reisende hinzufügen kann.
quelle
admin_init
anstatt zu fragenis_admin()
. Entfernen Sie den Versionsparameter, wenn Sie das Google-CDN verwenden. Andernfalls enthält der Browser-Cache zwei Versionen: eine ohne die Abfragezeichenfolge von anderen Websites und Ihre.Um Mikes wundervolle Illustration der Verwendung von Enqueues zu ergänzen, möchte ich nur darauf hinweisen, dass Skripte, die als Abhängigkeiten enthalten sind, nicht in die Warteschlange gestellt werden müssen ...
Ich werde das Beispiel unter der Überschrift " Skripte in einem Plugin" in Mikes Antwort verwenden.
Dies kann zum Lesen verkleinert werden.
Wenn Sie Abhängigkeiten festlegen, findet WordPress diese und stellt sie für Ihr Skript bereit, sodass Sie für diese Skripts keine unabhängigen Aufrufe vornehmen müssen.
Einige von Ihnen fragen sich möglicherweise, ob das Festlegen mehrerer Abhängigkeiten dazu führen kann, dass Skripts in der falschen Reihenfolge ausgegeben werden. Lassen Sie mich hier ein Beispiel geben
Wenn Skript zwei von Skript drei abhängt (dh Skript drei sollte zuerst geladen werden), spielt dies keine Rolle. WordPress ermittelt die Enqueue-Prioritäten für diese Skripte und gibt sie in der richtigen Reihenfolge aus. Kurz gesagt, alles wird automatisch ausgearbeitet für Sie von WordPress.
quelle
init
ist nicht der richtige Ort, um die Warteschlange zu versenden.Für kleine Teile von Skripten, die Sie möglicherweise nicht in eine separate Datei aufnehmen möchten, weil sie beispielsweise dynamisch generiert werden, bietet sich WordPress 4.5 und weitere an
wp_add_inline_script
. Diese Funktion speichert das Skript grundsätzlich in einem anderen Skript.Angenommen, Sie entwickeln ein Thema und möchten, dass Ihr Kunde seine eigenen Skripts (wie Google Analytics oder AddThis) über die Optionsseite einfügen kann. Sie können
wp_add_inline_script
dieses Skript dann wie folgt in Ihre Haupt-JS-Datei speichern (sagen wir malmainjs
):quelle
Meine bevorzugte Methode ist es, eine gute Leistung zu erzielen.
wp_enqueue_script
Daher verwende ich HEREDOC nicht mit der Fetch-API, um alles asynchron parallel zu laden:Und dann fügen Sie sie in den Kopf ein, manchmal zusammen mit Stilen wie diesem:
Das Ergebnis ist ein Wasserfall, der wie folgt aussieht: Alles auf einmal laden, aber die Ausführungsreihenfolge kontrollieren:
Hinweis: Dies erfordert die Verwendung der Fetch-API, die nicht in allen Browsern verfügbar ist.
quelle