Как добавить динамические классы в Elementor с помощью кода

В работе с Elementor иногда возникает потребность добавлять динамические CSS-классы к отдельным элементам страницы в зависимости от условий. Это полезно для реализации кастомных стилей, активации анимаций или изменения поведения элементов без необходимости создавать множество отдельных шаблонов.

Почему нужны динамические классы в Elementor

Стандартно Elementor позволяет добавлять классы вручную через интерфейс, но они статичны и не меняются в зависимости от контекста. Представьте задачу, когда нужно выделить кнопки определённого типа, показать или скрыть блоки в зависимости от роли пользователя или даты, или же применить разные стили в зависимости от текущего шаблона.

Динамические классы позволяют управлять стилями и поведением элементов через PHP и JavaScript, делая сайт более гибким и адаптивным.

Пример: на странице новостей вы хотите, чтобы карточки статей с рейтингом выше 4 получали класс high-rating и подсвечивались зелёным фоном, а остальные — обычным.

Как реализовать динамические классы через хуки Elementor

Elementor предоставляет несколько хуков, которые позволяют вмешаться в рендеринг виджетов и секций. Один из полезных — elementor/frontend/widget/before_render, который вызывается перед отрисовкой виджета на фронтенде.

Пример функции для добавления динамического класса на основе кастомного поля:

function wpelementor_add_dynamic_class_to_element(\Elementor\Widget_Base $widget) {
    // Получаем ID поста, если он доступен
    $post_id = get_the_ID();
    if ( ! $post_id ) {
        return;
    }
    
    // Получим значение кастомного поля 'rating'
    $rating = get_post_meta($post_id, 'rating', true);
    
    // Если рейтинг выше 4, добавляем класс
    if ( $rating > 4 ) {
        $widget->add_render_attribute('_wrapper', 'class', 'high-rating');
    }
}
add_action('elementor/frontend/widget/before_render', 'wpelementor_add_dynamic_class_to_element');

В этом примере мы проверяем мета-данные текущего поста и, если рейтинг высокий, добавляем CSS-класс high-rating к обёртке виджета. Это позволит затем в CSS прописать нужные стили:

.high-rating {
    background-color: #d4edda;
    border: 1px solid #28a745;
}

Что важно учесть

• Функция add_render_attribute применяется к обёртке виджета, класс добавится ко всему блоку.
• Можно добавить условие по типу виджета, например, только для widget->get_name() === 'image'.
• Для секций и колонок используются другие хуки, например, elementor/frontend/section/before_render.

Добавление динамических классов через фильтр render_attributes

Ещё один способ — использовать фильтры атрибутов для виджетов, секций и колонок. Например, фильтр elementor/frontend/widget/render_content позволяет изменять HTML перед выводом.

Пример, как на лету добавить класс к кнопке в виджете:

function wpelementor_filter_button_classes( $content, \Elementor\Widget_Base $widget ) {
    if ( $widget->get_name() !== 'button' ) {
        return $content;
    }

    // Добавим класс к кнопке
    $content = str_replace('class="elementor-button"', 'class="elementor-button custom-dynamic-class"', $content);
    return $content;
}
add_filter('elementor/frontend/widget/render_content', 'wpelementor_filter_button_classes', 10, 2);

Этот подход проще для мелких правок, но менее гибкий, чем изменение атрибутов через метод add_render_attribute.

Использование плагинов для динамических классов в Elementor

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

• Clearfy Pro — имеет инструменты для оптимизации и управления CSS, включая условное добавление стилей.
• WPRemark — позволяет создавать динамические блоки с кастомными условиями, через которые можно реализовать динамическое добавление классов.

Однако, для тонкой настройки и кастомных условий проще работать напрямую с хуками и кодом.

Практические советы по написанию динамических классов

1. Всегда проверяйте, что нужные данные доступны (ID поста, мета-поля, пользовательские данные), чтобы не вызвать ошибки.

2. Для сложных условий лучше выносить логику в отдельные функции с понятными именами, например, wpelementor_get_dynamic_class_for_widget().

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

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

Заключение

Добавление динамических CSS-классов в Elementor — мощный способ сделать сайт на WordPress максимально адаптивным и удобным для поддержки и развития. Используя хуки Elementor и немного PHP-кода, вы можете легко управлять стилями и поведением элементов на основе любых условий.

Если хотите расширить функционал без кода, обратите внимание на плагины Clearfy Pro и WPRemark, которые значительно расширяют возможности Elementor.