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

Автор: Алина Тарасова | Опубликовано: 28.12.2025

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

Почему стоит создавать собственные виджеты для Elementor

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

Создание своего виджета позволяет:

Добавить функционал, которого нет в стандартных виджетах и плагинах.
Оптимизировать сайт, используя только нужный код без лишних плагинов.
Полностью контролировать внешний вид и поведение элемента.

В этой статье мы рассмотрим, как добавить нестандартный элемент в Elementor с помощью кода, чтобы вы могли создавать свои уникальные блоки.

Основные шаги создания собственного виджета Elementor

Для добавления нового виджета в Elementor нужно выполнить несколько шагов:

Создать базовый классовый файл для виджета, наследуемый от \Elementor\Widget_Base.
Определить основные методы: get_name(), get_title(), get_icon(), get_categories().
Добавить в метод _register_controls() поля настроек виджета.
Реализовать метод render(), в котором выводится HTML код виджета.
Зарегистрировать виджет в Elementor с помощью хука elementor/widgets/widgets_registered.

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

Пример простого виджета «Приветствие»

class Wpelementor_Widget_Greeting extends \Elementor\Widget_Base {
    public function get_name() {
        return 'wpelementor_greeting';
    }

    public function get_title() {
        return 'Приветствие WPelementor';
    }

    public function get_icon() {
        return 'eicon-editor-code';
    }

    public function get_categories() {
        return ['basic'];
    }

    protected function _register_controls() {
        $this->start_controls_section(
            'content_section',
            [
                'label' => 'Настройки',
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'name',
            [
                'label' => 'Имя',
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => 'Гость',
                'placeholder' => 'Введите имя',
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        echo '<div class="wpelementor-greeting">';
        echo 'Привет, ' . esc_html($settings['name']) . '! Добро пожаловать на сайт.';
        echo '</div>';
    }
}

add_action('elementor/widgets/widgets_registered', function() {
    \Elementor\Plugin::instance()->widgets_manager->register_widget_type(new Wpelementor_Widget_Greeting());
});

Этот код можно добавить в файл плагина или в functions.php вашей темы (лучше в дочернюю), чтобы виджет появился в категории «basic» в редакторе Elementor.

Расширение виджета: добавляем стили и скрипты

Чтобы добавить стили и скрипты для вашего виджета, используйте методы get_style_depends() и get_script_depends() в классе виджета. Например:

public function get_style_depends() {
    return ['wpelementor-greeting-style'];
}

public function get_script_depends() {
    return ['wpelementor-greeting-script'];
}

И подключите эти файлы через стандартные WordPress хуки. Пример подключения стилей и скриптов:

function wpelementor_enqueue_assets() {
    wp_register_style('wpelementor-greeting-style', plugin_dir_url(__FILE__) . 'css/greeting.css');
    wp_register_script('wpelementor-greeting-script', plugin_dir_url(__FILE__) . 'js/greeting.js', ['jquery'], false, true);
}
add_action('wp_enqueue_scripts', 'wpelementor_enqueue_assets');

Таким образом вы сможете добавить анимации, уникальную верстку и интерактивность.

Использование плагинов для упрощения создания виджетов в Elementor

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

Ещё один полезный инструмент — Expert Review, который позволяет создавать интерактивные блоки отзывов и рейтингов, которые можно интегрировать как кастомные виджеты.

Практические советы по разработке нестандартных виджетов для Elementor

1. Используйте неймспейсы и префиксы

Чтобы избежать конфликтов с другими плагинами и темами, всегда используйте уникальные неймспейсы и префиксы для классов и функций. В нашем примере префикс Wpelementor_.

2. Тестируйте виджеты на разных устройствах

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

3. Оптимизируйте загрузку ресурсов

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

Разбор типичной задачи: создание виджета с динамическим выводом продуктов

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

class Wpelementor_Widget_Products_List extends \Elementor\Widget_Base {
    public function get_name() {
        return 'wpelementor_products_list';
    }

    public function get_title() {
        return 'Список товаров WPelementor';
    }

    public function get_icon() {
        return 'eicon-products';
    }

    public function get_categories() {
        return ['woocommerce-elements'];
    }

    protected function _register_controls() {
        $this->start_controls_section(
            'section_content',
            [
                'label' => 'Настройки списка',
            ]
        );

        $this->add_control(
            'category',
            [
                'label' => 'Категория товаров',
                'type' => \Elementor\Controls_Manager::SELECT2,
                'options' => $this->wpelementor_get_woo_categories(),
                'multiple' => false,
                'label_block' => true,
            ]
        );

        $this->add_control(
            'posts_per_page',
            [
                'label' => 'Количество товаров',
                'type' => \Elementor\Controls_Manager::NUMBER,
                'default' => 4,
            ]
        );

        $this->end_controls_section();
    }

    private function wpelementor_get_woo_categories() {
        $terms = get_terms(['taxonomy' => 'product_cat', 'hide_empty' => true]);
        $cats = [];
        if (!empty($terms) && !is_wp_error($terms)) {
            foreach ($terms as $term) {
                $cats[$term->slug] = $term->name;
            }
        }
        return $cats;
    }

    protected function render() {
        $settings = $this->get_settings_for_display();

        $args = [
            'post_type' => 'product',
            'posts_per_page' => $settings['posts_per_page'],
        ];

        if (!empty($settings['category'])) {
            $args['tax_query'] = [[
                'taxonomy' => 'product_cat',
                'field' => 'slug',
                'terms' => $settings['category'],
            ]];
        }

        $query = new WP_Query($args);

        if ($query->have_posts()) {
            echo '<div class="wpelementor-products-list">';
            while ($query->have_posts()) {
                $query->the_post();
                global $product;

                echo '<div class="product-item">';
                echo '<a href="' . esc_url(get_permalink()) . '">';
                echo woocommerce_get_product_thumbnail();
                echo '<h3>' . get_the_title() . '</h3>';
                echo '</a>';
                echo '<span class="price">' . $product->get_price_html() . '</span>';
                echo '</div>';
            }
            echo '</div>';
            wp_reset_postdata();
        } else {
            echo '<p>Товары не найдены.</p>';
        }
    }
}

add_action('elementor/widgets/widgets_registered', function() {
    \Elementor\Plugin::instance()->widgets_manager->register_widget_type(new Wpelementor_Widget_Products_List());
});

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

Заключение

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

Если вы хотите ускорить процесс и получить дополнительные возможности, рекомендуем посмотреть на плагины и темы на WPSHOP, которые могут помочь с расширением Elementor и оптимизацией WordPress.