Como passar variáveis PHP para JavaScript no WordPress

Quando você está construindo um tema ou plugin do WordPress, às vezes você tem um código JavaScript que precisa usar dados / valores do PHP. Por exemplo, você precisa destes valores em seu código JavaScript:

Homepage URL
Theme option values
WordPress posts data
etc

A maneira mais fácil de fazer isso é inicializando esses valores em objetos JavaScript em seu arquivo de tema header.php ou gancho wp_head. Por exemplo :

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

Embora funcione, o WordPress nos forneceu uma função para fazer algo assim. É chamado de wp_add_inline_script.

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

$ handle: nome do script ao qual adicionar o script embutido.

$ data: String contendo o JavaScript a ser adicionado.

$ position: se deseja adicionar o script embutido antes ou depois do identificador.

Essa função adicionará um script embutido antes ou depois do seu código JavaScript. Na verdade, ele pode fazer mais além de passar variáveis ​​PHP para JavaScript. Você pode ver outro caso de uso aqui.

Portanto, para usar wp_add_inline_script para passar variáveis ​​de PHP para JavaScript, você precisa definir as propriedades de posição como antes para que ele adicione o script embutido antes de seu arquivo JS. Em seguida, inicialize um objeto JavaScript e defina o valor com dados do 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' );

Em seu JavaScript, você pode acessá-lo assim:

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