wp_add_inline_style() │ WP 3.3.0

Добавляет дополнительный блок CSS стилей. CSS добавляются прямо в html документ, после основных (указанных) стилей.

Работает, когда стили к которым прикрепляется дополнительный блок уже были добавлены в очередь. В параметре $data нужно сами стили CSS, пр.: '.container{ width:50%; }'.

Если более одного блока CSS стилей добавлено к одинаковому файлу стилей (параметр $handle), то блоки будут выведены в порядке их добавления, т.е. более поздний блок будет "перебивать", при совпадении, стили предыдущего блока.

Для добавления внешних файлов CSS стилей, используйте wp_enqueue_style().

Работает на основе: wp_styles()

Хуков нет.

Возвращает

true|false. Логические true, если удалось добавить стили и false, если нет.

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

wp_add_inline_style( $handle, $data );

$handle(строка) (обязательный): Название стилей (идентификатор) к которому добавить дополнительный блок стилей. Строка в нижнем регистре.
$data(строка) (обязательный): Строка содержащая CSS правила, которые нужно добавить на страницу.

Примеры

#1 Подключение инлайн стилей, без рабочего файла стилей

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

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

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 );
}

#2 Добавим дополнительные CSS стили

Добавим экстра стили, к уже добавленным на страницу стилям. Например, представим, что плагин или тема использует класс .mycolor для изменения фона элемента. Этим кодом мы можем переписать цвет фона, который получим из настроек темы get_theme_mod('my-custom-color'):

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', '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 );
}

Заметки

Смотрите: WP_Styles::add_inline_style()

Список изменений

С версии 3.3.0

Введена.

Код `wp_add_inline_style() wp add inline style` ^{WP 6.5.2}

wp-includes/functions.wp-styles.php

function wp_add_inline_style( $handle, $data ) {
	_wp_scripts_maybe_doing_it_wrong( __FUNCTION__, $handle );

	if ( false !== stripos( $data, '</style>' ) ) {
		_doing_it_wrong(
			__FUNCTION__,
			sprintf(
				/* translators: 1: <style>, 2: wp_add_inline_style() */
				__( 'Do not pass %1$s tags to %2$s.' ),
				'<code>&lt;style&gt;</code>',
				'<code>wp_add_inline_style()</code>'
			),
			'3.7.0'
		);
		$data = trim( preg_replace( '#<style[^>]*>(.*)</style>#is', '$1', $data ) );
	}

	return wp_styles()->add_inline_style( $handle, $data );
}