Как передать переменные PHP в JavaScript в WordPress

Когда вы создаете тему или плагин WordPress, иногда у вас есть код JavaScript, который должен использовать данные / значения из PHP. Например, вам понадобятся эти значения в вашем коде JavaScript:

Homepage URL
Theme option values
WordPress posts data
etc

Самый простой способ сделать это – инициализировать эти значения в объектах JavaScript в файле темы header.php или в хуке wp_head. Например :

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

Несмотря на то, что это работает, WordPress предоставил нам функцию для того, чтобы делать что-то подобное. Это называется wp_add_inline_script.

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

$ handle: Имя сценария, в который нужно добавить встроенный сценарий.

$ data: строка, содержащая добавляемый JavaScript.

$ position: добавлять ли встроенный скрипт перед дескриптором или после него.

Эта функция добавит встроенный скрипт до или после вашего кода JavaScript. На самом деле он может делать больше, кроме передачи переменных PHP в JavaScript. Здесь вы можете увидеть другой вариант использования.

Итак, чтобы использовать wp_add_inline_script для передачи переменных из PHP в JavaScript, вам необходимо установить для свойств позиции значение before, чтобы он добавлял встроенный скрипт перед вашим файлом JS. Затем инициализируйте объект JavaScript и установите значение с данными из 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' );

В вашем JavaScript вы можете получить к нему доступ следующим образом:

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