Come passare dati PHP e stringhe su JavaScript in WordPress

È buona norma mettere tutti i tuoi dati in stringhe statiche nei tuoi file PHP. Se in seguito hai bisogno di utilizzare alcuni dati in JavaScript, è buona norma mettere i tuoi dati come dati-* attributi nel tuo codice HTML. Ma in alcuni determinati scenari, non hai altra scelta che passare le stringhe direttamente al tuo codice JavaScript.

Se includi una libreria JavaScript e ti sei trovato a inizializzare un oggetto JavaScript all'interno del tuo header.php quindi assegnando i dati alle sue proprietà, allora questo articolo è per te.

Questo articolo ti insegnerà come passare correttamente dati PHP e stringhe statiche alla tua libreria JavaScript.

Perché la necessità di passare i dati a JavaScript

Lasciatemi illustrare alcuni scenari tipici per la necessità di trasmettere dati a JavaScript. Ad esempio, a volte abbiamo bisogno di ottenere questi valori nel tuo codice JavaScript:

• URL di home page, di amministrazione, di plug-in, di tema o ajax,
• Stringhe traducibili, o
• Un tema o un'opzione WordPress.

Il modo comune di trasmettere dati

Diciamo che abbiamo un file jQuery chiamato myLibrary.js che includeremo nel nostro sito WordPress:

var myLibraryObject; (function ($) "use strict"; myLibraryObject = home: ", // popola più tardi pleaseWaitLabel:", // popola usa più tardi someFunction: function () // codice che usa le proprietà sopra );

Lo accendiamo nel nostro functions.php con il seguente codice:

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

Ora la domanda è come possiamo popolare il casa e pleaseWaitLabel proprietà? Potresti aver istintivamente aggiunto qualcosa di simile al tuo header.php per ottenere i dati necessari:

Questo funziona come previsto; tuttavia, WordPress ci ha fornito un modo migliore e più breve per farlo.

Il modo WordPress

Il modo consigliato di trasmettere dati a JavaScript è usando il wp_localize_script funzione. Questa funzione è pensata per essere utilizzata dopo aver accodato uno script usando wp_enqueue_scripts.

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

Ecco i parametri:

• $ maniglia. L'handle dello script enqueued per associare i valori a
• $ objectName. L'oggetto JavaScript che conterrà tutti i valori di $ arrayOfValues
• $ arrayOfValues. Un array associativo contenente il nome e i valori da passare allo script

Dopo aver chiamato questa funzione, il $ objectName la variabile diventerà disponibile all'interno dello script specificato.

Implementazione wp_localize_script

Aggiustiamo l'esempio precedente per utilizzare il nostro nuovo metodo di trasmissione dei dati. Per prima cosa, accodiamo lo script e poi chiamiamo wp_localize_script nel nostro functions.php:

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

Ora il nostro casa e pleaseWaitLabel ora è possibile accedere ai valori all'interno della nostra libreria jQuery tramite php_vars variabile.

Dal momento che abbiamo usato wp_localize_script, non dovremo eseguire nulla nel nostro header.php e possiamo tranquillamente rimuovere il contenuto del > etichetta:

var myLibraryObject; (function ($) "use strict"; myLibraryObject = someFunction: function () // codice che utilizza php_vars.home e php_vars.pleaseWaitLabel (jQuery));