Comment passer des variables PHP à JavaScript dans WordPress

Lorsque vous créez un thème ou un plugin WordPress, vous avez parfois du code JavaScript qui doit utiliser des données/valeurs de PHP. Par exemple, vous avez besoin de ces valeurs dans votre code JavaScript :

Homepage URL
Theme option values
WordPress posts data
etc

Le moyen le plus simple de le faire est d’initialiser ces valeurs dans des objets JavaScript dans votre fichier de thème header.php ou votre hook wp_head. Par exemple :

<script>
var myThemeParams = {
   homeURL: <?php echo home_url(); ?>,
   themeOptions: <?php echo get_theme_mod( 'mytheme_options', false ); ?>,
}
</script>

Même si cela fonctionne, WordPress nous a fourni une fonction pour faire quelque chose comme ça. Il s’appelle wp_add_inline_script.

wp_add_inline_script( $handle, $data, $position = 'after' )

$handle : Nom du script auquel ajouter le script en ligne.

$data : Chaîne contenant le JavaScript à ajouter.

$position : s’il faut ajouter le script en ligne avant ou après le handle.

Cette fonction ajoutera un script en ligne avant ou après votre code JavaScript. Il peut en fait faire plus que transmettre des variables PHP à JavaScript. Vous pouvez voir un autre cas d’utilisation ici.

Ainsi, pour utiliser wp_add_inline_script pour passer des variables de PHP à JavaScript, vous devez définir les propriétés de position sur before afin qu’il ajoute le script en ligne avant votre fichier JS. Et puis initialisez un objet JavaScript et définissez la valeur avec les données de PHP.

$myThemeParams = array(
    'homeURL' => home_url(),
    'themeOptions' => get_theme_mod( 'mytheme_options', false )
);
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js' );
wp_add_inline_script( 'my-theme-script', 'var myThemeParams = ' . wp_json_encode( $myThemeParams ), 'before' );

Dans votre JavaScript, vous pouvez y accéder comme ceci :

console.log( myThemeParams.homeURL );
console.log( myThemeParams.themeOptions );