Как добавить любой параметр при регистрации скрипта WordPress на примере async

Раздел:

| Теги:

| Дата публикации:

Что такое async?

Атрибут async у тега <script> управляет тем, как браузер загружает и выполняет JavaScript. Очень часто используется, когда нужно подгрузить виджет стороннего сайта. Например, есть такая строка:

<script src="https://widget.local/widget.js" async></script>

Что делает браузер с async?

  • Начинает загружать HTML
  • Параллельно скачивает widget.js, не блокируя страницу
  • Как только файл загрузился — сразу выполняет его
  • Потом продолжает парсить HTML

Как добавить параметр к тегу?

Есть несколько вариантов.

1. Самый современный, для WordPress 6.3+

Для поддержки async в новых версиях WordPress добавили аргумент strategy:

wp_register_script(
    'widget',
    'https://widget.local/widget.js',
    [],
    null,
    [
        'in_footer' => true,
        'strategy'  => 'async',
    ]
);

wp_enqueue_script('widget');

2. Через wp_script_add_data

wp_register_script('widget', 'https://widget.local/widget.js', [], null, true);
wp_script_add_data('widget', 'async', true);
wp_enqueue_script('widget');

3. Самый универсальный, через фильтр

Наверно самый надежный способ, если нам надо вообще любой параметр добавить к тегу скрипта.

wp_register_script('widget', 'https://widget.local/widget.js', [], null, true);
wp_enqueue_script('widget');

add_filter('script_loader_tag', function ($tag, $handle) {
    if ($handle === 'widget') {
        return str_replace('<script ', '<script async ', $tag);
    }
    return $tag;
}, 10, 2);

Какие параметры вообще могут быть у тега <script>?

Чаще всего:

  • src — путь к файлу скрипта
  • type — text/javascript, module
  • async — для асинхронной загрузки
  • defer — для выполнения после загрузки DOM

Больше записей