在WordPress中,wp_localize_script()
函数是一个非常方便的工具,它允许你将PHP变量传递给JavaScript。以下是如何使用这个函数的步骤:
-
首先,确保你已经在WordPress中注册了脚本,并且已经正确地包含了它。
-
使用
wp_localize_script()
函数将PHP变量传递给JavaScript。
以下是一个具体的例子:
<?php
// 注册一个JavaScript文件
wp_register_script('my-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0', true);
// 创建一个PHP数组,包含你想要传递给JavaScript的变量
$my_php_vars = array(
'homeUrl' => home_url(),
'themeUrl' => get_template_directory_uri(),
'ajaxUrl' => admin_url('admin-ajax.php'),
'someVar' => 'Some Value'
);
// 使用wp_localize_script()将PHP变量传递给JavaScript
wp_localize_script('my-script', 'myLocalizedVars', $my_php_vars);
// 在页面上包含JavaScript文件
wp_enqueue_script('my-script');
?>
在上面的代码中,我们首先注册了一个名为 my-script
的JavaScript文件,并指定了它的路径、依赖、版本和是否在页脚加载。然后,我们创建了一个名为 $my_php_vars
的数组,它包含了我们想要传递给JavaScript的变量。
接下来,我们使用 wp_localize_script()
函数,将 $my_php_vars
数组传递给 my-script
脚本,并且给这个数组在JavaScript中取了一个名字 myLocalizedVars
。
最后,我们使用 wp_enqueue_script()
函数在页面上包含了 my-script
脚本。
现在,在 my-script.js
文件中,你可以使用 myLocalizedVars
对象来访问这些变量:
// my-script.js
console.log(myLocalizedVars.homeUrl); // 输出WordPress的首页URL
console.log(myLocalizedVars.themeUrl); // 输出主题目录的URL
console.log(myLocalizedVars.ajaxUrl); // 输出admin-ajax.php的URL
console.log(myLocalizedVars.someVar); // 输出'Some Value'
这样,你就成功地将PHP变量传递给了JavaScript。