如何在WordPress中将PHP变量传递给JavaScript

当你构建一个WordPress主题或插件时，有时你会有需要使用PHP数据/值的JavaScript代码。例如，您需要JavaScript代码中的这些值:

主页网址

主题选项值

WordPress发布数据

等等

最简单的方法是将这些值初始化为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，您需要将position属性设置为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 );