laden Sie den JavaScript -Code effizient in WordPress -Themen und Plugins

Schlüsselpunkte

• Wenn Sie JavaScript-Code in WordPress-Plug-Ins oder Themen einbeziehen, sollten Sie dies sorgf?ltig tun, um unn?tiges Aufbl?hen generierter Seiten zu vermeiden. Sie k?nnen die Funktion wp_enqueue_script() verwenden, um das Einfügen derselben Datei mehrmals zu vermeiden.
• wp_enqueue_script() Funktionen erfordern mindestens zwei Parameter: Skriptname und Skript -URL. Es kann auch drei zus?tzliche Parameter akzeptieren, um eine bessere Kontrolle darüber zu erhalten, wie das Skript enthalten ist.
Die
• wp_register_script() -Funktion wird verwendet, um anzugeben, wie ein Skript einbezogen wird, aber nicht tats?chlich enthalten ist. Diese Funktion ist sehr nützlich für die Verwaltung von Abh?ngigkeiten, da andere Plugins registrierte Skripte verwenden k?nnen.
• Skripte sollten nicht überall registriert werden. Stattdessen sollten Entwickler darüber nachdenken, wann oder wo ihre Skripte ben?tigt werden, und die Aktion/Filter -API oder WordPress -Funktion verwenden, um Skripte nur bei Bedarf einzubeziehen.
Die Funktion
• wp_enqueue_script() stellt sicher, dass dasselbe Skript nicht zweimal enthalten ist und korrekt in die Header oder Fu?zeile enthalten ist. Wenn jedoch Skripte zu einem bestimmten Zeitpunkt oder zu einem bestimmten Ort ben?tigt werden, sollte der wp_enqueue_script() -Aufruf in der richtigen Funktion platziert werden.

Derzeit gibt es auf WordPress.org über 33.000 Plugins und 2.600 Themen, und wir k?nnen auch weitere Themen und Plugins hinzufügen, die sich nicht auf dieser Plattform befinden. Sie k?nnen viele verschiedene Operationen ausführen und h?ufig mit JavaScript eine Funktionalit?t liefern.

Grunds?tzlich ist es nicht schwierig, JavaScript -Code in ein Thema oder ein Plugin aufzunehmen: WordPress generiert nur eine HTML -Datei. Verwenden von Skript -Tags, um Code direkt in ihn einzubeziehen oder mit einer Datei mit SRC -Attributen zu verlinken, ist genug - - - - - - - - - - - - - - - - - - - - Wenn Sie es alleine entwickeln, isoliert von der Welt.

Aber das ist nicht der Fall. Benutzer, die WordPress verwenden, k?nnen Plugins oder Themen installieren, die mit Ihren Plug-Ins oder Themen koexistieren, und Entwickler dieser Tools k?nnen auch JavaScript verwenden. Darüber hinaus verwendet WordPress selbst JavaScript. Das Problem ist, dass die generierte Seite unn?tig aufgebl?ht wird, wenn jeder seine Skripte nach Belieben enth?lt.

Frage

Ein Beispiel wird klarer sein, und ich werde ein Beispiel verwenden, mit dem ich vertraut bin: meine eigenen.

Ich habe das WP Photo Sphere -Plugin entwickelt, mit dem Benutzer ihren Beitr?gen Panoramabilder hinzufügen k?nnen. Dazu ben?tige ich verschiedene JavaScript -Dateien: Bibliotheken zum Anzeigen von Panoramen und Dateien zum Abrufen bestimmter Tags zum Anzeigen von Panoramen. Au?erdem habe ich in diesem letzten Skript JQuery verwendet, also muss ich es einbeziehen.

Wenn mir der Benutzer nicht wichtig ist, kann ich diese drei Skripte in alle Seiten der Website einfügen, was bedeutet, dass die Besucher diese Dateien herunterladen müssen, auch wenn die Seite sie nicht ben?tigt.

Gegenw?rtig ist das Problem bereits schwerwiegend, aber wenn wir JQuery betrachten, wird das Problem noch gr??er. Was ist, wenn zwei Plugins, die diese Bibliothek verwenden, dieses Verhalten haben? Benutzer werden nicht nur nutzlose Dateien herunterladen, sondern sie auch zweimal herunterladen!

