WordPress как на ладони
Мощный и не дорогой хостинг от Fornex.com Хостинг, VPS/VDS и отдельные сервера только на SSD дисках. 7 дней бесплатного тестирования.

wp_localize_script() WP 2.2

Добавляет дополнительные данные перед указанным скриптом, который должен быть в очереди на вывод.

Скрипт, к которому подключается эта функцию обязательно должен быть добавлен на вывод с помощью wp_enqueue_script().

Изначально функция была создана для локализации строк скрипта. Т.е. перед ним определяются глобальные переменные строк, со значениями нужного перевода, а затем эти строки используются в основном скрипте. Но учитывая особенность работы скрипта, его можно использовать и для других целей, не только для локализации - например, можно перед нужным скриптом определить динамические данные через PHP, а затем использовать их в основном скрипте.

Функция чем-то похожа на wp_add_inline_script(), где можно добавить любой JS код. А в wp_localize_script() определяются переменные массивом, выглядит все это аккуратно и хорошо подходит для глобальных настроек JS скрипта. И та и другая функция прикрепляются к скрипту, который подключается через wp_enqueue_script() и зависят от него.

Функцию нужно подключать через хуки, потому что вызов функции за пределами хуков, может создать проблемы:

  • wp_enqueue_scripts, если нужно вызвать функцию в лицевой части сайта (фронт-энде).

  • admin_enqueue_scripts, чтобы вызвать в административной части.

  • login_enqueue_scripts - для страницы авторизации.

Заметка: wp_localize_script() нужно вызывать:

  • после того как скрипт был зарегистрирован функцией wp_register_script().
  • или добавлен в очередь на вывод с помощью wp_enqueue_script()
  • или, если скрипт уже существует в WordPress.

Если скрипт уже выведен на экран и только потом вызывается wp_localize_script(), то функция ничего не выведет.

Исключение. Если в $handle указать jquery то локализация будет подключаться к скрипту jquery-core.

Но если вы переопределили подключение jquery (указали что подключать его нужно с внешнего ресурса, т.е. удалили базовый вариант подключения в WordPress и указали свой), то скрипт jquery-core будет отключен, а это значит, что локализация не сработает, потому что она подключается к jquery-core, которого уже нет...

Чтобы однозначно избежать обоих этих нестыковок, надо сделать так:

wp_deregister_script( 'jquery-core' );
wp_deregister_script( 'jquery' );

