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

Функция wp_style_add_data() используется для добавления метаданных к CSS-стилям, которые были ранее зарегистрированы в WordPress с помощью функции wp_enqueue_style(). Эта функция предоставляет гибкий способ управления дополнительной информацией о стилях, например, указанием специальных условий для старых версий Internet Explorer, поддержки RTL (справа налево), или добавления атрибутов к тегам <link>.

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

• $handle (строка) — имя зарегистрированного стиля, к которому нужно добавить метаданные.
• $key (строка) — ключ данных, которые добавляются к стилю. Возможные значения:
  • 'conditional' — строка для создания условных комментариев (например, для IE).
  • 'rtl' — логическое значение или строка для указания на наличие RTL-версии стиля.
  • 'suffix' — строка для указания суффикса, используемого в сочетании с RTL.
  • 'alt' — логическое значение для установки rel="alternate stylesheet".
  • 'title' — строка для установки значения атрибута title для стилей.
  • 'path' — абсолютный путь к файлу стиля, который будет загружаться инлайн.
• $value (смешанный) — данные, которые будут добавлены. Например, строка для условия подключения или булевое значение для активации RTL.

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

Пример 1: Условные комментарии для Internet Explorer

Этот пример демонстрирует использование wp_style_add_data() для подключения стилей, применяемых только в старых версиях Internet Explorer.

function wpdocs_enqueue_scripts() {
    // Подключаем стили для Internet Explorer 9 и ниже.
    wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( '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', array( 'twentyfifteen-style' ), '20141010' );
    wp_style_add_data( 'twentyfifteen-ie7', 'conditional', 'lt IE 8' );
}

add_action( 'wp_enqueue_scripts', 'wpdocs_enqueue_scripts' );

Этот код сгенерирует HTML с условными комментариями для загрузки стилей в IE:

<!--[if lt IE 9]>
<link rel='stylesheet' id='twentyfifteen-ie-css' href='/css/ie.css' type='text/css' media='all' />
<![endif]-->
<!--[if lt IE 8]>
<link rel='stylesheet' id='twentyfifteen-ie7-css' href='/css/ie7.css' type='text/css' media='all' />
<![endif]-->

Пример 2: Добавление RTL (Right-to-Left) стилей

Когда сайт отображается на языке, использующем направление текста справа налево (например, арабский), можно указать соответствующую версию стиля:

Добавление RTL-стиля:

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style( 'wpdocs-style', get_stylesheet_uri() );
    wp_style_add_data( 'wpdocs-style', 'rtl', true );
});

Замена стиля на RTL-версию:

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style( 'wpdocs-style', get_stylesheet_uri() );
    wp_style_add_data( 'wpdocs-style', 'rtl', 'replace' );
});

Не забудьте создать файл style-rtl.css, чтобы WordPress мог автоматически загрузить его при отображении сайта на RTL-языке.

Пример 3: Использование атрибута alternate и title

Для загрузки альтернативного стиля с атрибутом rel="alternate stylesheet":

wp_enqueue_style( 'mystyle', 'http://example.com/css/mystyle.css' );
wp_style_add_data( 'mystyle', 'alt', true );

Сгенерируется HTML:

<link rel='alternate stylesheet' id='mystyle-css' href='http://example.com/css/mystyle.css' type='text/css' media='all' />

Для добавления заголовка стиля:

wp_style_add_data( 'mystyle', 'title', 'My Style' );

HTML-вывод:

<link rel='stylesheet' id='mystyle-css' title='My Style' href='http://example.com/css/mystyle.css' type='text/css' media='all' />

Заключение

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