javascript - How to use wp_localize_script in custom page template?

admin管理员组

文章数量:1124670

I have the template called homepage that is assigned to the home page and bottom of a template I have a script tag. now I want to use my JSON in that script tag.

home-template.php

<?php
add_action('wp_enqueue_scripts', 'pass_var_to_js',99);
function pass_var_to_js() {
    // Localize the script with new data
    $translation_array = array(
        'popularDestination' => json_encode($data['POPULAR DESTINATIONS']),
    );
    wp_localize_script( 'home_page_json', 'home', $translation_array );

    // Enqueued script with localized data.
    wp_enqueue_script( 'home_page_json' );
}
?>

<script type="text/javascript">
var data = home.popularDestination;
</script>

wp_localize_script is not loaded on my page I have checked the view-source but it's not displaying.

I have the template called homepage that is assigned to the home page and bottom of a template I have a script tag. now I want to use my JSON in that script tag.

home-template.php

<?php
add_action('wp_enqueue_scripts', 'pass_var_to_js',99);
function pass_var_to_js() {
    // Localize the script with new data
    $translation_array = array(
        'popularDestination' => json_encode($data['POPULAR DESTINATIONS']),
    );
    wp_localize_script( 'home_page_json', 'home', $translation_array );

    // Enqueued script with localized data.
    wp_enqueue_script( 'home_page_json' );
}
?>

<script type="text/javascript">
var data = home.popularDestination;
</script>

wp_localize_script is not loaded on my page I have checked the view-source but it's not displaying.

• javascript
• wp-enqueue-script
• json

Share Improve this question edited Nov 13, 2021 at 13:06 Bhautik asked Jun 22, 2018 at 12:07 BhautikBhautik 21711 gold badge33 silver badges1414 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 15

Based on the code provided it looks like you are misunderstanding how wp_localize_script works. The signature of the function looks like this:

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

Where $handle is the name of a JavaScript file you have registered or enqueued before calling wp_localize_script. Take a look at the example in the codex (I've added line numbers below):

1: <?php
2: 
3: // Register the script
4: wp_register_script( 'some_handle', 'path/to/myscript.js' );
5: 
6: // Localize the script with new data
7:  $translation_array = array(
8:    'some_string' => __( 'Some string to translate', 'plugin-domain' ),
9:    'a_value' => '10'
10: );
11: wp_localize_script( 'some_handle', 'object_name', $translation_array );
12: 
13: // Enqueued script with localized data.
14: wp_enqueue_script( 'some_handle' );

1. Take a look at line 4 above. First a JavaScript file is registered with the $handle 'some_handle'.

2. Next, on line 11, wp_localize_script() is used to register the localization data for the script handle 'some_handle' registered on line 4.

3. Finally, on line 14, the JavaScript file (registered on line 4) is enqueued. Because wp_localize_script() was passed the same $handle registered on line 4, WordPress automatically includes the localized data on every page that wp_enqueue_script( 'some_handle' ); is called.

In other words, you need to use wp_localize_script with a registered JavaScript file. Not by itself like you are doing currently.

This quote from the notes section says more or less the same thing:

IMPORTANT! wp_localize_script() MUST be called after the script has been registered using wp_register_script() or wp_enqueue_script().

---

Also, I don't think you need to json_encode() your $data. WordPress should do that for you.

wp_register_script('nags-quoting-main-js', NAGS_QUOTING_PLUGIN_URL . 'assets/js/main.js', array(), '', true);

$nags_post_url =  NAGS_QUOTING_PLUGIN_URL . 'post.php';
$use_google_api_key = get_option(NAGS_QUOTING_PLUGIN_NAME . '_use_google_api_key');
$google_api_key = get_option(NAGS_QUOTING_PLUGIN_NAME . '_google_api_key');

wp_localize_script('nags-quoting-main-js', 'nags_quoting_plugin_data', array(
    'nags_post_url' => $nags_post_url,
    'use_google_api_key' => $use_google_api_key,
    'google_api_key' => $google_api_key,
));

Then Use:

if ( is_page_template( 'page-templates/nags-quoting.php' ) ) {
    if( ! wp_script_is( 'nags-quoting-main-js', 'enqueued' ) ) {
        wp_enqueue_script('nags-quoting-main-js');
    }
}

Then Use in JS file:

const nags_post_url =  nags_quoting_plugin_data.nags_post_url;
const use_google_api_key = nags_quoting_plugin_data.use_google_api_key;
const google_api_key = nags_quoting_plugin_data.google_api_key;

本文标签： javascriptHow to use wplocalizescript in custom page template