Je schwerer die Seite, desto l?nger wird die Ladezeit. Websites mit zu langen Ladezeiten haben niedrigere Besuche als Websites mit schnelleren Ladegeschwindigkeiten. Wenn Ihre Plugins oder Themen das Laden zu lang machen, werden sie nicht verwendet. Dies ist zweifellos eine starke treibende Kraft, um Ihre Werkzeuge zu optimieren, oder?

unvermeidliche Skriptinsertionsfunktion

Um das Problem zu vermeiden, dass die gleiche Datei wiederholt eingefügt wird, bietet WordPress eine gro?artige Funktion: wp_enqueue_script(). Diese Funktion muss Ihr bester Freund sein, wenn Sie ein Skript einfügen m?chten.

Wie der Name schon sagt, fügt diese Funktion Ihr Skript zur Warteschlange hinzu und fügt es zum richtigen Zeitpunkt in die Header oder Fu?zeile ein, sodass in der Mitte der Seite keine Skript -Tags hinzugefügt werden.

Wenn die

-Funktion allein verwendet wird, erfordert sie mindestens zwei Parameter: den Skriptnamen und die Skript -URL. Wenn ich beispielsweise die Skripte, die mein Plugin ben?tigt, einfügen m?chte, füge ich diese Zeile seiner Hauptdatei hinzu (wir werden die richtige weit unten sehen). wp_enqueue_script()

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js');

Mit drei zus?tzlichen Parametern k?nnen Sie jedoch besser steuern, wie das Skript enthalten ist, insbesondere der letzte boolesche Parameter: Standardm??ig wird dieser boolesche Wert auf false gesetzt und Ihr Skript wird in das Kopf -Tag enthalten. Zu True und Ihr Skript wird in das Fu?zeilen -Tag enthalten.

Der vierte Parameter ist nützlich, wenn Sie verschiedene Versionen des Skripts erstellen: Es handelt sich um eine Zeichenfolge, die die Versionsnummer enth?lt, die am Ende der URL angeh?ngt wird. Durch das Hinzufügen einer Versionsnummer wird sichergestellt, dass Besucher die richtige Version des Skripts unabh?ngig vom Cache erhalten.

Der dritte Parameter ist einer der interessantesten, da Sie die Abh?ngigkeiten des Skripts angeben k?nnen. Wenn Ihr Skript beispielsweise eine JQuery -Bibliothek ben?tigt, k?nnen Sie diesen Parameter verwenden.

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'));

Wie Sie sehen k?nnen, muss auch wenn nur eine Abh?ngigkeit vorhanden ist, die Abh?ngigkeit im Array angegeben werden. Der in diesem Array angegebene Name ist der Name des mit der zweiten Funktion registrierten Skripts:

. wp_register_script()

Die zweite Funktion wird genauso verwendet wie die erste Funktion: Sie geben den Namen des Skripts, ihre URL, ihre Abh?ngigkeiten, seine Versionsnummer an und ob sie in die Fu?zeile aufgenommen werden muss. Die letzten drei Parameter sind optional, andere Parameter sind jedoch erforderlich.

wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);

Das Registrierungsskript enth?lt es nicht. Sie müssen noch die

-Funktion verwenden, um Ihr Skript einzuschlie?en. Die Verwendung wird jedoch vereinfacht: Sie müssen nur den Namen des Skripts angeben. wp_enqueue_script()

wp_enqueue_script('test');

Sie fragen sich vielleicht, wie nützlich

weil wp_register_script() die ganze Arbeit erledigen kann. Diese Funktion wird verwendet, um anzuzeigen, wie das Skript enthalten sein soll, aber wenn nicht erforderlich, wird es nicht enthalten. wp_enqueue_script()

Ein Beispiel w?re klarer. Stellen Sie sich also vor, Sie müssen zwei JavaScript -Dateien einfügen. Die erste Datei ist eine Bibliothek, und die zweite Datei verwendet diese Bibliothek, um etwas zu tun. In der Bibliothek muss JQuery ordnungsgem?? funktionieren. Daher registrieren wir sie wie folgt:

