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

Question

I am working on a WordPress plugin, that uses data from the backend to display it in the frontend.

I've got two important files. One PHP plugin file with a form, where users can submit data and one JavaScript file of another Plugin, where the data should be implemented into a dynamically generated content file.

First, I used an iframe to implement the data, which is stored in an HTML file, but this method has many disadvantages. I would like to insert the data directly with a string-variable passed from the PHP file to the JavaScript file and figured out, that wp-localize-script should do that, but I cant get it to work.

In my PHP plugin file, my code looks like this:

$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");

In my JavaScript file (/wp-content/plugins/h5p/h5p-php-library/js/h5p.js) the code looks like this:

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');
});

How can I fix this?

Answer 1

3rd parameter of wp_localize_script has to be an array. For example:

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

Then somewhere in your JS

alert(php_vars.var_1)

will display value 1

PS ajax_url contains and URL to make your AJAX calls in case you need that too. Here is some explanation on that.