Cómo pasar variables PHP a JavaScript en WordPress

Cuando está creando un tema o complemento de WordPress, a veces tiene código JavaScript que necesita usar datos / valores de PHP. Por ejemplo, necesita estos valores en su código JavaScript:

Homepage URL
Theme option values
WordPress posts data
etc

La forma más fácil de hacerlo es inicializando esos valores en objetos JavaScript en su archivo de tema header.php o en el gancho wp_head. Por ejemplo :

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

Aunque funciona, WordPress nos ha proporcionado una función para hacer algo así. Se llama wp_add_inline_script.

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

$ handle: nombre de la secuencia de comandos para agregar la secuencia de comandos en línea.

$ data: Cadena que contiene el JavaScript que se agregará.

$ position: si se debe agregar el script en línea antes del identificador o después.

Esa función agregará un script en línea antes o después de su código JavaScript. En realidad, puede hacer más además de pasar variables PHP a JavaScript. Puedes ver otro caso de uso aquí.

Entonces, para usar wp_add_inline_script para pasar variables de PHP a JavaScript, debe establecer las propiedades de posición en antes para que agregue el script en línea antes de su archivo JS. Y luego inicialice un objeto

$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' );

En su JavaScript puede acceder a él así:

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