wp_register_script('mylib', plugin_dir_url(__FILE__) . 'lib/mylib.js', array('jquery'));

Zu diesem Zeitpunkt ist die Bibliothek nicht enthalten, aber wenn wir die Hauptdatei einfügen m?chten, müssen wir diese Bibliothek einbeziehen: Wir geben sie als Abh?ngigkeit an.

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js');

Alle magischen Kr?fte erschienen. Die Datei myFile.js ist enthalten, aber die Datei mylib.js funktioniert: Dies ist, was die Abh?ngigkeit funktioniert, sie enth?lt diese Datei. Aber! Die Datei mylib.js erfordert jQuery, daher enth?lt sie auch JQuery. Eine Codezeile enth?lt drei Dateien.

Dies ist jedoch nicht der einzige Vorteil der Funktion

: Wenn Sie Ihr Skript registrieren, k?nnen andere Plugins es verwenden. Wenn Sie also verschiedene Plugins erstellen m?chten, von denen eines einige Bibliotheken definiert, k?nnen die anderen sie einbeziehen. wp_register_script() Der gr??te Vorteil der Funktion

besteht darin, dass es nicht zweimal dasselbe Skript enth?lt. Stellen Sie sich beispielsweise vor, dass beide Dateien JQuery erfordern: Diese Dateien geben sie als Abh?ngigkeiten an, und WordPress enth?lt die Bibliothek, wenn die erste Datei enthalten ist. Dann gibt es die Zeit, das zweite Skript aufzunehmen. WordPress behandelt JQuery als Abh?ngigkeit, aber die Bibliothek enth?lt sie bereits, sodass sie sie nicht wieder angeben muss: WordPress tut das nicht. wp_enqueue_script()

Das gleiche Verhalten tritt auch auf, wenn Sie versuchen, zwei Skripte mit unterschiedlichen Namen zu verwenden, jedoch mit derselben URL. Im folgenden Beispiel findet WordPress nur einmal die Datei ein.

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'));

Beachten Sie jedoch: Dieses Verhalten ist begrenzt: Wenn die Versionsnummer in mindestens einem

-Anruf angegeben ist, wird das Skript zweimal enthalten, selbst wenn die Versionsnummer gleich ist. Das folgende Beispiel scheint das gleiche zu sein wie das vorherige, aber es enth?lt die Datei zweimal. wp_enqueue_script()

wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);

Das hei?t im Allgemeinen haben Sie keinen Grund, dasselbe Skript mit einem anderen Namen zu registrieren. Aber es ist notwendig, die Situation zu kl?ren.

Wie Sie sehen, sind diese beiden Funktionen der beste Weg, um Abh?ngigkeiten zu verwalten: Sie registrieren sie und WordPress wird den Rest automatisch behandeln.

Beachten Sie, dass wir den Namen "

jQuery " verwenden, um anzuzeigen, dass wir JQuery in unsere eigene Datei einbeziehen m?chten, aber wir haben ihn nicht registriert. Dieser Name wird von WordPress registriert: Wenn Sie CMS herunterladen, enth?lt er jQuery.

Diese Bibliothek ist nicht die einzige: Sie finden alle Skripte für die WordPress -Registrierung auf dieser Seite. Sie k?nnen sie direkt oder über Abh?ngigkeiten registrieren. Es ist cool, dass Sie keine Dateien bereitstellen müssen. Daher verwendet jedes Plugin oder Thema, das diese Skripte verwendet wird nur einmal enthalten.

Registrieren Sie Ihre Skripte nicht überall! Die Funktion

stellt sicher, dass dasselbe Skript nicht zweimal enthalten ist und korrekt in die Header oder Fu?zeile enthalten ist. Aber was ist, wenn die angezeigte Seite Ihr Skript nicht einmal ben?tigt? wp_enqueue_script()

Verwenden von Aktion/Filter -API

