Как вызвать wp_localize_script() после скрипта?

Содержание

Вопрос или проблема
Ответ или решение
Шаги для успешного вызова wp_localize_script()
Что делает этот код:
Важные советы:

Вопрос или проблема

Я пытаюсь использовать URL пути WordPress в своем файле js-скрипта. Я прочитал здесь, что мне нужно использовать wp_localize_script. Но, согласно документации Codex

wp_localize_script() ДОЛЖЕН быть вызван после того, как скрипт был зарегистрирован с помощью wp_register_script() или wp_enqueue_script()

Как я могу это сделать?

Это моя функция

if(!function_exists('pt_scripts')):
    function pt_scripts () {
        wp_register_style( 'style', get_stylesheet_uri(), null, '1.3.1', 'all');
        wp_enqueue_style( 'style');
        wp_register_script( 'scripts', get_template_directory_uri() . '/script.js', array('jquery'), '1.3.0', true );
        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'scripts' );
    }
 endif;

add_action('wp_enqueue_scripts','pt_scripts');

Большое спасибо.

Ну, вам нужно вызвать wp_localize_script после регистрации скрипта, потому что вам нужен дескриптор этого скрипта… И, конечно, вы не можете локализовать что-то, чего не существует…

Вот пример:

if ( !function_exists('pt_scripts') ):
    function pt_scripts () {
        wp_register_style( 'style', get_stylesheet_uri(), null, '1.3.1', 'all' );
        wp_enqueue_style( 'style' );
        wp_register_script( 'scripts', get_template_directory_uri() . '/script.js', array('jquery'), '1.3.0', true );
        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'scripts' );

        wp_localize_script( 'scripts', 'ScriptsData', array(
            'some_data_1' => 'data1',
            ...
        ) );  // 'ScriptsData' - это имя объекта, к которому вы можете получить доступ в вашем JS
    }
endif;

add_action( 'wp_enqueue_scripts', 'pt_scripts' );

PS. ‘scripts‘ – не самое лучшее имя для дескриптора скрипта – с такими именами довольно легко получить конфликты.

Ответ или решение

Чтобы вызывать функцию wp_localize_script() после регистрации скрипта в WordPress, необходимо учесть несколько ключевых аспектов. Давайте подробно разберем, как это сделать в вашем коде.

Шаги для успешного вызова `wp_localize_script()`

Регистрация и подключение скрипта: Начнем с того, что wp_localize_script() должен вызываться после wp_register_script() или wp_enqueue_script(). Это связано с тем, что необходимо сначала зарегистрировать скрипт, чтобы затем локализовать его данные.
Использование правильных идентификаторов: Убедитесь, что идентификаторы, которые вы используете для регистрации скриптов и стилей, уникальны. Это поможет избежать возможных конфликтов с другими плагинами или темами.
Структура данных для локализации: Объект для локализации данных, который вы передаете в wp_localize_script(), будет доступен в вашем JavaScript-файле. Убедитесь, что он логично структурирован и содержит нужные данные.

Вот пример правильной реализации кода:

if ( !function_exists('pt_scripts') ) {
    function pt_scripts() {
        // Регистрируем и подключаем стили
        wp_register_style( 'style', get_stylesheet_uri(), null, '1.3.1', 'all' );
        wp_enqueue_style( 'style' );

        // Регистрируем скрипт
        wp_register_script( 'custom_script', get_template_directory_uri() . '/script.js', array('jquery'), '1.3.0', true );

        // Подключаем jQuery
        wp_enqueue_script( 'jquery' );

        // Подключаем свой скрипт
        wp_enqueue_script( 'custom_script' );

        // Локализуем скрипт, добавляя данные
        wp_localize_script( 'custom_script', 'ScriptData', array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'some_data_1' => 'data1',
            'some_data_2' => 'data2',
        ));
    }
endif;

// Хук для подключения скриптов и стилей
add_action('wp_enqueue_scripts', 'pt_scripts');

Что делает этот код:

wp_register_script(): Регистрирует новый скрипт с указанным уникальным идентификатором (custom_script), который затем можно использовать для локализации.
wp_enqueue_script(): Подключает скрипт к вашей теме, что добавляет его в очередь загрузки на странице.
wp_localize_script(): Создает объект JavaScript (ScriptData), который будет доступен в вашем файле script.js. В этом объекте передаются ключи и значения, которые вы можете использовать внутри вашего скрипта.

Важные советы:

Избегайте использования общих названий для скриптов, таких как scripts, так как это может привести к конфликтам. Используйте более конкретные названия, отражающие назначение вашего скрипта.
Протестируйте скрипт после внесения изменений. Убедитесь, что данные доступны в вашем JavaScript-коде и обрабатываются правильно.

Соблюдение этих принципов позволяет вам успешно использовать wp_localize_script() и эффективно управлять динамическими данными в ваших JavaScript-файлах.