Как использовать wp_localize_script в пользовательском шаблоне страницы?

Question

Как использовать wp_localize_script в пользовательском шаблоне страницы?

22 июн. 2018 г., 15:07:56

Просмотры: 31.8K

Голосов: 10

У меня есть шаблон с названием homepage, который назначен для главной страницы, и внизу шаблона у меня есть тег script. Теперь я хочу использовать мой JSON в этом теге script.

home-template.php

<?php
add_action('wp_enqueue_scripts', 'pass_var_to_js', 99);
function pass_var_to_js() {
    // Локализуем скрипт с новыми данными
    $translation_array = array(
        'popularDestination' => json_encode($data['POPULAR DESTINATIONS']),
    );
    wp_localize_script( 'home_page_json', 'home', $translation_array );

    // Подключаем скрипт с локализованными данными
    wp_enqueue_script( 'home_page_json' );
}
?>

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

wp_localize_script не загружается на моей странице, я проверил исходный код, но он не отображается.

Bhautik

217

javascript wp enqueue script json

Все ответы на вопрос

Комментарии

@Bhautik Рад помочь! Спасибо, что вернулись и отметили ответ как правильный — многие так не делают. Надеюсь, вы останетесь здесь и сами поможете кому-нибудь!

DaveLak

23 июн. 2018 г. 08:22:31

@DaveLake Ура!!!!..

Bhautik

16 июл. 2018 г. 11:54:25

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,
));

Затем используйте:

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

Затем используйте в JS файле:

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;

Rajon Kobir

21

18 февр. 2024 г. 22:17:57

DaveLak 1.06K · Accepted Answer · 2018-06-22T21:10:25Z

Судя по предоставленному коду, вы не совсем понимаете, как работает функция wp_localize_script. Сигнатура функции выглядит так:

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

Где $handle — это название JavaScript-файла, который вы зарегистрировали или добавили в очередь до вызова wp_localize_script. Обратите внимание на пример в кодексе (я добавил номера строк ниже):

1: <?php
2: 
3: // Регистрируем скрипт
4: wp_register_script( 'some_handle', 'path/to/myscript.js' );
5: 
6: // Локализуем скрипт с новыми данными
7:  $translation_array = array(
8:    'some_string' => __( 'Некоторый текст для перевода', 'plugin-domain' ),
9:    'a_value' => '10'
10: );
11: wp_localize_script( 'some_handle', 'object_name', $translation_array );
12: 
13: // Добавляем скрипт в очередь с локализованными данными.
14: wp_enqueue_script( 'some_handle' );

Посмотрите на строку 4 выше. Сначала JavaScript-файл регистрируется с помощью $handle 'some_handle'.
Затем, на строке 11, используется wp_localize_script(), чтобы зарегистрировать данные локализации для скрипта с $handle 'some_handle', который был зарегистрирован на строке 4.
Наконец, на строке 14, JavaScript-файл (зарегистрированный на строке 4) добавляется в очередь. Поскольку wp_localize_script() получил тот же $handle, что и на строке 4, WordPress автоматически включает локализованные данные на каждой странице, где вызывается wp_enqueue_script( 'some_handle' );.

Другими словами, вам нужно использовать wp_localize_script вместе с зарегистрированным JavaScript-файлом. Не отдельно, как вы делаете сейчас.

Эта цитата из раздела примечаний говорит примерно то же самое:

ВАЖНО! wp_localize_script() ДОЛЖЕН вызываться после регистрации скрипта с помощью wp_register_script() или wp_enqueue_script().

Также, думаю, вам не нужно использовать json_encode() для вашего $data. WordPress должен сделать это за вас.