Das vollständige Handbuch zur korrekten Verwendung von JavaScript mit WordPress

Ich erinnere mich, wie ich dachte: "Was zum Teufel brauchen wir JavaScript, wenn wir Flash haben?" als ich vierzehn war. Obwohl ich mich immer noch daran erinnere, wie mir das Programmieren mit ActionScript 2.0 gefallen hat, habe ich gesehen, wie viel man mit JavaScript erreichen kann, und verliebte mich in es. Ich bin (noch) kein Experte für JavaScript, aber ich kann sagen, dass ich mit Flash schon lange fertig bin.

Bei WordPress, dem weltweit größten Blogging-Plattform und Content-Management-System, handelt es sich um JavaScript - Na sicher - Sehr nützlich für viele Dinge: Inhaltsschieberegler, Leuchtkasten-Galerien, glatte Einkaufswagen, Elemente der Benutzeroberfläche wie Tabs oder Akkordeons ... Sie nennen es. Aber wie genau sollten wir JavaScript mit WordPress verwenden?

Einen Haufen HTML zurückgeben oder wiederholen Skript Elemente ist eine Möglichkeit, es zu tun - und es ist falsch. In diesem Tutorial werden wir sehen, wie Enqueue JavaScript-Dateien in unseren Seiten und wie Sie übersetzbare Daten an den JavaScript-Code übergeben können.

Die zwei Probleme bei der Verwendung von JavaScript in WordPress-Projekten

Grundsätzlich gibt es zwei wichtige Probleme, die beim Einfügen von JavaScript-Dateien auftreten können direkt in WordPress mit HTML-Code:

Doppelter Code auf derselben Seite: Angenommen, Sie haben ein WordPress-Plugin erstellt und müssen jQuery einbinden. Sie Echo das richtige Skript tag in der und es funktioniert! Was aber, wenn ein anderes Plugin auch jQuery verwenden möchte - woher soll es wissen, dass jQuery bereits im geladen ist ? Es würde nicht, und auch wenn das andere Plugin jQuery enthält der richtige Weg, die Seite würde immer noch habe zwei Instanzen von jQuery, weil du es nicht bist.
Probleme mit der Übersetzung: Angenommen, Sie erstellen ein Plugin für eine Lightbox-Galerie, und Sie müssen Zeichenfolgen wie "Next", "Previous" und "Image X of Y" übergeben. Wie machen Sie das ohne Inline-JavaScript im ?

Die richtige Art, JavaScript mit WordPress zu verwenden

Die Lösung für das erste Problem besteht darin, die JS-Dateien einfach mit den beiden Kernfunktionen von WordPress zu "registrieren" und zu "einreihen": wp_register_script () und wp_enqueue_script (). Die zweite Problemlösung ist noch einfacher: Der Kern wp_localize_script () Mit dieser Funktion können Sie übersetzbare Daten in Ihren JS-Code eingeben.

Registrieren von JavaScript-Dateien

Bevor Sie die JavaScript-Dateien "einreihen" können, sollten Sie sie zuerst "registrieren". Und das geschieht einfach mit einer Funktion namens wp_register_script ():

Einige Anmerkungen zu den Parametern:

Name (erforderlich, String): Der Name des Skripts Sie können einen beliebigen Namen auswählen, sofern dieser nicht von einem anderen Skript verwendet wird.
URL (erforderlich, String): Die URL des Skripts. Keine Notwendigkeit, das zu erklären, richtig? :)
Abhängigkeiten (optional, Array): Die Namen anderer Skripte, von denen unser Skript abhängt. Wenn Ihr Skript beispielsweise von jQuery abhängt, muss es nach jQuery geladen werden. In diesem Fall sollten Sie verwenden Array ('Jquery') für diesen Parameter.
Version (optional, String): Die Versionsnummer für Ihr Skript. Sie können wählen, ob Sie einen String angeben und den Parameter auf setzen Null oder lassen Sie es leer. Wenn Sie es auf string setzen, wird dies dem Ausgabecode wie hinzugefügt my-script.js? ver = 1.2. Wenn Sie den Parameter leer lassen, wird die Version Ihrer WordPress-Installation als Versionsnummer hinzugefügt. Wenn Sie es einstellen Null, nichts wird hinzugefügt.
In Fußzeile laden (optional, boolean): Wenn Sie dieses registrierte Skript in die Warteschlange stellen, wird es in geladen Sektion. Wenn Sie diesen Parameter jedoch auf setzen wahr, es wird direkt vor dem Schließen geladen Etikett.