wp_register_script( 'jquery-core', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', false, null, true );
wp_register_script( 'jquery', false, array('jquery-core'), null, true );
Работает на основе: WP_Scripts::localize()

Хуков нет.

Использование

wp_localize_script( $handle, $object_name, $l10n );
$handle(строка) (обязательный)
Название скрипта, перед которым будут добавлены данные. Скрипт должен быть зарегистрирован заранее.
По умолчанию: нет
$object_name(строка) (обязательный)
Название Javascript объекта, который будет содержать данные. Название должно быть уникальным, чтобы не вызвать конфликтов с другими скриптами! В названии нельзя использовать тире -, только латиницу a-zA-Z, подчеркивание _, а также можно примерять метод "верблюжьегоРегстра" (CamelCase).
По умолчанию: нет
$l10n(массив) (обязательный)
Данные перевода. Данные могут быть как в одномерном, так и в многомерном массиве.
По умолчанию: нет

Примеры

#1 Вставка глобальных данных

Пример вставки глобальных javascript данных перед рабочим скриптом (в примере рабочий скрипт это jquery). Вставляем этот код в functions.php:

add_action( 'wp_enqueue_scripts', 'action_function_name_7714', 99 );
function action_function_name_7714(){
	wp_localize_script( 'jquery', 'object_name', array( 
		'some_string' => __( 'Some string to translate' ), 
		 'a_value' => '10' 
	) );
}

Получим в head части сайта:

<script type='text/javascript'>
/* <![CDATA[ */
var object_name = {"some_string":"Some string to translate","a_value":"10"};
/* ]]> */
</script>
<script type='text/javascript' src='http://wptest.ru/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>

#2 Определим файл обработчик AJAX запросов

Добавим скрипт, а затем глобальных данных к нему. Тут мы добавляем javascript файл с AJAX запросом. В файле используется переменная MyAjax.ajaxurl, как URL для направления AJAX запроса. Этот URL мы определим через wp_localize_script():

add_action( 'wp_enqueue_scripts', 'action_function_name_7714' );
function action_function_name_7714(){

	wp_enqueue_script( 'my-ajax-request', get_template_directory_uri() . '/js/custom_script.js' );

	wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

}

получим:

<script type='text/javascript'>
/* <![CDATA[ */
var MyAjax = {"ajaxurl":"http://wptest.ru/wp-admin/admin-ajax.php"};
/* ]]> */
</script>
<script type='text/javascript' src='http://wptest.ru/wp-content/themes/twentyeleven/js/custom_script.js?ver=3.5'></script>

Доступ к переменным в Javascript осуществляется так (для примера 2):

<script>
// в файле custom_script.js мы можем использовать переменную: MyAjax.ajaxurl
alert(MyAjax.ajaxurl); // выведет http://wptest.ru/wp-admin/admin-ajax.php
</script>

Заметки

#1. Данные в итоговом Javascript будут переданы как текст.

Если нужно обработать числа, вы должны использовать функцию parseInt() в принимаемом скрипте:

<script>
FinalZoom = map.getBoundsZoomLevel(bounds)-parseInt(data.a_value);
</script>

#2. Данные выводятся в теге <script>

Тег будет выводится вместе с указанным в первом параметре скриптом (прямо перед скриптом). Поэтому, не получится вывести данные с помощью wp_localize_script(), после того как указанный скрипт уже был добавлен, с использованием функций wp_enqueue_scripts или admin_enqueue_scripts.

Чтобы избежать подобных ошибок, всегда подключайте ваши скрипты в подвал (последний параметр $in_footer в функциях wp_register_scripts() или wp_enqueue_scripts(). Пример: wp_enqueue_script( $slug, $URL, $deps, $ver, true );.

Последний шанс локализовать скрипт это хук-событие wp_print_footer_scripts.

Код wp_localize_script: wp-includes/functions.wp-scripts.php VER 5.0

<?php
function wp_localize_script( $handle, $object_name, $l10n ) {
	global $wp_scripts;
	if ( ! ( $wp_scripts instanceof WP_Scripts ) ) {
		_wp_scripts_maybe_doing_it_wrong( __FUNCTION__ );
		return false;
	}

	return $wp_scripts->localize( $handle, $object_name, $l10n );
}

Cвязанные функции

Из метки: script (скрипт)

Еще из раздела: Регистрация script и style

19 комментов
Полезные 4 Вопросы 3 Все
  • Сергей

    Спасибо! Сайт в закладки.

    2
    Ответить4.4 года назад #
  • campusboy3079 cайт: www.youtube.com/c/wpplus

    Тимур, у тебя в статье Базовые знания для создания Ajax запросов в WordPress в примере есть такой код:

    wp_localize_script( 'jquery', 'myajax', 
    array(
       'url' => admin_url('admin-ajax.php')
    ));

    В результате, получим в head части сайта:

    <script type='text/javascript'>
    /* <![CDATA[ */
    var myajax = {"url":"http:\/\/wptest.ru\/wp-admin\/admin-ajax.php"};
    /* ]]> */
    </script>

    Здесь же в примере дан такой же код, но вывод якобы будет таким:

    <script type='text/javascript'>
    /* <![CDATA[ */
    var MyAjax = {"ajaxurl":"http://wptest.ru/wp-admin/admin-ajax.php"};
    /* ]]> */
    </script>

    Здесь в комментариях он отображается одинаково почему-то, но в самой статье там (в первой) идут слеши прямой и обратный в связке. Есть какая-то принципиальная разница?
    P.S.: О, в предпросмотре одинаково, а после публикации как положено smile

    Ответить3.3 года назад #
    • Kama7100

      Принципиальной разницы нет... wp_localize_script() так выводит. Зачем так я точно не знаю, думаю для валидности - это json формат к томуже... Можно на это тему почитать. В этой статья для наглядности без слэшей показал результат...

      1
      Ответить3.3 года назад #
  • campusboy3079 cайт: www.youtube.com/c/wpplus

    Вставлял в functions.php темы twentyfifteen

    wp_localize_script( 'jQuery', 'AjaxURL', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

    Сразу сбивается кодировка, полный атас. Так и не понял, чего за дела, прописал жёсткую привязку в header.php. Тема была чистая без плагинов.

    Ответить3.3 года назад #
  • campusboy3079 cайт: www.youtube.com/c/wpplus

    Так и не смог заставить выводиться, писал так:

    ### Подключаем стили и JS ###
    function fsmod_scripts_styles() {
    	// Стили (имя, путь, зависимость, версия, вывод в футер)
    	wp_enqueue_style( 'reset', get_stylesheet_directory_uri() . '/css/reset.min.css', array(), null, 'all' );
    	wp_enqueue_style( 'main', get_stylesheet_directory_uri() . '/style.css', array('reset'), null, 'all' );
    	// javascript (имя, путь, зависимость, версия, вывод в футер)
    	wp_deregister_script( 'jquery' );
    	wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, null, true );
    	wp_enqueue_script( 'jquery' );
    	wp_enqueue_script( 'custom', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), null, true);
    	wp_localize_script( 'jquery', 'SendData', array('ajax_url' => admin_url( 'admin-ajax.php' )  ) );
    }
    add_action( 'wp_enqueue_scripts', 'fsmod_scripts_styles' );
    Ответить3 года назад #
    • campusboy3079 cайт: www.youtube.com/c/wpplus

      Во прикол, а написал:

      wp_enqueue_script( 'custom', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), null, true);
      wp_localize_script( 'custom', 'FS_SendData', array('ajax_url' => admin_url( 'admin-ajax.php' )   ) );

      И заработло. Получается если кастомно подключать jquery, то не хочет работать!

      Ответить3 года назад #
      • Kama7100

        Залез в коды сейчас, там такие строки есть:

                if ( $handle === 'jquery' )
        			$handle = 'jquery-core';

        Т.е. если указать jquery то локализация будет подключаться к jquery-core поэтому и не работало...

        Это единственное исключение вроде бы.

        Добавил предупреждение в описание.

        2
        Ответить3 года назад #
        • @ Paul cайт: wiki.pwodev.com

          Я решил эту проблему!
          В моем решении при указании jquery - будет ссылаться на jquery-core, и на оборот.

          wp_deregister_script('jquery-core');
          wp_register_script('jquery-core', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', false, null, true);
          
          wp_deregister_script('jquery');
          wp_register_script('jquery', false, array('jquery-core'), null, true);

          Написал по этому поводу статью:
          http://wiki.pwodev.com/jquery-wordpress-%D0%B8%D0%B7-google/

          Надеюсь будет кому-то полезно.

          1
          Ответить4 месяца назад #
          • Kama7100

            Выглядит логично и идея вроде хорошая мне понравилась, единственное смущает false вместо $src. Но раз все проверено, то надо брать на заметку! Спасибо за коммент! Если не против использую этот прием где-нить в статьях?

            Ответить4 месяца назад #
            • @ pwodev cайт: wiki.pwodev.com

              false вместо$src сначала меня тоже смущало, но задача сделать так, чтобы в коде сработал (появился) только один из скриптов, поэтому во втором объявлении скрипта - $src нужно было оставить пустым. Только в этом случае получилось избежать дублирования jQuery в коде.

              Как вариант, можно использовать '' или false, результат будет одинаковый.

              В статьях можешь использовать. Если с ссылкой на мой сайт wiki.pwodev.com или конкретную статью, буду вообще рад. good

              Ответить4 месяца назад #
  • cron

    жаль что нельзя определить место вывода скрипта. хедер или футер

    Ответить2.3 года назад #
    • Kama7100

      Можно, можно... gamer

      wp_localize_script прикрепляется к уже подключенному скрипту. Который в свою очередь может быть подключен в шапку или подвал... В зависимости от этого и будет выведет localize_script...

      Ответить2.3 года назад #
  • campusboy3079 cайт: www.youtube.com/c/wpplus

    Очень похожа на wp_add_inline_script, там какой хочешь можно JS код прикрутить. Зато в wp_localize_script передаётся массивом, что довольно аккуратно выглядит и для всяких настроек очень даже хорош! good

    1
    Ответить1.6 год назад #
  • Михаил

    Можно ли как-то заставить wp_localize_script выводится в хедере, а сам wp_enqueue_script в футере?
    Это очень помогло бы с оптимизацией под пейдж спид.

    Ответить1.3 год назад #
    • Kama7100

      Повесь его на тот скрипт, который в хедар подключается... Если такого нет, то подключай его в подвале...

      Ответить1.3 год назад #
  • Marie

    А как можно проверить срабатывала ли уже эта функция с такими параметрами?
    То есть если wp_localize_script('main', 'user', $userParameters) уже один раз задал переменную user, то заново эту переменную не задавать.

    1
    Ответить1.2 год назад #
  • Есть ли какой-нибудь хук для расширения переменной $l10n?

  • Михаил Алфёров cайт: groomershop.ru

    https://validator.w3.org/ ругается на указание type="text/javascript" для выведенного через wp_localize_script() скрипта. Как-то можно вывести скрипт без указания типа?

    Ответить2 месяца назад #
Здравствуйте, !     Войти . Зарегистрироваться