wp_localize_script详解

wp_localize_script 是一个WordPress函数，用于将PHP数据传递给已注册的JavaScript脚本。尽管名字中包含“localize”（本地化），这个函数的用途远不止于此。它主要用于在JavaScript中使用从PHP传递过来的变量和数据。

作用

wp_localize_script 函数的主要作用是：

1. 将PHP数据传递给JavaScript：可以将PHP中的变量、数组或对象传递给JavaScript脚本，使得JavaScript可以访问这些数据。
2. 实现国际化和本地化：可以用于传递翻译字符串或其他本地化数据给JavaScript脚本，以实现前端的多语言支持。

使用方法

wp_localize_script 函数的基本使用方法如下：

wp_localize_script( $handle, $object_name, $l10n );

参数说明：

• $handle：脚本的句柄（即在 wp_enqueue_script 中注册的句柄）。
• $object_name：在JavaScript中使用的对象名称。
• $l10n：要传递的数据，可以是一个数组或对象。

示例

1. 将数据传递给JavaScript

假设我们有一个名为 my-script 的JavaScript文件，我们想将一些PHP数据传递给这个脚本。

在PHP中：

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

    // 准备要传递的数据
    $data_to_pass = array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'some_data' => 'This is some data from PHP',
    );

    // 使用 wp_localize_script 传递数据
    wp_localize_script( 'my-script', 'myData', $data_to_pass );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

在JavaScript中（my-script.js）：

// 可以直接使用传递过来的数据
console.log(myData.ajax_url); // 输出：Ajax URL
console.log(myData.some_data); // 输出：This is some data from PHP

2. 实现国际化和本地化

假设我们有一个需要翻译的字符串，我们可以使用 wp_localize_script 将翻译后的字符串传递给JavaScript。

在PHP中：

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

    // 准备翻译字符串
    $translation_array = array(
        'greeting' => __('Hello, World!', 'text-domain'),
        'farewell' => __('Goodbye!', 'text-domain'),
    );

    // 使用 wp_localize_script 传递翻译字符串
    wp_localize_script( 'my-script', 'myTranslations', $translation_array );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

在JavaScript中（my-script.js）：

// 使用传递过来的翻译字符串
alert(myTranslations.greeting); // 弹出：Hello, World!
alert(myTranslations.farewell); // 弹出：Goodbye!

总结

wp_localize_script 是一个非常强大的工具，可以将PHP数据和本地化字符串传递给JavaScript脚本，增强了前端与后端之间的数据交互能力。在实际使用中，可以根据需求灵活地将不同类型的数据传递给JavaScript。