WP_ADD_INLINE_STYLE() │ WP 3.3.0

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

Как это работает

Стили будут добавлены только если стиль уже находится в очереди. Функция принимает строку $data, содержащую CSS-код. Если вы добавите два или более блока CSS к одному и тому же стилю $handle, они будут выведены в порядке добавления. То есть позднее добавленные стили могут переопределять предыдущие.

Возврат значений

Функция возвращает:

• true — если всё прошло успешно,
• false — если произошла ошибка.

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

Синтаксис функции:

wp_add_inline_style( $handle, $data );

Параметры

• $handle (строка) — имя стиля, к которому вы хотите добавить дополнительные стили (обязательный параметр).
• $data (строка) — строка, содержащая CSS-стили для добавления (обязательный параметр).

Примеры

Пример 1: Просто добавляем встроенные стили

add_action( 'wp_enqueue_scripts', 'add_my_inline_styles' );

function add_my_inline_styles() {
    $handle = 'my-styles';

    wp_register_style( $handle, false );
    wp_add_inline_style( $handle, file_get_contents( __DIR__ . '/css/styles.css' ) );
    wp_enqueue_style( $handle );
}

Пример 2: Добавление дополнительных CSS стилей

Предположим, что вы хотите изменить цвет фона для элемента с классом .mycolor. В данном примере мы получаем цвет из настроек темы:

add_action( 'wp_enqueue_scripts', 'my_styles_method' );

function my_styles_method() {
    wp_enqueue_style('custom-style', get_template_directory_uri() . '/css/custom_script.css');

    $color = get_theme_mod( 'my-custom-color' ); // Например, #FF0000

    $custom_css = "
    .mycolor {
        background: {$color};
    }";

    wp_add_inline_style( 'custom-style', $custom_css );
}

Пример 3: Подключение встроенных стилей без основного файла стилей

Если вы хотите подключить встроенные стили, которые не зависят от других стилей, вы можете сделать это, зарегистрировав фиктивный стиль:

add_action( 'wp_enqueue_scripts', 'wp_enqueue_my_inline_styles' );

function wp_enqueue_my_inline_styles() {
    $styles = '
    .wp-list-table .column-active_blogs {
        width: 10em;
        white-space: nowrap;
    }';

    $key = 'my-styles';

    wp_register_style( $key, false, array(), true, true );
    wp_add_inline_style( $key, $styles );
    wp_enqueue_style( $key );
}

Заметки

• Рекомендуется не использовать теги <style> в строке стилей, передаваемой в функцию. Если они присутствуют, функция выдаст предупреждение и удалит их.

Изменения в версии

Функция была добавлена в версии 3.3.0.