使用wp_localize_script在PHP主题中传递数据到JavaScript

在WordPress主题中很常见的情况是需要在PHP文件中获取一些数据，并将它们传递到JavaScript文件中供使用。一种非常方便的方法是使用WordPress中提供的wp_localize_script函数，它可以帮助我们将PHP变量和值传递到JavaScript中。

语法

wp_localize_script函数的语法如下：

wp_localize_script( $handle, $name, $data );

其中：

• $handle（字符串）：要添加数据的脚本句柄。
• $name（字符串）：要创建的JavaScript对象的名称。
• $data（数组）：包含要传递到JavaScript的数据的键值对数组。

示例

以下是使用wp_localize_script函数的示例，将一个包含用户名和URL的数组传递给JavaScript：

// 在enqueue_scripts钩子中的function中添加以下代码
function mytheme_enqueue_scripts() {
    wp_enqueue_script( 'my-script', get_theme_file_uri( '/js/my-script.js' ), array( 'jquery' ), '1.0.0', true );
    $user_data = array(
        'username' => 'JohnDoe',
        'url' => 'http://www.example.com',
    );
    wp_localize_script( 'my-script', 'myData', $user_data );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );

在上面的代码中，我们首先使用wp_enqueue_script函数将my-script.js添加到WordPress中。然后，我们定义一个包含用户名和URL的数组，并使用wp_localize_script函数将数据传递给JavaScript。在我们的JavaScript文件中，我们可以通过以下方式访问这些数据：

// my-script.js
console.log(myData.username); // 输出：JohnDoe
console.log(myData.url); // 输出：http://www.example.com

以上是一个简单的例子，您可以根据需要定义任何类型的数据并将它们传递给JavaScript文件。

结论

在PHP主题中使用wp_localize_script是一种方便的方法，可以帮助我们将数据从PHP文件传递到JavaScript文件中。它使我们能够轻松地在客户端脚本中使用从服务器端获取的数据。