如何使用wp_localize_script将php变量传递给Wordpress中的*.js文件

Question

我正在开发一个WordPress插件，它使用来自后端的数据来在前端显示它。

我有两份重要的文件。一个带有表单的PHP插件文件，用户可以在其中提交数据，另一个插件的JavaScript文件，其中的数据应该实现为一个动态生成的内容文件。

首先，我使用iframe来实现数据，数据存储在HTML文件中，但是这种方法有很多缺点。我想用一个字符串变量直接插入数据，这个字符串变量从PHP文件传递到JavaScript文件，然后算出来，wp-localize-script应该能做到这一点，但我不能让它工作。

在我的PHP插件文件中，我的代码如下：

$phptestvariable = "Ausgabe der PHP-Testvariable";

function js_enqueue_scripts() {

    wp_register_script("scripts", plugin_dir_url(__FILE__) . '/wp-content/plugins/h5p/h5p-php-library/js/h5p.js' );
    wp_enqueue_script("scripts");
    wp_localize_script("scripts", "php_vars", $phptestvariable);
}
add_action("wp_enqueue_scripts", "js_enqueue_scripts");

在我的(/wp-content/plugins/h5p/h5p-php-library/js/h5p.js) JavaScript文件中，代码如下所示：

actionBar.on('cc', function () {

    console.log(php_vars.variable);
    var dialog = new H5P.Dialog('copyrights', H5P.t('ccInfo'), php_vars , $container);
        // Übergabe Werte: Button Name, PopUp Titel, PopUp Inhalt, $container
    dialog.open();
    instance.triggerXAPI('accessed-copyright');
});

我该如何解决这个问题呢？

Answer 1

wp_localize_script的第三个参数必须是数组。例如：

wp_localize_script( 'scripts', 'php_vars',
    array( 
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'var_1' => 'Ausgabe der PHP-Testvariable'
    )
);

然后在你的JS中的某个地方

alert(php_vars.var_1)

将显示value 1

P.S.AJAX包含了一个ajax_url地址来调用你的AJAX，以防你需要它。Here对此进行了一些解释。