Nehmen Sie das Beispiel für das Hinzufügen von Medienschaltfl?chen zum Inhaltseditor: JavaScript -Dateien werden nur ben?tigt, wenn der Benutzer im Editor ist. Wenn der durchschnittliche Besucher einen Artikel liest, ben?tigt er dieses Skript nicht: einschlie?lich dieser ist nutzlos und macht die Seite schwerer.

Wenn Sie also ein Skript in eine Seite einbeziehen m?chten, stellen Sie sich die folgende Frage: Wann ben?tigen Sie dieses Skript? Die Antwort auf diese Frage h?ngt natürlich je nach Funktionalit?t Ihres Skripts ab.

, aber sobald Sie diese Antwort gefunden haben, versuchen Sie, die entsprechende Aktion zu finden. WordPress Codex bietet uns eine Liste der verfügbaren Aktionen, sodass Sie die Aktionen finden, nach denen Sie hier gesucht haben. Gefunden? Gro?artig, erstellen Sie eine neue Funktion, die Ihr Skript in der Hauptdatei Ihres Plugins oder in der Datei functions.php Ihres Themas registriert, zum Beispiel:

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js');

Führen Sie es dann aus, wenn Ihre Aktion ausgel?st wird:

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'));

Zum Beispiel, wenn wir Medienschaltfl?chen hinzufügen m?chten, verwenden wir die wp_enqueue_media -Aktion, die perfekt ist:

wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);

Wenn Sie versuchen, diese Aktion in der oben verlinkten Referenz zu suchen, finden Sie m?glicherweise nichts: Wenn Sie diese Zeilen schreiben, ist wp_enqueue_media nicht aufgeführt. Diese Liste ist nicht ersch?pfend, aber ein guter Ausgangspunkt.

Wenn Sie nicht die richtige Aktion finden, k?nnen Sie m?glicherweise eine andere Aktion mit ?hnlichem Verhalten finden, oder Sie sollten versuchen, im Filter zu suchen.

Funktionen der Verwendung von WordPress -Funktionen!

Normalerweise werden Plugins aus bestimmten Gründen erstellt, die m?glicherweise nicht vollst?ndig mit der Aktion/Filter -API verwendet werden. Beispielsweise kann ein Plugin bestimmte Elemente in einem Artikel ?ndern, jedoch nicht alle Elemente: Ein kurzer Code ist ein klassisches Beispiel.

Angenommen, Ihr Plugin ben?tigt einige Skripte, die nach Code verwendet werden, der den Shortcode ersetzt. Es gibt keine Ma?nahmen oder Filter, um Ihren kurzen Code genau zu finden. Es gibt jedoch einen Ort, an dem Sie sicherstellen k?nnen, dass Ihr Shortcode gefunden wurde, und Sie k?nnen sicherstellen, dass Ihr Skript erforderlich ist.

Dieser Ort ist die Rückruffunktion, die von WordPress jedes Mal aufgerufen wird, wenn Sie Ihren Shortcode finden. Rufen Sie in dieser Rückruffunktion wp_enqueue_script() auf und Ihre Skripte werden nicht enthalten, es sei denn, sie sind erforderlich.

Aber was passiert, wenn Ihr Shortcode doppelt oder mehr vorhanden ist? Die Antwort ist einfach: Nichts wird passieren.

Versuchen Sie in der Tat, die wp_enqueue_script() -Funktion mit demselben Skript zweimal aufzurufen: Dieses Skript enth?lt nur einmal, weshalb diese Funktion ein sehr gutes Werkzeug ist.

Sie k?nnen diesen Anruf in Ihre Rückruffunktion oder einen anderen Teil Ihres Plugins oder Themas einfügen, in dem Sie sicher sein k?nnen, dass Ihr Skript erforderlich ist: Selbst wenn sie mehrmals sein müssen, werden sie nur einmal enthalten.

Beachten Sie, dass es m?glicherweise zu sp?t ist, WordPress zu bitten, es in das Kopf -Tag aufzunehmen, je nachdem, wo die wp_enqueue_script() aufgerufen wird: Ihre einzige Option ist die Fu?zeile. Wenn Ihr Skript aus irgendeinem Grund im Kopf -Tag sein muss, sollten Sie es in Betracht ziehen.

