Как использовать Elementor для создания условных блоков в WordPress

Если вы хотите создавать на сайте на WordPress с помощью Elementor разные блоки, которые отображаются только при выполнении определённых условий — например, для разных ролей пользователей, категорий или страниц — то стандартных возможностей Elementor может не хватать. В этом материале мы подробно разберём, как реализовать условные блоки в Elementor, используя плагины и собственный код.

Что такое условные блоки в Elementor и зачем они нужны

Условные блоки — это элементы страницы, которые отображаются только при выполнении заданных условий. Например, блок с приветствием для авторизованных пользователей или специальное предложение для посетителей из определённой категории товаров. Такая гибкость позволяет лучше таргетировать контент и улучшать пользовательский опыт.

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

Использование плагинов для условных блоков в Elementor

Плагин Dynamic Conditions

Dynamic Conditions — популярное решение, которое добавляет интерфейс для настройки условий отображения блоков прямо в Elementor. Плагин позволяет показывать или скрывать секции, колонки и виджеты по множеству параметров: роль пользователя, устройство, дата, пользовательское поле и другим.

Преимущества плагина:

• Интуитивно понятный интерфейс для настройки условий
• Поддержка множества условий и их комбинаций
• Совместимость с Elementor Pro и бесплатной версией

Пример использования: вы можете настроить блок с акцией, который будет виден только для неавторизованных пользователей.

Альтернативы: Conditional Widgets, Display Conditions for Elementor

Существуют и другие плагины, которые расширяют функционал условных отображений, например, Conditional Widgets или Display Conditions for Elementor. Они менее функциональны, но могут подойти для простых задач.

Создание собственных условных блоков с помощью кода

Если вы хотите максимальный контроль и не хотите зависеть от сторонних плагинов, можно написать собственное решение. Мы рассмотрим, как сделать свой виджет с условным отображением.

Регистрация кастомного виджета с условием отображения

Для начала создадим виджет, который будет отображаться только для пользователей с ролью subscriber. Добавьте следующий код в файл functions.php вашей темы или в отдельный плагин:

function wpelementor_register_conditional_widget(\Elementor\Widgets_Manager $widgets_manager) {
    require_once(__DIR__ . '/widgets/class-wpelementor-conditional-widget.php');
    $widgets_manager->register(new \WPELEMENTOR\Widgets\WPELEMENTOR_Conditional_Widget());
}
add_action('elementor/widgets/register', 'wpelementor_register_conditional_widget');

// В файле class-wpelementor-conditional-widget.php
namespace WPELEMENTOR\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;

class WPELEMENTOR_Conditional_Widget extends Widget_Base {
    public function get_name() {
        return 'wpelementor_conditional_widget';
    }
    public function get_title() {
        return 'Условный виджет WPELEMENTOR';
    }
    public function get_icon() {
        return 'eicon-code';
    }
    public function get_categories() {
        return ['basic'];
    }
    protected function render() {
        if (!is_user_logged_in()) {
            echo '<p>Только для авторизованных пользователей</p>';
            return;
        }
        $user = wp_get_current_user();
        if (!in_array('subscriber', (array) $user->roles)) {
            return; // скрыть виджет для всех, кроме подписчиков
        }
        echo '<p>Привет, подписчик! Это контент для вас.</p>';
    }
}

Этот код создаёт виджет, который выводит сообщение только для авторизованных пользователей с ролью подписчика. Для остальных он не отображается вовсе.

Добавление более сложных условий с хуками

Можно также использовать фильтры Elementor, чтобы скрывать любые виджеты по условию. Например, с помощью фильтра elementor/frontend/widget/before_render:

add_action('elementor/frontend/widget/before_render', function($widget) {
    if ($widget->get_name() === 'wpelementor_conditional_widget') {
        if (!is_user_logged_in()) {
            // Отменяем рендеринг виджета
            $widget->set_render_attribute('_skip_render', true);
        }
    }
});

Этот подход позволяет централизованно управлять отображением и создавать сложные условия, используя любую логику WordPress.

Советы по оптимизации и безопасности условных блоков

При использовании условных блоков важно учитывать несколько моментов:

• Кэширование: условные блоки могут конфликтовать с кэш-плагинами, так как кэшируется одна и та же страница для разных пользователей. Используйте динамический рендеринг или исключайте страницы из кэша.
• Безопасность: не выводите приватные данные без проверки прав доступа. Всегда проверяйте роль и статус пользователя.
• Производительность: сложные условия могут замедлить загрузку страницы, оптимизируйте запросы и минимизируйте тяжелые операции.

Заключение: расширяем возможности Elementor без потери удобства

Создание условных блоков в Elementor — мощный инструмент для персонализации сайта на WordPress. Используйте готовые плагины для быстрого старта и собственный код для тонкой настройки. Такой подход повысит вовлечённость пользователей и сделает сайт более гибким и современным.