05 Ноя
Создание собственных виджетов для Elementor — это ключевой этап при разработке кастомных плагинов WordPress. Если ваш плагин работает с контентом (например, выводит посты, товары, свойства или другие сущности), логично предоставить пользователю возможность управлять этим контентом через визуальный интерфейс конструктора. В этом материале разберём, как создать персональный виджет Elementor, который выводит записи с помощью WP_Query.
Зачем нужен кастомный виджет в Elementor
Elementor — это визуальный конструктор страниц, который использует виджеты для добавления контента и функционала. Каждый элемент интерфейса — это отдельный виджет (текст, изображение, форма и т.д.).
Если ваш плагин добавляет собственный тип записей (например, property, project или event), то логично реализовать отдельный виджет, который будет выводить эти данные.
Без этого пользователю пришлось бы использовать шорткоды, что неудобно и не соответствует идеологии визуального редактирования.
Создав виджет, вы:
- упрощаете работу клиенту — всё добавляется мышкой, без кода;
- получаете возможность настраивать отображение (количество элементов, сортировку и т.д.);
- обеспечиваете гибкость интеграции вашего плагина с Elementor.
Структура файлов плагина
Для интеграции с Elementor создаётся отдельный класс-расширение (extension) и каталог для виджетов.
Пример структуры:
my-plugin/
│
├─ includes/
│ ├─ class-myplugin-elementor-extension.php
│ └─ elementor/
│ └─ class-property-widget.php
│
└─ my-plugin.php
Файл class-myplugin-elementor-extension.php отвечает за регистрацию виджетов, а в папке elementor хранятся сами реализации.
Создание класса-расширения для Elementor
Первым делом создаём класс, который регистрирует наши виджеты в Elementor:
if ( ! defined( 'ABSPATH' ) ) exit;
final class MyPlugin_Elementor_Extension {
public function __construct() {
add_action( 'elementor/widgets/register', [ $this, 'register_widgets' ] );
}
public function register_widgets( $widgets_manager ) {
require_once( __DIR__ . '/elementor/class-property-widget.php' );
$widgets_manager->register( new \MyPlugin_Property_Widget() );
}
}
new MyPlugin_Elementor_Extension();
Этот класс сообщает Elementor, что нужно подгрузить наш виджет и зарегистрировать его.
Реализация виджета
Теперь создаём файл class-property-widget.php — именно здесь мы опишем логику вывода.
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
if ( ! defined( 'ABSPATH' ) ) exit;
class MyPlugin_Property_Widget extends Widget_Base {
public function get_name() {
return 'myplugin_properties';
}
public function get_title() {
return __( 'Список свойств', 'myplugin' );
}
public function get_icon() {
return 'eicon-post-list';
}
public function get_categories() {
return [ 'general' ];
}
protected function register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => __( 'Настройки вывода', 'myplugin' ),
'tab' => Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'count',
[
'label' => __( 'Количество записей', 'myplugin' ),
'type' => Controls_Manager::NUMBER,
'default' => 3,
'min' => 1,
'max' => 20,
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
$query = new WP_Query([
'post_type' => 'property',
'posts_per_page' => intval( $settings['count'] ),
]);
if ( $query->have_posts() ) {
echo '<div class="property-list">';
while ( $query->have_posts() ) {
$query->the_post();
echo '<div class="property-item">';
the_title( '<h3>', '</h3>' );
the_excerpt();
echo '</div>';
}
echo '</div>';
wp_reset_postdata();
} else {
echo '<p>' . __( 'Нет доступных объектов.', 'myplugin' ) . '</p>';
}
}
}
Объяснение кода
get_name()— системное имя виджета, используется в коде.get_title()— заголовок, отображаемый в интерфейсе Elementor.get_icon()— иконка из набора Font Awesome.get_categories()— категория, в которой появится виджет (можно создать свою).register_controls()— здесь задаются поля для админки (например, количество выводимых записей).render()— отвечает за вывод на фронтенде. Внутри используется стандартныйWP_Query.
Добавляем WP_Query для динамического контента
Виджет работает на основе стандартного запроса WordPress. Мы можем расширить его, добавив параметры фильтрации, сортировки и выборки по метаполям или таксономиям.
Пример:
$query = new WP_Query([
'post_type' => 'property',
'posts_per_page' => intval( $settings['count'] ),
'meta_query' => [
[
'key' => 'price',
'value' => 100000,
'compare' => '>=',
'type' => 'NUMERIC',
],
],
]);
Стилизация и адаптация под тему
Elementor позволяет использовать глобальные классы оформления, но при необходимости можно подключить собственный CSS или JS:
public function get_style_depends() {
return [ 'myplugin-elementor-style' ];
}
Затем подключите файл через wp_enqueue_style в основном плагине.
Проверка результата
После активации плагина и открытия любого шаблона Elementor, в категории General появится новый виджет — «Список свойств».
Перетащите его в нужную секцию, укажите количество записей, сохраните и посмотрите результат на фронтенде.
Elementor отобразит ваши записи в том виде, который вы задали в шаблоне render().
Заключение
Создание кастомных виджетов Elementor с WP_Query — мощный инструмент для интеграции вашего плагина с визуальным билдером WordPress.
Вы даёте пользователю гибкость и избавляете от необходимости использовать шорткоды или кастомный PHP.
Дальше вы можете развить функционал — добавить сортировку, фильтры, выбор категорий, пагинацию или даже AJAX-загрузку.
