Cum să treci datele PHP și șirul de caractere în JavaScript în WordPress

Este o practică bună să puneți toate datele în șiruri statice în fișierele dvs. PHP. Dacă trebuie să utilizați mai târziu unele date în JavaScript, este de asemenea o bună practică să vă includeți datele date-* atribute în HTML. Dar, în anumite scenarii, nu aveți de ales decât să treceți șiruri direct în codul dvs. JavaScript.

Dacă includeți o bibliotecă JavaScript și ați găsit inițializarea unui obiect JavaScript în interiorul dvs. header.php apoi atribuirea datelor proprietăților sale, atunci acest articol este pentru dvs..

Acest articol vă va învăța cum să transferați în mod corespunzător date PHP și șiruri statice în biblioteca JavaScript.

De ce este nevoie să transmiteți date către JavaScript

Permiteți-mi să ilustrez câteva scenarii tipice pentru necesitatea de a transmite date către JavaScript. De exemplu, uneori trebuie să obțineți aceste valori în codul dvs. JavaScript:

• Pagina de pornire, admin, plugin, temă sau adrese ajax,
• Valori trasabile, sau
• O temă sau o opțiune WordPress.

Modul comun de trecere a datelor

Să presupunem că avem un fișier jQuery numit myLibrary.js pe care o vom include în site-ul nostru WordPress:

var myLibraryObject; (functie ($) "use strict"; myLibraryObject = home: ", // populate acest lucru lateral pleaseWaitLabel:", // populate foloseste mai tarziu someFunction: function () // code care foloseste proprietatile de mai sus );

Îl încurcăm în noi functions.php cu următorul cod:

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

Acum întrebarea este cum putem popula Acasă și pleaseWaitLabel proprietăți? S-ar putea să ai adăugat instinctiv ceva de genul ăsta header.php pentru a obține datele de care aveți nevoie:

Aceasta funcționează conform destinației; cu toate acestea, WordPress ne-a oferit o modalitate mai bună și mai scurtă de a face acest lucru.

Calea WordPress

Modul recomandat de transmitere a datelor către JavaScript este prin utilizarea wp_localize_script funcţie. Această funcție este menită să fie utilizată după ce introduceți un script utilizând wp_enqueue_scripts.

wp_localize_script ($ mâner, $ objectName, $ arrayOfValues);

Iată parametrii:

• $ mâner. Mânerul pentru scriptul enqueued pentru a lega valorile la
• $ ObjectName. Obiectul JavaScript care va păstra toate valorile lui $ arrayOfValues
• $ arrayOfValues. O matrice asociativă care conține numele și valorile care urmează să fie transmise scriptului

După ce apelați această funcție, $ ObjectName variabilă va deveni disponibilă în scriptul specificat.

Implementarea wp_localize_script

Să adaptăm exemplul anterior pentru a folosi noua noastră metodă de transmitere a datelor. În primul rând, introducem scenariul și sunăm wp_localize_script în a noastră functions.php:

wp_enqueue_script ('my_js_library', get_template_directory_uri () ./js/myLibrary.js '); $ dataToBePassed = array ('home' => get_stylesheet_directory_uri (), 'pleaseWaitLabel' => __ ('Vă rugăm să așteptați ...', 'implicit')); wp_localize_script ('my_js_library', 'php_vars', $ datatoBePassed);

Acum Acasă și pleaseWaitLabel valorile pot fi acum accesate în interiorul bibliotecii noastre jQuery prin php_vars variabil.

De când am folosit-o wp_localize_script, nu va trebui să fugim în nimic header.php și putem elimina în siguranță conținutul > etichetă:

var myLibraryObject; (funcția ($) "utilizarea strictă"; myLibraryObject = someFunction: function () // codul care folosește php_vars.home și php_vars.pleaseWaitLabel (jQuery));