Sie können auch Skripts "abmelden", die bereits vom Core oder von anderen Plugins mit registriert wurden wp_deregister_script () Funktion. Es akzeptiert nur ein 'Name' Parameter, über den Sie den Namen des Skripts angeben, das "abgemeldet" werden soll. Offensichtlich.

Es gibt eine Reihe von Skripten im WordPress-Codex, die bereits im Kern registriert sind. Sie sollten die Liste jedoch nach der aktuellen Version von WordPress überprüfen, da sie sich auf WordPress Version 3.3 bezieht und möglicherweise veraltet ist.

JavaScript-Dateien in die Warteschlange stellen

Sie können ein Skript registrieren, was jedoch nicht bedeutet, dass es automatisch geladen wird. Nachdem Sie Ihre Skripte registriert haben, sollten Sie sie mit der "einreihen" wp_enqueue_script () Funktion:

Einige Anmerkungen zu den Parametern:

Name (erforderlich, String): Der Name des Skripts.
URL (optional, Zeichenfolge): Die URL des Skripts. Wie Sie sehen, ist diesmal der URL-Parameter wahlweise Wenn Sie das Skript bereits registriert haben, können Sie nur den Namen angeben, und Sie können loslegen. Wenn Sie Ihr Skript jedoch nicht registriert haben, müssen Sie eine URL für diesen Parameter angeben.
Abhängigkeiten (optional, Array): Die Namen anderer Skripte, von denen unser Skript abhängt.
Version (optional, String): Die Versionsnummer für Ihr Skript.
In Fußzeile laden (optional, boolean): Wenn eingestellt auf wahr, Das Skript wird direkt vorher geladen schließt.

Mit dem können Sie auch Skripte "entschlüsseln" wp_dequeue_script () Funktion. Ähnlich wie wp_deregister_script () Funktion akzeptiert nur a 'Name' Parameter.

Sie können den "Status" eines Skripts mit der wp_script_is () Funktion. Wenn Sie beispielsweise prüfen möchten, ob 'mein Skript'wird in die Warteschlange gestellt, einfach verwenden wp_script_is ('my-script', 'queue') in einem (n ob Aussage.

Hooks zum Einreihen Ihrer Skripte

Um Ihre Skripte (und auch Stile) in die richtige Reihenfolge zu bringen, verwenden Sie die folgenden Haken:

wp_enqueue_scripts - Hier werden Skripte in das Frontend Ihrer Website eingefügt.
admin_enqueue_scripts - Hier werden Skripts in das hintere Ende Ihrer Website eingefügt.
login_enqueue_scripts - Hier werden Skripte in Ihren Anmeldebildschirm aufgenommen.

Aufgrund von Kompatibilitätsproblemen können Sie darf nicht benutze die genannten Haken admin_print_scripts oder admin_print_styles.

Weitere Informationen zum Einbeziehen von JavaScript (und CSS!) In Ihre Designs und Plugins finden Sie unter Wie man JavaScript und CSS in Ihre WordPress-Themes und Plugins von Japh Thomson über Wptuts einbindet+.

Übersetzbare Daten in JavaScript übergeben

Wenn es um die Lokalisierung geht, ist JavaScript immer ein Problem mit WordPress… weil so viele Leute die ordentliche kleine Funktion nicht kennen wp_localize_script ():

  __ ('Next', 'my-script'), 'prevItem' => __ ('Previous', 'my-script'), 'imageTitle' => __ ('Image% d von% d', 'my- Skript' ) ); wp_localize_script ('name-of-the-script', // (erforderlich) der Name des Skripts, 'my-script' zum Beispiel 'nameOfTheObject') // (erforderlich) der Name des Skripts, 'my-script' zum Beispiel $ l10n_data // (erforderlich) die zu übergebenden Daten, die mit der Funktion __ () übersetzt werden können; ?>

Nachdem Sie das Skript registriert, eingereiht und lokalisiert haben, können Sie die lokalisierte Variable in Ihrem Skript übergeben, indem Sie den Namen des Objekts und die Namen der Daten verwenden, z alert (nameOfTheObject.prevItem);!

Eine ausführlichere Analyse finden Sie im Artikel von Pipping Williamson.

Einpacken

Es gibt einen Grund, warum WordPress das größte Content-Management-System der Welt ist: Seine Stärke liegt in seiner Flexibilität. Und ich glaube, dass dieses Tutorial (noch einmal) zeigt, wie flexibel es ist.

Dieses Tutorial behandelt so ziemlich alles, was WordPress über die Verwendung von JavaScript für unsere Projekte bietet. Haben Sie weitere Tipps oder Techniken zu JavaScript und WordPress? Erzähl uns darüber!

Code