Функция WP_STYLE_ADD_DATA() в WordPress: Использование и примеры

Функция WP_STYLE_ADD_DATA() в WordPress

Функция wp_style_add_data() добавляет метаданные к файлу CSS, который был подключен с использованием функции wp_enqueue_style(). Это может быть полезно, например, для того, чтобы сделать так, чтобы файл стилей работал только с определёнными версиями браузеров Internet Explorer (IE).

Метаданные будут добавлены к стилю только в том случае, если стиль уже был подключен с помощью функции wp_enqueue_style().

Существует аналогичная функция для скриптов: wp_script_add_data().

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

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

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

Синтаксис функции выглядит следующим образом:

wp_style_add_data( $handle, $key, $value );

Параметры

  • $handle (string, обязательный): Имя стиля, к которому добавляются метаданные. Используйте здесь значение параметра $handle из функции wp_enqueue_style().

  • $key (string, обязательный): Название данных, для которых мы сохраняем значение. Возможные варианты:

    • conditional: Строка, которая предназначена для условных комментариев, например, чтобы указать, что этот стиль работает только для браузеров IE 6 или только для IE-версий старше 7.

    • Примеры значений для $value:

      • IE - только для всех IE (любых версий)
      • IE 6 - только для IE 6
      • lt IE 9 - для версий IE менее 9
      • !IE - для всех браузеров, кроме IE
    • alt (boolean): Для добавления rel="alternate stylesheet".

    • title (string): Для предпочтительных/альтернативных стилей.

    • rtl (boolean|string): Чтобы указать, что это стиль для языков, читаемых справа налево (например, арабский).

    • suffix (string): Необязательный суффикс, используемый в сочетании с RTL.

  • $value (mixed, обязательный): Строка, содержащая данные, котор��е нужно добавить.

Примеры использования

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

Этот пример из темы Twenty Fifteen. Он загружает стили только для IE8 и более ранних версий, так как IE10 и более новые версии не поддерживают условные комментарии.

add_action( 'wp_enqueue_scripts', 'wpdocs_enqueue_scripts' );
function wpdocs_enqueue_scripts() {
    // Загружаем стили для Internet Explorer
    wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', [ 'twentyfifteen-style' ], '20141010' );
    wp_style_add_data( 'twentyfifteen-ie', 'conditional', 'lt IE 9' );

    // Загружаем стили для Internet Explorer 7
    wp_enqueue_style( 'twentyfifteen-ie7', get_template_directory_uri() . '/css/ie7.css', [ 'twentyfifteen-style' ], '20141010' );
    wp_style_add_data( 'twentyfifteen-ie7', 'conditional', 'lt IE 8' );
}

При этом генерируется тег link, обернутый в условные комментарии:


Примечание: lt означает "меньше чем". Используйте gt для указания "больше чем".

Пример 2: Другие варианты использования

// Использование alt
wp_enqueue_style( 'mystyle_id', 'http://example.com/css/mystyle.css' );
wp_style_add_data( 'mystyle_id', 'alt', true );
// 

// Использование title
wp_style_add_data( 'mystyle_id', 'title', 'foo' );
// 

Примечания

  • Обратите внимание на использование функции WP_Dependencies::add_data() для обработки добавления данных к стилям и скриптам.

Изменения

  • С версии 3.6.0: функция была добавлена.
  • С версии 5.8.0: добавлено значение 'path' для параметра $key.

Взаимосвязанные функции

Функция wp_style_add_data() тесно связана с другими функциями для работы со стилями в WordPress:

  • wp_add_inline_style()
  • wp_dequeue_style()
  • wp_deregister_style()
  • wp_enqueue_style()
  • wp_register_style()
  • wp_style_is()
  • и другие функции для работы со скриптами и стилями.

Эти функции упрощают управление стилями и помогают сделать вашу тему WordPress более гибкой и совместимой с различными браузерами.

Leave a Reply

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