Elementor — один из самых популярных визуальных конструкторов страниц для WordPress. Он предоставляет массу встроенных виджетов, но иногда возникает задача добавить уникальный функционал, которого нет в стандартном наборе. В этой статье мы подробно разберём, как создать собственный кастомный виджет для Elementor с нуля, используя простой и понятный код.
Почему стоит создавать собственные виджеты для Elementor
Нередко готовые виджеты не удовлетворяют все потребности проекта. Создание собственного виджета позволяет:
- Добавить уникальный дизайн и функционал, полностью соответствующий требованиям;
- Оптимизировать код под конкретные задачи без лишних зависимостей;
- Сделать сайт более гибким и расширяемым;
- Сохранить контроль над отображением и поведением элементов.
Кроме того, вы сможете повторно использовать созданный виджет на разных проектах.
Основные шаги создания кастомного виджета Elementor
Процесс создания собственного виджета можно разбить на несколько этапов:
- Подключение собственного плагина или добавление кода в functions.php (рекомендуется плагин для удобства поддержки);
- Регистрация виджета в Elementor;
- Определение структуры и настроек виджета;
- Реализация отображения виджета;
- Тестирование и отладка.
Создание базового плагина для кастомного виджета
Для начала создадим папку wpelementor-custom-widget в директории wp-content/plugins и файл wpelementor-custom-widget.php с минимальным кодом подключения:
<?php
/**
* Plugin Name: WPelementor Custom Widget
* Description: Кастомный виджет для Elementor
* Version: 1.0
* Author: WPelementor.ru
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Защита от прямого доступа
}
// Подключаем регистрацию виджета
require_once plugin_dir_path(__FILE__) . 'widget.php';
Этот файл подключит основной код виджета из отдельного файла widget.php.
Регистрация и создание виджета
В файле widget.php создадим класс, который расширяет \Elementor\Widget_Base. Это основной способ интеграции с Elementor.
<?php
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
if ( ! defined( 'ABSPATH' ) ) {
exit; // Защита от прямого доступа
}
class WPelementor_Custom_Widget extends Widget_Base {
public function get_name() {
return 'wpelementor_custom_widget';
}
public function get_title() {
return 'Кастомный виджет WPelementor';
}
public function get_icon() {
return 'eicon-code';
}
public function get_categories() {
return [ 'general' ];
}
public function _register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => 'Настройки содержимого',
'tab' => Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'title',
[
'label' => 'Заголовок',
'type' => Controls_Manager::TEXT,
'default' => 'Привет, WPelementor!'
]
);
$this->add_control(
'show_button',
[
'label' => 'Показать кнопку',
'type' => Controls_Manager::SWITCHER,
'default' => 'yes',
]
);
$this->add_control(
'button_text',
[
'label' => 'Текст кнопки',
'type' => Controls_Manager::TEXT,
'default' => 'Нажми меня',
'condition' => [
'show_button' => 'yes'
]
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
echo '<div class="wpelementor-custom-widget">';
echo '<h2>' . esc_html($settings['title']) . '</h2>';
if ( 'yes' === $settings['show_button'] ) {
echo '<button class="wpelementor-btn">' . esc_html($settings['button_text']) . '</button>';
}
echo '</div>';
}
}
add_action( 'elementor/widgets/register', function($widgets_manager) {
$widgets_manager->register( new WPelementor_Custom_Widget() );
});
Как подключить и использовать кастомный виджет
После создания плагина активируйте его в админке WordPress. Затем откройте страницу через Elementor. В панели виджетов появится новый виджет «Кастомный виджет WPelementor», который можно перетащить на страницу и настроить параметры.
Это базовый пример, который можно расширять, добавляя новые поля, стили, скрипты и логику.
Расширение кастомного виджета: добавление стилей и скриптов
Чтобы добавить собственные CSS и JS, используйте метод get_script_depends() и функцию wp_enqueue_style. Вот пример подключения CSS:
public function get_style_depends() {
return [ 'wpelementor_custom_styles' ];
}
add_action( 'wp_enqueue_scripts', function() {
wp_register_style( 'wpelementor_custom_styles', plugins_url( '/assets/css/custom-widget.css', __FILE__ ) );
});
Создайте файл custom-widget.css в папке assets/css и опишите там стили для вашего виджета.
Примеры полезных кастомных виджетов для Elementor
Виджет отзывов с рейтингом
Можно создать виджет, который позволит пользователю вводить текст отзыва и выставлять оценку от 1 до 5, а затем отображать их на странице с кастомным оформлением.
Виджет отображения прайс-листа
Добавьте возможность гибко настраивать список товаров или услуг с ценами и описаниями, используя повторяющиеся поля.
Виджет кнопки с динамическими действиями
Кнопка, которая меняет поведение в зависимости от условий, например, открывает модальное окно, запускает анимацию или отправляет данные на сервер.
Советы по отладке и оптимизации кастомных виджетов
При разработке всегда проверяйте ошибки PHP через логи и консоль браузера. Используйте esc_html() и другие функции для безопасности вывода. Следите за производительностью, не добавляйте лишние запросы и скрипты.
Для быстрого тестирования можно использовать плагин Query Monitor и инструменты разработчика в браузере.
Заключение
Создание собственного виджета для Elementor — отличный способ добавить уникальный функционал на сайт WordPress. Следуя этому руководству, вы быстро освоите базовые принципы и сможете разрабатывать сложные и интересные решения под задачи клиентов или собственных проектов.