wp_add_inline_style()
Додає додатковий блок стилів 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 Додамо додаткові 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);
}
#2 Підключення інлайн стилів без робочого файлу стилів
Якщо потрібно підключити інлайн стилі і при цьому вони не залежать від жодних інших стилів або заздалегідь невідомо до якого файлу стилів їх поділити, то можна підключити їх самих по собі.
Для цього можна використовувати такий хак – зареєструвати файл стилів пустушку та до нього підключити інлайн стилі:
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);
}
нотатки
- Дивіться: WP_Styles::add_inline_style()
список змін
| З версії 3.3.0 | Введено. |
Код wp_add_inline_style() wp add inline style WP 6.0.2
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><style></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 );
}