Функция wp_script_add_data() в WordPress с примерами

Функция wp_script_add_data() используется для добавления метаданных к уже зарегистрированным или добавленным в очередь на вывод скриптам. Это позволяет, например, установить условия для загрузки скриптов только для определённых браузеров (например, для старых версий Internet Explorer), или задать атрибуты async или defer для оптимизации загрузки.

wp_script_add_data( string $handle, string $key, mixed $value ): bool

• $handle (строка, обязательный) — Название скрипта, к которому добавляются данные. Это имя должно совпадать с именем, использованным в wp_enqueue_script() или wp_register_script().
• $key (строка, обязательный) — Название метаданных. Возможные значения: conditional, async, defer, group, strategy.
• $value (смешанный, обязательный) — Значение метаданных. Например, условие для загрузки для IE или логическое значение для атрибутов async и defer.

Возвращаемое значение

Функция возвращает true при успешном добавлении данных, и false в случае неудачи.

Описание

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

Возможные значения для $key и $value:

• conditional — строка, содержащая условие для подключения скрипта только для определённых версий Internet Explorer. Например, lt IE 9 (меньше IE 9).
• async — асинхронная загрузка скрипта. Принимает значение true или false.
• defer — отложенная загрузка скрипта. Принимает значение true или false.
• group — определяет, в какой части страницы будет выводиться скрипт: в шапке (0) или в подвале (1).
• strategy — с версии WordPress 6.3 можно задать стратегию загрузки скрипта, например, async или defer.

Пример 1: Подключение скриптов только для Internet Explorer 9 и ниже

Этот пример демонстрирует, как добавить условие для вывода скриптов только для старых версий Internet Explorer.

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

function my_enqueue_scripts() {
    // Подключаем скрипт только для Internet Explorer версий меньше 9
    wp_enqueue_script( 'pngfix', get_template_directory_uri() . '/js/pngfix.js' );
    wp_script_add_data( 'pngfix', 'conditional', 'lt IE 9' );
}

Результат в HTML:

<!--[if lt IE 9]>
<script type='text/javascript' src='http://example.com/wp-content/themes/theme/js/pngfix.js?ver=4.5.2'></script>
<![endif]-->

Пример 2: Добавление атрибута async к скрипту

Этот пример демонстрирует, как добавить атрибут async к уже зарегистрированному скрипту.

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

function my_enqueue_scripts() {
    wp_enqueue_script( 'app', get_template_directory_uri() . '/js/app.js' );
    // Добавляем атрибут async к скрипту
    wp_script_add_data( 'app', 'async', true );
}

Результат в HTML:

<script type='text/javascript' src='http://example.com/wp-content/themes/theme/js/app.js?ver=4.5.2' async></script>

Пример 3: Добавление атрибута defer к скрипту

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

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

function my_enqueue_scripts() {
    wp_enqueue_script( 'app', get_template_directory_uri() . '/js/app.js' );
    // Добавляем атрибут defer к скрипту
    wp_script_add_data( 'app', 'defer', true );
}

Результат в HTML:

<script type='text/javascript' src='http://example.com/wp-content/themes/theme/js/app.js?ver=4.5.2' defer></script>

Пример 4: Добавление условных комментариев для IE с CDN

Этот пример показывает, как подключить скрипты из CDN с условием для старых версий IE:

function add_scripts_for_IE() {
    wp_enqueue_script( 'html5shiv', '//oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js' );
    wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );

    wp_enqueue_script( 'respond', '//oss.maxcdn.com/respond/1.4.2/respond.min.js' );
    wp_script_add_data( 'respond', 'conditional', 'lt IE 9' );
}

add_action( 'wp_enqueue_scripts', 'add_scripts_for_IE' );

Результат в HTML:

<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Пример 5: Подключение скрипта в подвале страницы

Можно указать, что скрипт должен быть загружен в подвале страницы, добавив метаданные с ключом group.

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

function my_enqueue_scripts() {
    wp_enqueue_script( 'footer-script', get_template_directory_uri() . '/js/footer-script.js', array(), null, true );
    wp_script_add_data( 'footer-script', 'group', 1 );
}

Пример 6: Удаление атрибута async для скрипта

Вы также можете удалить атрибут, передав значение false:

wp_script_add_data( 'app', 'async', false );

Это удалит атрибут async для скрипта app.

Заключение

Функция wp_script_add_data() является полезным инструментом для добавления условий и атрибутов к скриптам в WordPress. Она позволяет гибко управлять выводом скриптов в зависимости от браузера или стратегии загрузки, улучшая производительность и совместимость сайта.