WordPress开发中如何将 PHP 生成的动态数据传递到前端 JS

在 WordPress 主题开发 和 WordPress 插件开发 过程中，我们经常需要在前端 JavaScript 代码中使用 PHP 生成的动态数据，比如当前用户信息、站点设置、文章数据等。那么，如何优雅地将 PHP 数据传递到前端 JS 呢？本文将介绍几种常见的方法。

1. 使用 wp_localize_script()

wp_localize_script() 是 WordPress 官方推荐的方式，最适合用于将 PHP 变量传递给 JavaScript。

示例：

在 functions.php 中添加：

function my_theme_enqueue_scripts() {
    wp_enqueue_script('my-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), null, true);

    // 传递动态数据
    wp_localize_script('my-script', 'myThemeData', array(
        'ajax_url'   => admin_url('admin-ajax.php'), // AJAX 请求地址
        'site_name'  => get_bloginfo('name'), // 站点名称
        'user_id'    => get_current_user_id(), // 当前用户 ID
    ));
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

然后在 js/my-script.js 中使用：

console.log(myThemeData.site_name); // 输出站点名称
console.log(myThemeData.user_id);   // 输出当前用户 ID

2. 直接输出 JSON 到前端

如果不想使用 wp_localize_script()，可以手动输出 JSON 数据，例如在 header.php 添加：

<script>
    var myThemeData = <?php echo json_encode(array(
        'ajax_url'   => admin_url('admin-ajax.php'),
        'site_name'  => get_bloginfo('name'),
        'user_id'    => get_current_user_id(),
    )); ?>;
</script>

然后在 JavaScript 里直接使用：

console.log(myThemeData.ajax_url);

3. 通过 AJAX 获取数据

如果数据变化较频繁，可以使用 AJAX 动态获取。

后端处理：

在 functions.php 添加：

function my_ajax_get_data() {
    wp_send_json(array(
        'message' => 'Hello from PHP!',
        'time'    => current_time('mysql'),
    ));
}
add_action('wp_ajax_get_my_data', 'my_ajax_get_data');
add_action('wp_ajax_nopriv_get_my_data', 'my_ajax_get_data'); // 允许未登录用户访问

前端 AJAX 请求：

fetch(myThemeData.ajax_url + '?action=get_my_data')
    .then(response => response.json())
    .then(data => console.log(data));

4. 结语

在 WordPress 主题开发 和 WordPress 插件开发 过程中，将 PHP 变量传递到 JavaScript 主要有三种方式：

1. wp_localize_script()（官方推荐，适合小量数据）。
2. 直接输出 JSON（适合静态变量）。
3. 使用 AJAX 请求（适合动态数据）。

选择合适的方法，可以让你的 WordPress 主题更灵活、性能更优。希望这篇文章对你有所帮助！