Come passare una variabile da PHP a jQuery in WordPress

Se sei uno sviluppatore WordPress oppure stai studiando per diventarlo, prima o poi potresti aver bisogno di passare una variable PHP ad un file Javascript come, ad esempio, le impostazioni di uno slider come Nivo Slider oppure le coordinate per far funzionare una mappa di Google.

In questa guida ti spiego tutti i passaggi necessari, utilizzando gli strumenti che ci offre lo stesso WordPress.

Una possibile soluzione è quella di aggiungere il codice Javascript direttamente all’interno del file PHP.

In alternativa puoi anche utilizzare una funzione nativa di WordPress, che si occupa di inviare uno o più valori, senza dover scrivere tutto il codice in un unico file PHP.

Questa funzione si chiama wp_localize_script(), nata principalmente per permettere la localizzazione e quindi una futura traduzione di una stringa all’interno di un file Javascript.

Puoi utilizzare questa funzione anche per passare il valore di una variabile PHP, come indicato in questo articolo.

Detto questo, crea un nuovo file .php all’interno di una cartella che puoi chiamare come vuoi, nella directory plugins di WordPress ed aggiungi l’intestazione del plugin

/*
Plugin Name: Articolo WPinProgress localizzazione variabile PHP
Plugin URI: https://www.wpinprogress.com
Description: Articolo WPinProgress localizzazione variabile PHP
Version: 1.0.0
Author: WPinProgress
Author URI: https://www.wpinprogress.com
License: GPLv3
*/

Crea quindi una nuova cartella assets, nella directory principale del plugin ed aggiungi la sottocartella js, in cui andrai a salvare tutti i file javascript del plugin, come il file wip-file-javascript.js ed utilizza la funzione wp_enqueue_script() per aggiungere il file javascript in WordPress.

function site_scripts() {

	wp_enqueue_script( 'wip-file-javascript',	plugins_url('/assets/js/wip-file-javascript.js', __FILE__ ), array('jquery'), '', true );

}

add_action('wp_enqueue_scripts', 'site_scripts' );

A questo punto puoi passare uno o più valori utilizzando la funzione WordPress wp_localize_script(), che prevede tre parametri:

1. $handle : Si tratta del nome utilizzato per registrare il file javascript tramite la funzione wp_enqueue_script(), nell’esempio che segue è ‘wip-file-javascript’
2. $name : Nome della variable che conterrà i dati da passare. E necessario utlizzare lo stesso nome per entrambi i file (PHP e Javascript), nell’esempio che segue è ‘wip_variabile’
3. $data : i dati che verranno passati al file Javascript

Questa parte di codice deve essere all’interno della funzione site_scripts(), collegata a wp_enqueue_scripts()

$wip_variabile = array(
			
	'valore_1' => '100',
	'valore_2' => '200',
			
);
		
wp_localize_script( 'wip-file-javascript', 'wip_variabile', $wip_variabile );

Puoi anche utilizzare questo codice in un tema, modificando il percorso del file javascript ed integrando il codice precedentemente scritto nel file functions.php

In questo caso sostituisci:

wp_enqueue_script( 'wip-file-javascript', plugins_url('/assets/js/wip-file-javascript.js', __FILE__ ), array('jquery'), '', true );

con:

wp_enqueue_script( 'wip-file-javascript', get_template_directory() . '/assets/js/wip-file-javascript.js', array('jquery'), '', true );

nel caso il file

wip-file-javascript.js

si trovi all’interno di

/wp-content/themes/cartelladeltema/assets/js/

Puoi utilizzare i dati passati al file javascript tramite la seguente sintassi:

$nomevariabile.$valore

jQuery.noConflict()(function($){

	var valore_1 = wip_variabile.valore_1; 
	var valore_2 = wip_variabile.valore_2; 
	
});

Dopo aver attivato il plugin, se hai scritto tutto correttamente vedrai, nel codice sorgente della pagina HTML generata da WordPress:

<script type='text/javascript'>
/* <![CDATA[ */
var wip_variabile = {"valore_1":"100","valore_2":"200"};
/* ]]> */
</script>

Se hai suggerimenti oppure dubbi su questa guida, lascia pure un commento, puoi scaricare il plugin dal seguente pulsante 🙂