помощь с wp_localize_script

Содержание

Вопрос или проблема
Ответ или решение
Теория
Пример
Применение

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

Я немного запутался в этой функции.

Она работает для одной переменной JavaScript. Я попробовал использовать её для двух других, и оказалось, что код в заголовке повторяется 3 раза. Я пытался использовать массив для обработки, но это просто ломало код.

 <?php wp_localize_script( $handle, $name, $data ); ?> 




 function localize_my_script() {
$image_url = get_template_directory_uri() . '/images/supersized/';
$src = get_template_directory_uri() . '/images/preload.gif';
$swfLocation = get_template_directory_uri() . '/js/audiojs.swf';

$localizations = array( 'image_path' => $image_url, 'src' => $src, 'swfLocation' => $swfLocation );

wp_localize_script( 'shutter', 'scriptvars', $localizations );
//wp_localize_script( 'preloader', 'script', $localizations );
//wp_localize_script( 'audio', 'scriptv', $localizations );
 }
 add_action( 'wp_enqueue_scripts', 'localize_my_script' );

С двумя закомментированными строками выше скрипт выводит только одну строку кода в заголовке для всех трех переменных. Но если я раскомментирую их, то происходит тройной вывод. В этой одной строке кода содержатся все три переменные. Так как же я могу вставить код обработки так, чтобы не добавлялось две дополнительные строки кода?

Так работает функция wp_localize_script. Она выводит все переменные перед подключением вашего скрипта, чтобы переменные были доступны в нем. Если вы хотите вывести локализованные переменные только один раз, но убедиться, что они доступны для всех трех скриптов, то можно установить зависимости при подключении/регистрации ваших скриптов. Зарегистрируйте скрипты 'audio' и 'preloader' с зависимостью от 'shutter' (WordPress затем убедится, что 'shutter' подключен перед 'preloader' и 'audio'), и затем локализуйте только скрипт 'shutter'.

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

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

Теория

Функция wp_localize_script предназначена для передачи данных из PHP в JavaScript-среду, то есть позволяет "локализовать" переменные JavaScript, чтобы они были доступны в скриптах, загружаемых через WordPress. Обычно функция используется для передачи текстовых строк (например, для многоязычной локализации) или других данных, которые вы хотите использовать в JavaScript.

Основной принцип работы функции заключается в следующем:

Она добавляет сгенерированный JavaScript код (в виде объекта), который доступен до запуска самого скрипта.
Требуется передача уникального идентификатора скрипта (handle), уникального имени объекта переменной и самих данных.

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

Пример

Проблема, с которой вы столкнулись, заключается в том, что попытка локализовать три разных скрипта (‘shutter’, ‘preloader’, и ‘audio’) приводит к тому, что одни и те же переменные дублируются в заголовке. Причина в том, что вы пытаетесь локализовать переменные для каждого из этих скриптов отдельно.

Ваш код:

function localize_my_script() {
    $image_url = get_template_directory_uri() . '/images/supersized/';
    $src = get_template_directory_uri() . '/images/preload.gif';
    $swfLocation = get_template_directory_uri() . '/js/audiojs.swf';

    $localizations = array('image_path' => $image_url, 'src' => $src, 'swfLocation' => $swfLocation);

    wp_localize_script('shutter', 'scriptvars', $localizations);
    //wp_localize_script('preloader', 'script', $localizations);
    //wp_localize_script('audio', 'scriptv', $localizations);
}
add_action('wp_enqueue_scripts', 'localize_my_script');

В этом коде, только shutter локализуется корректно в примере. Как только вы снимаете комментарии с других вызовов wp_localize_script, появляется повторение, потому что WordPress пытается включить локализованные переменные для каждого регистрируемого скрипта.

Применение

Чтобы избежать дублирования и обеспечить, чтобы переменные были доступны для всех трех скриптов, вы можете воспользоваться механизмом зависимостей. Например, регистрируйте скрипты audio и preloader как зависимые от shutter. Таким образом, WordPress будет гарантировать, что shutter загружается первым, и локализованные переменные уже доступны.

Пример кода:

function localize_and_enqueue_my_scripts() {
    $image_url = get_template_directory_uri() . '/images/supersized/';
    $src = get_template_directory_uri() . '/images/preload.gif';
    $swfLocation = get_template_directory_uri() . '/js/audiojs.swf';

    $localizations = array('image_path' => $image_url, 'src' => $src, 'swfLocation' => $swfLocation);

    wp_register_script('shutter', get_template_directory_uri() . '/js/shutter.js', array('jquery'));
    wp_localize_script('shutter', 'scriptvars', $localizations);

    wp_register_script('preloader', get_template_directory_uri() . '/js/preloader.js', array('shutter'));
    wp_register_script('audio', get_template_directory_uri() . '/js/audio.js', array('shutter'));

    wp_enqueue_script('shutter');
    wp_enqueue_script('preloader');
    wp_enqueue_script('audio');
}
add_action('wp_enqueue_scripts', 'localize_and_enqueue_my_scripts');

Таким образом, массив данных будет локализован только один раз для shutter, и все последующие скрипты будут иметь доступ к тем же переменным за счет зависимости. Это также оптимизирует сетевые запросы и уменьшает размер сгенерированного HTML-кода.

Подводя итог, использование механизма зависимости в WordPress не только решает проблему дублирования кода в заголовке, но и оптимизирует работу скриптов, улучшая производительность сайта.