WP_SCRIPT_ADD_DATA() — функция для добавления метаданных к скрипту

## WP_SCRIPT_ADD_DATA() │ WP 4.2.0

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

### Возможные значения

- **$key** и **$value**:
  - 'conditional' — строка, содержащая условие для Internet Explorer, например, для версий IE 6 и ниже, IE 7 и т.д.

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

- **true** — если добавление данных прошло успешно.
- **false** — если возникла ошибка.

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

```php
wp_script_add_data( $handle, $key, $value );
  • $handle (string, обязательный) — имя скрипта.
  • $key (string, обязательный) — название метаданных, которые мы хотим сохранить.
  • $value (mixed, обязательный) — строка с данными для добавления.

Примеры

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

В этом примере мы добавим условие, чтобы подключать скрипт только для Internet Explorer версии ниже 9.

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

function my_enqueue_scripts() {
    // Подключаем специальный скрипт только для Internet Explorer 6
    wp_enqueue_script('pngfix', get_template_directory_uri() . 'js/pngfix.js');

    // Добавляем условие
    wp_script_add_data('pngfix', 'conditional', 'lt IE 9');
}

В результате в <head> документа появится:

Пример 2: Добавление атрибута async или 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 );
}

add_filter( 'script_loader_tag', 'support_async_defer_script_attrs', 10, 2 );

function support_async_defer_script_attrs( $tag, $handle ) {
    foreach ( [ 'async', 'defer' ] as $attr ) {
        if ( ! wp_scripts()->get_data( $handle, $attr ) ) {
            continue;
        }

        // Проверяем, добавлен ли атрибут уже
        if ( ! preg_match( ":s{$attr}[=>s]:", $tag ) ) {
            $tag = preg_replace( ':(?=>):', " $attr", $tag, 1 );
        }

        break; // Разрешить только async или defer, но не оба.
    }

    return $tag;
}

После выполнения получим следующий код в <head>:

Пример 3: Поддержка async/defer

add_action( 'wp_enqueue_scripts', 'twentytwenty_register_scripts' );
add_filter( 'script_loader_tag', 'filter_script_loader_tag', 10, 2 );

function twentytwenty_register_scripts() {
    wp_enqueue_script( 'twentytwenty-js', get_template_directory_uri() . '/assets/js/index.js', [], '1.0', false );

    // Добавляем атрибут async
    wp_script_add_data( 'twentytwenty-js', 'async', true );
}

function filter_script_loader_tag( $tag, $handle ) {
    foreach ( array( 'async', 'defer' ) as $attr ) {
        if ( ! wp_scripts()->get_data( $handle, $attr ) ) {
            continue;
        }

        // Проверяем, чтобы атрибут не был добавлен дважды
        if ( ! preg_match( ":s$attr(=|>|s):", $tag ) ) {
            $tag = preg_replace( ':(?=>):', " $attr", $tag, 1 );
        }

        break; // Разрешить только async или defer, но не оба.
    }

    return $tag;
}

Заметки

  • Для получения дополнительной информации смотрите метод WP_Dependencies::add_data().

Изменения

  • Уведомление о введении: начиная с версии 4.2.0.

Leave a Reply

Ваш адрес email не будет опубликован. Обязательные поля помечены *