Hoe PHP-gegevens en strings door te geven aan JavaScript in WordPress

Het is een goede gewoonte om al uw gegevens in statische tekenreeksen in uw PHP-bestanden te plaatsen. Als u later bepaalde gegevens in JavaScript wilt gebruiken, is het ook een goede gewoonte om uw gegevens in te voeren gegevens-* attributen in uw HTML. Maar in sommige bepaalde scenario's heeft u geen andere keus dan strings rechtstreeks door te geven aan uw JavaScript-code.

Als u een JavaScript-bibliotheek toevoegt en u hebt ontdekt dat u een JavaScript-object in uw account initialiseert header.php dan het toewijzen van gegevens aan zijn eigenschappen, dan is dit artikel iets voor jou.

In dit artikel leert u hoe u PHP-gegevens en statische tekenreeksen correct doorgeeft aan uw JavaScript-bibliotheek.

Waarom de noodzaak om gegevens door te geven aan JavaScript

Ik zal enkele typische scenario's illustreren voor de noodzaak om gegevens door te geven aan JavaScript. Soms moeten we deze waarden bijvoorbeeld in uw JavaScript-code opnemen:

• Homepage, admin, plugin, thema of ajax URL's,
• Vertaalbare strings, of
• Een thema of WordPress optie.

De gebruikelijke manier om gegevens door te geven

Laten we zeggen dat we een jQuery-bestand hebben genaamd myLibrary.js welke we zullen opnemen in onze WordPress-site:

var myLibraryObject; (function ($) "gebruik strict"; myLibraryObject = home: ", // vul dit later alstublieft aanWaitLabel:", // vul dit later some someFunction: function () // code die de bovenstaande eigenschappen gebruikt );

We plaatsen het in onze functions.php met de volgende code:

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

Nu is de vraag hoe we het kunnen vullen huis en pleaseWaitLabel eigenschappen? Mogelijk hebt u zoiets instinctief toegevoegd in uw header.php om de gegevens te krijgen die u nodig hebt:

Dit werkt zoals bedoeld; WordPress heeft ons echter een betere en kortere manier geboden om dit te doen.

De WordPress Way

De aanbevolen manier om gegevens door te geven aan JavaScript, is met behulp van de wp_localize_script functie. Deze functie is bedoeld om te worden gebruikt nadat u een script in gebruik hebt genomen wp_enqueue_scripts.

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

Dit zijn de parameters:

• $ handle. Het handvat van het in de wachtrij geplaatste script om de waarden aan te binden
• $ objectName. Het JavaScript-object dat alle waarden van $ arrayOfValues ​​bevat
• $ arrayOfValues. Een associatieve array met de naam en waarden die aan het script moeten worden doorgegeven

Na het aanroepen van deze functie, de $ objectName variabele zal beschikbaar worden binnen het gespecificeerde script.

Implementeren wp_localize_script

Laten we het eerdere voorbeeld aanpassen om onze nieuwe methode voor het doorgeven van gegevens te gebruiken. Eerst nemen we het script in wacht en bellen dan wp_localize_script in onze functions.php:

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

Nu onze huis en pleaseWaitLabel waarden zijn nu toegankelijk via onze website in de jQuery-bibliotheek php_vars veranderlijk.

Sinds we hebben gebruikt wp_localize_script, we zullen niets hoeven te doen in onze header.php en we kunnen de inhoud van de. veilig verwijderen > label:

var myLibraryObject; (function ($) "gebruik strict"; myLibraryObject = someFunction: function () // code die php_vars.home en php_vars.pleaseWaitLabel (jQuery));