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

Функция wp_add_inline_style() в WordPress используется для добавления CSS к уже зарегистрированным стилям на странице. Она позволяет вставлять дополнительные CSS правила непосредственно в HTML-документ, расширяя или изменяя существующие стили без необходимости создания отдельного файла CSS.

wp_add_inline_style( string $handle, string $data ): bool

• $handle (string) — Идентификатор стиля, к которому добавляется CSS.
• $data (string) — Строка с CSS правилами.

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

Описание

wp_add_inline_style() добавляет CSS код к зарегистрированному стилевому файлу, который уже находится в очереди на вывод. Функция принимает два обязательных параметра: идентификатор стиля и строку с CSS кодом. Если несколько блоков CSS добавляются к одному и тому же файлу стилей, они выводятся в порядке добавления. Более поздние блоки могут переопределить предыдущие стили.

Пример 1: Добавление инлайн стилей без зависимости от файла стилей

Иногда нужно добавить инлайн стили без привязки к определенному стилевому файлу. Для этого можно зарегистрировать «пустой» стиль и добавить к нему необходимые CSS правила:

add_action( 'wp_enqueue_scripts', function() {
    $inline_styles = '
    .custom-column {
        width: 15em;
        white-space: nowrap;
    }
    ';

    $style_handle = 'custom-inline-style';
    
    // Регистрируем пустой стиль
    wp_register_style( $style_handle, false );
    
    // Добавляем инлайн стили
    wp_add_inline_style( $style_handle, $inline_styles );
    
    // Подключаем стиль
    wp_enqueue_style( $style_handle );
});

Результат:

<style>
.custom-column {
    width: 15em;
    white-space: nowrap;
}
</style>

Пример 2: Добавление стилей на основе настроек темы

Допустим, вы хотите динамически изменять цвет фона элементов на основе пользовательских настроек темы. В этом примере мы получаем цвет, выбранный пользователем через Customizer, и применяем его к элементам с классом .my-background.

add_action( 'wp_enqueue_scripts', function() {
    // Подключаем основной файл стилей
    wp_enqueue_style( 'theme-style', get_template_directory_uri() . '/css/theme.css' );
    
    // Получаем цвет из настроек темы
    $custom_color = get_theme_mod( 'custom_background_color', '#ffffff' );
    
    // Генерируем CSS
    $custom_css = "
    .my-background {
        background-color: {$custom_color};
    }";
    
    // Добавляем инлайн CSS к стилю
    wp_add_inline_style( 'theme-style', $custom_css );
});

Этот код добавляет стили, основанные на пользовательских настройках темы, к уже подключенному файлу стилей.

Пример 3: Добавление инлайн стилей из внешнего файла

Если у вас есть набор CSS правил в отдельном файле, и вам нужно добавить их инлайн, можно использовать wp_add_inline_style() для этого. Например, загрузим содержимое файла styles.css и добавим его инлайн.

add_action( 'wp_enqueue_scripts', function() {
    // Регистрируем пустой стиль
    $style_handle = 'inline-styles';
    wp_register_style( $style_handle, false );
    
    // Читаем стили из файла и добавляем инлайн
    $inline_css = file_get_contents( get_stylesheet_directory() . '/css/styles.css' );
    wp_add_inline_style( $style_handle, $inline_css );
    
    // Подключаем стиль
    wp_enqueue_style( $style_handle );
});

Этот пример добавляет содержимое файла styles.css напрямую в HTML-документ.

Пример 4: Добавление нескольких инлайн стилей

В случае необходимости добавления нескольких блоков CSS к одному стилю, wp_add_inline_style() корректно объединит их в единый блок:

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style( 'theme-style', get_template_directory_uri() . '/css/theme.css' );
    
    // Первый блок инлайн стилей
    wp_add_inline_style( 'theme-style', '.element { color: #333; }' );
    
    // Второй блок инлайн стилей
    wp_add_inline_style( 'theme-style', '.element { font-size: 16px; }' );
});

Оба блока CSS будут объединены и выведены вместе с основными стилями.

Результат:

<style>
.element { color: #333; }
.element { font-size: 16px; }
</style>

Примечания

• Порядок добавления: Если вы добавляете несколько блоков CSS к одному и тому же стилю, они выводятся в порядке их добавления. Поздние блоки могут переопределить предыдущие стили.
• Совместимость с новыми блок-темами: В новых блок-темах может потребоваться более точное управление очередностью загрузки стилей, особенно если стили динамически генерируются.

Заключение

Функция wp_add_inline_style() — мощный инструмент для добавления динамических CSS стилей в WordPress. Он позволяет расширять существующие файлы стилей или добавлять новые стили без необходимости создания отдельных CSS файлов. Это удобный способ сделать стили адаптивными к пользовательским настройкам и динамически изменяющимся данным.