В этом материале разберём, как создавать и управлять динамическими CSS стилями в Elementor с помощью пользовательского кода. Это полезно, когда нужно менять стили элементов в зависимости от условий, динамически подстраивать внешний вид сайта под контент или пользовательские данные без использования громоздких плагинов.
Почему динамические CSS стили важны для Elementor
Elementor отлично справляется с визуальным построением страниц, но базовые возможности по динамическому изменению стилей ограничены. Часто возникает задача, когда один и тот же элемент должен выглядеть по-разному в зависимости от ситуации — например, цвет кнопки меняется в зависимости от выбранной категории, фон блока адаптируется под дату публикации, или шрифты подстраиваются под пользовательские настройки.
Обычные настройки Elementor не всегда позволяют реализовать такие условия, а подключать тяжелые плагины не всегда оправдано. Здесь на помощь приходит добавление динамического CSS через PHP и JavaScript.
Основные сценарии применения динамического CSS в Elementor
- Изменение цвета фона или текста в зависимости от кастомного поля (ACF, Meta Box и др.)
- Подстройка отступов и размеров блоков под разные типы контента
- Добавление теней, анимаций, градиентов с динамическими параметрами
- Управление видимостью элементов через CSS с условиями
Как добавить динамические CSS стили через PHP в functions.php
Самый простой способ — добавить функцию, которая выведет нужные стили в <head> с учётом текущего контекста. Например, изменим цвет заголовка в зависимости от категории записи.
function wpelementor_dynamic_css() {
if (is_single()) {
$categories = get_the_category();
$color = '#000';
if (!empty($categories)) {
$cat_name = $categories[0]->slug;
switch ($cat_name) {
case 'news':
$color = '#ff0000';
break;
case 'reviews':
$color = '#0000ff';
break;
}
}
echo "<style>
.elementor-heading-title {
color: {$color} !important;
}
</style>";
}
}
add_action('wp_head', 'wpelementor_dynamic_css');В этом примере мы проверяем категорию текущей записи и меняем цвет заголовка Elementor в зависимости от неё. Такой способ хорош для простых условий.
Динамические стили с использованием пользовательских атрибутов и JavaScript
Если нужно более гибко управлять стилями, например, менять их без перезагрузки страницы или по действию пользователя, поможет добавление атрибутов к элементам и JavaScript.
Добавим пользовательский атрибут через фильтр Elementor, чтобы пометить нужный блок уникальным ID или классом, а потом с помощью JS изменим стили.
function wpelementor_add_custom_attr($attributes, $widget) {
if ($widget->get_name() === 'heading') {
$attributes['class'] .= ' wpelementor-dynamic-style';
}
return $attributes;
}
add_filter('elementor/widget/render_content', 'wpelementor_add_custom_attr', 10, 2);Теперь подключим JS, который изменит стили:
function wpelementor_enqueue_dynamic_styles_script() {
wp_enqueue_script(
'wpelementor-dynamic-styles',
get_template_directory_uri() . '/js/wpelementor-dynamic-styles.js',
array('jquery'),
false,
true
);
}
add_action('wp_enqueue_scripts', 'wpelementor_enqueue_dynamic_styles_script');В файле wpelementor-dynamic-styles.js:
jQuery(document).ready(function($) {
$('.wpelementor-dynamic-style').each(function() {
var currentHour = new Date().getHours();
if (currentHour > 18 || currentHour < 6) {
$(this).css({ 'color': '#ffffff', 'background-color': '#333333' });
} else {
$(this).css({ 'color': '#000000', 'background-color': '#f0f0f0' });
}
});
});Сценарий меняет цвет текста и фон заголовка в зависимости от времени суток — тёмная тема вечером и светлая днём.
Использование плагинов для динамического CSS в Elementor
Если код кажется сложным, можно использовать плагины, которые упрощают динамическое добавление стилей. Например:
- Clearfy Pro — имеет функции оптимизации и настройки CSS, включая динамические стили;
- WPRemark — позволяет создавать динамические блоки с изменяемыми стилями;
Однако для конкретных задач нередко удобнее написать минимальный код, который полностью контролирует поведение.
Советы по организации динамических CSS в проектах на Elementor
Чтобы код был поддерживаемым и не конфликтовал с обновлениями Elementor, рекомендуем:
- Использовать префиксы для функций и классов, например,
wpelementor_; - Писать CSS с использованием специфичных селекторов, чтобы не затронуть другие элементы;
- Подключать стили и скрипты через стандартные хуки WordPress, избегая прямого вставления в шаблоны;
- Проверять условия на сервере и клиенте для оптимизации загрузки и производительности;
- Документировать код и логику для удобства поддержки.
Таким образом, динамические CSS стили в Elementor можно реализовать гибко и эффективно, сочетая PHP и JS, что позволит создавать уникальный, адаптивный дизайн без лишних нагрузок.