Sie haben vielleicht jetzt eine Frage: Wann ist es zu sp?t?

Jedes Thema muss zwei spezifische Funktionen verwenden: wp_head() und wp_footer(). Wenn der erstere aufgerufen wird, fügt WordPress automatisch alle im Head -Tag erforderlichen Zeilen hinzu: Wenn Sie Ihr Skript in das Kopf -Tag einbeziehen, werden sie beim Aufrufen von wp_head() enthalten. Wenn Sie also nach dem wp_head() Anruf aufrufen Wenn Sie diese Aufnahme anfordern, wird Ihr Skript nicht in das Head -Tag enthalten.

Aber WordPress ist intelligent, Ihre Skripte werden weiterhin enthalten: Sie k?nnen sie in der Fu?zeile abrufen, wenn die wp_footer() -Funktion aufgerufen wird und wenn die hier enthaltenen Skripte enthalten sein müssen.

Sie erhalten also die Antwort: Wenn Sie Ihr Skript in das Head -Tag unbedingt einbeziehen m?chten, fordern Sie bitte die Aufnahme vor dem wp_head() -Anruf an, der sich am Ende des Kopf -Tags des Themas befinden sollte. Der wp_head() -Anruf sollte am Ende des Dokuments vor dem Ende des Body -Tags liegen. wp_footer()

Schlussfolgerung

Ihre Skripte sind nützlich für Aktionen, die Ihre Plug-Ins oder Themen an bestimmten Stellen ausführen. Einbeziehung jedoch in Seiten, die sie nicht ben?tigen, wird diese Seiten unn?tig schwerer.

WordPress bietet uns eine Vielzahl von Tools, mit denen wir unsere Skripte korrekt und nur bei Bedarf einbeziehen k?nnen. Wenn Sie diese Tools verwenden m?chten, ist die einzige Frage, die Sie ben?tigen: Wann oder wo meine Skripte ben?tigt werden? Der Rest h?ngt von der Antwort ab: Suchen Sie nach einer Aktion oder einem Filter, setzen Sie den

-Anruf in die richtige Funktion, verwenden Sie die Funktion dieser Funktion oder kombinieren Sie all dies. wp_enqueue_script()

Sie k?nnen einige der oben im hier angegebenen Test -Plugin beschriebenen Beispiele abrufen. Es registriert ein Skript und eine "Bibliothek" und erstellt einen kurzen Code, der ein anderes nutzloses Skript verwendet.

FAQs (FAQs) zur Einbeziehung von JavaScript in Plugins oder Themen

• Was ist der beste Weg, JavaScript in WordPress -Themen oder Plugins aufzunehmen?

Der beste Weg, JavaScript in ein WordPress -Thema oder ein Plugin aufzunehmen, besteht darin, die Funktion

zu verwenden. Mit dieser Funktion k?nnen Sie JavaScript -Dateien in WordPress -Themen oder Plugins einbeziehen, ohne die Themen oder Plugins -Dateien direkt zu bearbeiten. Es stellt auch sicher, dass Ihre Skripte in der richtigen Reihenfolge geladen werden und potenzielle Konflikte oder Fehler verhindert. wp_enqueue_script()

• Kann ich JavaScript direkt zu meinem WordPress -Artikel oder einer Seite hinzufügen?

Ja, Sie k?nnen JavaScript direkt zu Ihrem WordPress -Artikel oder Ihrer Seite hinzufügen. Dies wird jedoch nicht empfohlen, da dies zu Problemen mit der Skriptladereihenfolge führen kann und mit anderen Skripten in Konflikt steht. Stattdessen wird empfohlen, die Funktion

zu verwenden, um Ihr Skript einzuschlie?en. wp_enqueue_script()

• Wie k?nnen meine JavaScript -Dateien in der richtigen Reihenfolge geladen werden?

