NOUS LES DEVS

wp_localize_script();

Définir une variable JavaScript via Wordpress

Niveau : débutant(e)

</> </> </>

De PHP à JS

Sur ton WordPress, quand tu veux faire passer une variable de PHP à JavaScript, t’as pas 12.000 solutions… La plus basique d’entre-elles est la suivante, c’est pas cool à écrire et en plus tu peux facilement faire une erreur, et le code fait dégueulasse.

<?php
	$var_de_php = 69 - 42;
?>
<script type="text/javascript">
	let ma_var_de_php = "<?php echo $var_de_php; ?>";
</script>
<?php

C’est là qu’intervient wp_localize_script qui est une fonction native de WordPress qui permet justement d’enregistrer une variable PHP en JS, elle n’est pas belle la vie ? La fonction prend 3 arguments, le premier est l’ID qui a été utilisé pour enregistrer un script, via la fonction wp_enqueue_script, si aucun script n’a été enregistré, ça ne marchera pas ! Ensuite il y a le nom de la variable et enfin sa valeur.

$marque = array(
	"Ferrari",
	"Fiat",
	"Ford"
);

wp_localize_script('main', 'marque_voiture', $marque);

Une fois que le script est « enqueue », tu peux vérifier que la variable est accessible dans ton fichier js avec un ptit coup de console.

console.log(marque_voiture);

En fouillant un peu dans le noyau, on peut vite trouver la manière dont cela a été fait. Dans l’idée, c’est exactement ce que nous avions écris plus haut, c’est juste « made in WordPress » un peu plus élégant.

$script = "var $object_name = " . wp_json_encode( $l10n ) . ';';

Au niveau du front, le code est évidement encapsulé dans une balise js et un CDATA, donc vraiment rien d’étonnant, mais c’est bien de savoir.

<script type='text/javascript'>
/* <![CDATA[ */
var marque_voiture = ["Ferrari","Fiat","Ford"];
/* ]]> */
</script>

AJAX URL

Dans la pratique, c’est une fonction qui est très utilisée pour faire transiter l’URL pour les traitements Ajax.

#code PHP
wp_localize_script('main', 'ajaxurl', admin_url( 'admin-ajax.php' ) );

#code JS
$.ajax({
	type: "POST",
	url: ajaxurl,
	dataType: "json",
	data: {
		'action': 'ton_action',
	},
	success: function(response){
		console.log(response);
	}
});