Фильтр script_loader_tag в WordPress позволяет изменять HTML-код тега <script>, созданного через функцию wp_enqueue_script(). С его помощью можно добавлять или изменять атрибуты скриптов, такие как async, defer, а также добавлять дополнительные параметры.
apply_filters( ‘script_loader_tag’, string $tag, string $handle, string $src )Хук script_loader_tag принимает три параметра:
$tag— HTML-код тега<script>.$handle— идентификатор скрипта, зарегистрированный черезwp_enqueue_script().$src— URL-адрес скрипта.
Этот хук дает разработчикам возможность управлять тем, как загружаются и отображаются скрипты на страницах сайта, не редактируя напрямую HTML-код шаблона.
Использование
Для использования script_loader_tag, создаем функцию, которая изменяет HTML-код тега <script>, и подключаем ее к фильтру с помощью add_filter:
add_filter( 'script_loader_tag', 'custom_script_loader_tag', 10, 3 );
function custom_script_loader_tag( $tag, $handle, $src ) {
// Здесь добавляем логику для изменения тега <script>
return $tag;
}
Пример #1: Добавление атрибута defer к определенному скрипту
Атрибут defer позволяет браузеру загружать скрипт асинхронно, что может улучшить производительность. В этом примере добавим defer для скрипта с идентификатором custom-script.
add_filter( 'script_loader_tag', 'add_defer_to_custom_script', 10, 3 );
function add_defer_to_custom_script( $tag, $handle, $src ) {
if ( 'custom-script' === $handle ) {
return str_replace( ' src', ' defer src', $tag );
}
return $tag;
}
С этим кодом, если custom-script был добавлен через wp_enqueue_script(), то в HTML-тег <script> будет добавлен атрибут defer.
Пример #2: Добавление атрибута async для скрипта
Атрибут async позволяет загружать скрипт асинхронно и выполнять его сразу после загрузки. Это полезно для скриптов, которые не зависят от других ресурсов.
add_filter( 'script_loader_tag', 'add_async_to_script', 10, 3 );
function add_async_to_script( $tag, $handle, $src ) {
if ( 'async-script' === $handle ) {
return str_replace( ' src', ' async src', $tag );
}
return $tag;
}
Теперь скрипт async-script будет загружаться и исполняться асинхронно, что может ускорить загрузку страницы.
Пример #3: Добавление кастомных атрибутов
В этом примере добавим скрипту атрибут data-custom, который может использоваться для передачи дополнительных данных в JavaScript.
add_filter( 'script_loader_tag', 'add_custom_attribute_to_script', 10, 3 );
function add_custom_attribute_to_script( $tag, $handle, $src ) {
if ( 'custom-attribute-script' === $handle ) {
return str_replace( ' src', ' data-custom="value" src', $tag );
}
return $tag;
}
Теперь скрипт с custom-attribute-script будет иметь атрибут data-custom="value", который можно использовать внутри JavaScript.
Пример #4: Добавление уникального ID к скрипту
ID может понадобиться, если необходимо взаимодействовать со скриптом напрямую через JavaScript. Здесь добавим атрибут id="unique-script-id" для определенного скрипта.
add_filter( 'script_loader_tag', 'add_id_to_script', 10, 3 );
function add_id_to_script( $tag, $handle, $src ) {
if ( 'id-specific-script' === $handle ) {
return str_replace( '<script ', '<script id="unique-script-id" ', $tag );
}
return $tag;
}
Теперь скрипт с id-specific-script получит ID unique-script-id.
Пример #5: Указание типа модуля ES6 для скрипта
Скрипты ES6 требуют атрибута type="module" для корректной загрузки и использования возможностей ECMAScript 6. В этом примере добавим type="module" для скрипта.
add_filter( 'script_loader_tag', 'load_script_as_module', 10, 3 );
function load_script_as_module( $tag, $handle, $src ) {
if ( 'es6-module-script' === $handle ) {
return str_replace( '<script ', '<script type="module" ', $tag );
}
return $tag;
}
Теперь скрипт es6-module-script будет загружаться как модуль ES6, что позволяет использовать его с импортом и экспортом модулей.
Пример #6: Добавление условных комментариев для поддержки старых версий IE
Скрипты можно загружать только для старых версий Internet Explorer. В этом примере добавим условие для IE ниже девятой версии.
add_filter( 'script_loader_tag', 'conditional_script_for_ie', 10, 3 );
function conditional_script_for_ie( $tag, $handle, $src ) {
if ( 'ie-specific-script' === $handle ) {
$tag = "<!--[if lt IE 9]>" . $tag . "<![endif]-->";
}
return $tag;
}
Скрипт ie-specific-script теперь будет загружаться только для IE 8 и ниже, используя условные комментарии.
Пример #7: Добавление атрибута crossorigin для внешнего скрипта
Если скрипт загружается с внешнего источника и требует кросс-доменных данных, можно добавить атрибут crossorigin.
add_filter( 'script_loader_tag', 'add_crossorigin_to_external_script', 10, 3 );
function add_crossorigin_to_external_script( $tag, $handle, $src ) {
if ( 'external-script' === $handle ) {
return str_replace( ' src', ' crossorigin="anonymous" src', $tag );
}
return $tag;
}
Теперь скрипт external-script будет загружаться с атрибутом crossorigin="anonymous", что позволяет браузеру обрабатывать его кросс-доменно.
Заключение
Хук script_loader_tag предоставляет гибкие возможности для настройки скриптов в WordPress. С его помощью можно оптимизировать производительность, улучшить безопасность, добавить поддержку для старых браузеров и интегрировать продвинутые возможности JavaScript.