Hvordan bestå PHP Data og Strings til JavaScript i WordPress

Det er god praksis å sette alle dataene dine i statiske strenge i PHP-filene dine. Hvis du trenger å bruke noen data i JavaScript senere, er det også god praksis å sette dataene dine som data-* attributter i HTML-koden din. Men i enkelte situasjoner har du ikke annet valg enn å sende strenger direkte til JavaScript-koden din.

Hvis du inkluderer et JavaScript-bibliotek, og du har funnet deg selv å initialisere et JavaScript-objekt inni din header.php og deretter tildele data til sine egenskaper, så er denne artikkelen for deg.

Denne artikkelen vil lære deg hvordan du skal passere PHP-data og statiske strenge til JavaScript-biblioteket ditt.

Hvorfor behovet for å sende data til JavaScript

La meg illustrere noen typiske scenarier for behovet for å overføre data til JavaScript. For eksempel, noen ganger må vi få disse verdiene til JavaScript-koden din:

• Hjemmeside-, admin-, plugin-, tema- eller ajax-nettadresser,
• Oversetterbare strenger, eller
• Et tema eller WordPress-alternativ.

Den vanlige måten å overføre data på

La oss si at vi har en jQuery-fil som heter myLibrary.js som vi vil inkludere i vårt WordPress-nettsted:

var myLibraryObject; (funksjon ($) "bruk strenge"; myLibraryObject = home: ", // populere dette senere pleaseWaitLabel:", // populere bruk dette senere someFunction: function () // kode som bruker egenskapene over );

Vi enqueue det i vår functions.php med følgende kode:

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

Nå er spørsmålet hvordan kan vi fylle ut hjem og pleaseWaitLabel eiendommer? Du har kanskje instinktivt lagt til noe som dette i din header.php for å få de dataene du trenger:

Dette fungerer som ment; imidlertid har WordPress gitt oss en bedre og kortere måte å gjøre dette på.

The WordPress Way

Den anbefalte måten å overføre data til JavaScript, er ved å bruke wp_localize_script funksjon. Denne funksjonen er ment å bli brukt når du enqueue et script ved hjelp av wp_enqueue_scripts.

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

Her er parameterne:

• $ håndtak. Håndtaket til det kalkulerte skriptet for å binde verdiene til
• $ objekt. JavaScript-objektet som vil holde alle verdiene av $ arrayOfValues
• $ arrayOfValues. En assosiativ array som inneholder navnet og verdiene som skal overføres til skriptet

Etter at du har ringt denne funksjonen, $ objekt variabel blir tilgjengelig i det angitte skriptet.

implementering wp_localize_script

La oss justere det tidligere eksemplet for å bruke vår nye metode for å sende data. Først må vi skanne skriptet og ringe wp_localize_script i vår functions.php:

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

Nå vår hjem og pleaseWaitLabel Verdier kan nå nås i vårt jQuery-bibliotek via php_vars variabel.

Siden vi brukte wp_localize_script, Vi trenger ikke å kjøre noe i vår header.php og vi kan trygt fjerne innholdet i > stikkord:

var myLibraryObject; (funksjon ($) "bruk streng"; myLibraryObject = someFunction: function () // kode som bruker php_vars.home og php_vars.pleaseWaitLabel (jQuery));