So übergeben Sie PHP-Daten und -strings an JavaScript in WordPress

Es empfiehlt sich, alle Ihre Daten in statischen Zeichenfolgen in Ihren PHP-Dateien zu speichern. Wenn Sie später einige Daten in JavaScript verwenden müssen, sollten Sie Ihre Daten auch als angeben Daten-* Attribute in Ihrem HTML. In bestimmten Szenarien haben Sie jedoch keine andere Wahl, als Strings direkt an Ihren JavaScript-Code zu übergeben.

Wenn Sie eine JavaScript-Bibliothek verwenden, haben Sie ein JavaScript-Objekt in Ihrem Browser initialisiert header.php Wenn Sie dann den Eigenschaften Daten zuweisen, ist dieser Artikel für Sie bestimmt.

In diesem Artikel erfahren Sie, wie Sie PHP-Daten und statische Zeichenfolgen ordnungsgemäß an Ihre JavaScript-Bibliothek übergeben.

Warum müssen Daten an JavaScript übergeben werden?

Lassen Sie mich einige typische Szenarien erläutern, in denen Daten an JavaScript übergeben werden müssen. Zum Beispiel müssen wir diese Werte manchmal in Ihren JavaScript-Code eingeben:

• URLs für Homepage, Admin, Plugins, Designs oder Ajax,
• Übersetzbare Zeichenketten oder
• Ein Theme oder eine WordPress-Option.

Die übliche Art der Weitergabe von Daten

Nehmen wir an, wir haben eine jQuery-Datei myLibrary.js die wir in unsere WordPress-Site aufnehmen werden:

var myLibraryObject; (function ($) "use strict"; myLibraryObject = home: ", // füllen Sie dies bitte pleaseWaitLabel:", // aus. verwenden Sie diese später. );

Wir nehmen es in unsere auf Functions.php mit dem folgenden Code:

wp_enqueue_script ('my_js_library', get_template_directory_uri (). '/js/myLibrary.js');

Nun stellt sich die Frage, wie wir das bevölkern können Zuhause und pleaseWaitLabel Eigenschaften? Vielleicht haben Sie instinktiv so etwas in Ihre Datenbank eingefügt header.php um die Daten zu bekommen, die Sie brauchen:

Dies funktioniert wie vorgesehen; WordPress bietet uns jedoch einen besseren und kürzeren Weg, dies zu tun.

Der WordPress-Weg

Die empfohlene Methode zur Übergabe von Daten an JavaScript ist die Verwendung von wp_localize_script Funktion. Diese Funktion soll verwendet werden, nachdem Sie ein Skript mit inqueue aufgenommen haben wp_enqueue_scripts.

wp_localize_script ($ handle, $ objectName, $ arrayOfValues);

Hier sind die Parameter:

• $ handle. Das Handle des eingereihten Skripts, an das die Werte gebunden werden sollen
• $ objectName. Das JavaScript-Objekt, das alle Werte von $ arrayOfValues ​​enthält
• $ arrayOfValues. Ein assoziatives Array, das den Namen und die Werte enthält, die an das Skript übergeben werden sollen

Nach dem Aufruf dieser Funktion wird der $ objectName Variable wird innerhalb des angegebenen Skripts verfügbar.

Umsetzung wp_localize_script

Lassen Sie uns das vorherige Beispiel anpassen, um unsere neue Methode der Datenübergabe zu verwenden. Zuerst packen wir das Skript ein und rufen dann auf wp_localize_script in unserer Functions.php:

wp_enqueue_script ('my_js_library', get_template_directory_uri (). '/js/myLibrary.js'); $ dataToBePassed = array ('home' => get_stylesheet_directory_uri (), 'pleaseWaitLabel' = = __ ('Bitte warten ...', 'default')); wp_localize_script ('my_js_library', 'php_vars', $ datatoBePassed);

Jetzt unser Zuhause und pleaseWaitLabel Die Werte können jetzt in unserer jQuery-Bibliothek über die php_vars Variable.

Da haben wir gebraucht wp_localize_script, wir müssen nichts in unserem laufen lassen header.php und wir können den Inhalt der > Etikett:

var myLibraryObject; (function ($) "use strict"; myLibraryObject = someFunction: function () // Code, der php_vars.home und php_vars.pleaseWaitLabel verwendet (jQuery));