Des données de PHP à JavaScript avec WordPress

L’utilisation de données de variables PHP dans des scripts JavaScript est assez fréquent dans le développement web. La plupart du temps, c’est utile lors de l’utilisation de fonctionnalités dynamiques comme de l’autocomplétion ou l’affichage de cartes.

Ainsi, pour réaliser cela dans WordPress, deux solutions existent : mélanger le JavaScript et le PHP ou utiliser la fonction wp_localize_script().

Bien que la première méthode fonctionne, elle est à éviter car le code n’est pas propre, de plus une fonction native existe déjà pour cela.

Une fonction qui porte (presque) mal son nom

La fonction wp_localize_script() porte bien son nom. En effet, le but premier de cette fonction est de permettre de passer des traductions de termes récupérés en PHP vers des scripts JavaScript. D’où l’utilisation du terme « localize » (traduire en anglais).

Bien que la traduction soit sa première mission, la simple transmission de données brutes fonctionne également.

La fonction utilise 3 arguments : l’identifiant du script, le nom de la variable qui contiendra les données dans le script JavaScript et enfin la variable PHP (le contenu) que l’on envoie au script. Comme ceci :

wp_localize_script( $identifiant, $variableJs, $variablePhp )

Exemple d’utilisation

Pour mettre en application l’utilisation de la fonction, rien de mieux qu’un exemple.

Imaginons que vous ayez un type de contenu personnalisé « Evénément » et que vous souhaitez afficher une carte sur chaque événement. Pour cela, un champ « Latitude et longitude » existe sur chaque fiche d’événément. La carte est intégrée en JavaScript sur chaque fiche et il faut donc injecter dynamiquement les coordonnées lors de l’affichage de l’événement.

Pour réaliser cela, commençons premièrement par créer l’appel à notre script JavaScript :

wp_enqueue_script('script-map', get_stylesheet_directory_uri() . '/js/app.js');

Ici, script-map est l’identifiant du script. Vous pouvez choisir n’importe lequel suivant votre cas d’utilisation. Nous l’utiliserons comme premier argument dans la fonction wp_localize_script().

Ensuite, nous récupérons les coordonnées de l’événément via ACF par exemple :

$coord = get_field("coordonnees");

Et enfin, nous pouvons passer la variable à notre script JavaScript :

wp_localize_script( 'script-map', 'localisation', $coord );

Maintenant que les données sont envoyées vers le JavaScript, elles sont donc récupérables en utilisant le deuxième argument de la fonction :

console.log(localisation);

Pour aller plus loin

Pour conclure, il est donc possible de passer une valeur au JavaScript assez facilement. Ainsi, si vous souhaitez pouvoir envoyer une quantité plus importante de données, par exemple tous les lieux de vos événements, il faudra vous tourner vers la fonction PHP json_encode() pour passer par du JSON. Enfin, vous pourrez récupérer les éléments en parsant le contenu en JavaScript.