如何使用 WordPress 的 wp_localize_script() 将PHP变量传递给JavaScript?

2025-01-03 22 0

在WordPress中,wp_localize_script() 函数是一个非常方便的工具,它允许你将PHP变量传递给JavaScript。以下是如何使用这个函数的步骤:

  1. 首先,确保你已经在WordPress中注册了脚本,并且已经正确地包含了它。

  2. 使用 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。

相关文章

在WordPress主题中,如何使用 get_header(), get_footer(), 和 get_sidebar() 函数来包含模板部分?
在WordPress主题开发中,如何使用 the_custom_logo() 函数来显示自定义标志?
在WordPress插件中,如何使用 wp_enqueue_script() 和 wp_enqueue_style() 来注册和排队脚本和样式?
如何使用WordPress的 get_option() 和 update_option() 函数来获取和更新选项?
如何使用WordPress的WP_Customize_Manager类来自定义主题定制器?
在WordPress主题中,如何使用wp_reset_postdata()来避免查询冲突?