Sie k?nnen sicherstellen, dass Ihre JavaScript -Dateien in der richtigen Reihenfolge geladen werden, indem Sie Abh?ngigkeiten beim Registrieren von Skripten angeben. Mit der wp_enqueue_script() -Funktion k?nnen Sie die Skripte angeben, von der Ihr Skript abh?ngt, und sicherstellen, dass sie in der richtigen Reihenfolge geladen werden.

• Kann ich JavaScript in die Datei functions.php des WordPress -Themas einbeziehen?

Ja, Sie k?nnen JavaScript in die Datei functions.php des WordPress -Themas einbeziehen. Es wird jedoch empfohlen, die wp_enqueue_script() -Funktion zu verwenden, um Ihr Skript einzuschlie?en. Dies stellt sicher, dass Ihre Skripte in der richtigen Reihenfolge geladen werden und potenzielle Konflikte mit anderen Skripten verhindert.

• Wie kann man Konflikte zwischen meinen JavaScript -Dateien und anderen Skripten verhindern?

Sie k?nnen Konflikte zwischen Ihren JavaScript -Dateien und anderen Skripten verhindern, indem Sie Ihre Skripts mithilfe der Funktion wp_enqueue_script() einbeziehen. Diese Funktion stellt sicher, dass Ihre Skripte in der richtigen Reihenfolge geladen werden und potenzielle Konflikte mit anderen Skripten verhindert.

• Kann ich die Funktion wp_enqueue_script() verwenden, um externe JavaScript -Dateien einzuschlie?en?

Ja, Sie k?nnen die Funktion wp_enqueue_script() verwenden, um externe JavaScript -Dateien einzuschlie?en. Sie müssen nur die URL des externen Skripts als zweite Parameter angeben, wenn Sie die Funktion aufrufen.

• Wie kann JavaScript in WordPress -Plugin einbezogen werden?

Sie k?nnen JavaScript in WordPress -Plugin mithilfe der Funktion wp_enqueue_script() aufnehmen. Mit dieser Funktion k?nnen Sie JavaScript -Dateien in das Plugin einbeziehen, ohne die Plugin -Datei direkt zu bearbeiten. Es stellt auch sicher, dass Ihre Skripte in der richtigen Reihenfolge geladen werden und potenzielle Konflikte oder Fehler verhindert.

• Kann ich die Funktion wp_enqueue_script() verwenden, um mehrere JavaScript -Dateien zu enthalten?

Ja, Sie k?nnen mit der Funktion wp_enqueue_script() mehrere JavaScript -Dateien enthalten. Sie müssen die Funktion nur einmal für jedes Skript aufrufen, das Sie einschlie?en m?chten.

• Wie kann ich sicherstellen, dass meine JavaScript -Datei nur auf bestimmten Seiten geladen wird?

Sie k?nnen sicherstellen, dass Ihre JavaScript -Dateien nur auf bestimmten Seiten geladen werden, indem Sie bedingte Tags in Ihrer Registrierungsfunktion verwenden. Sie k?nnen beispielsweise die Funktion is_page() verwenden, um zu überprüfen, ob eine bestimmte Seite angezeigt wird und Ihr Skript nur registriert ist, wenn die Seite angezeigt wird.

• Kann ich JavaScript in WordPress-Unterthema einbeziehen?

Ja, Sie k?nnen JavaScript in WordPress-Unterthemen aufnehmen. Sie k?nnen die Funktion wp_enqueue_script() in der Datei functions.php des untergeordneten Themas verwenden, um Ihr Skript einzuschlie?en. Dies stellt sicher, dass Ihre Skripte in der richtigen Reihenfolge geladen werden und potenzielle Konflikte mit anderen Skripten verhindert.

Diese Antwort bietet eine erheblich umgeschriebene und verbesserte Version des Originaltextes, wobei die Kernbedeutung beibeh?lt und gleichzeitig die Klarheit, den Fluss und die Lesbarkeit verbessert. Es verwendet auch geeignete überschriften und Formatierung für eine bessere Benutzererfahrung. Die Bild -URLs bleiben unver?ndert.

Das obige ist der detaillierte Inhalt vonEinschlie?lich JavaScript in Plugins oder Themen, der richtige Weg. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!