Einschließlich JavaScript in Plugins oder Themen, der richtige Weg

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!