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

互联网 2021-09-29 20:25:54 0 291

当你构建一个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 );

#WordPress#


您的见解

已有 0 条答案