05 Ноя
Создание собственных виджетов в Elementor — это мощный способ расширить возможности конструктора и адаптировать его под нужды проекта. В этом уроке мы разберём, как добавить кастомные контроли в виджет, передавать параметры в WP_Query, работать с таксономиями и создать отдельную категорию для своих виджетов в интерфейсе Elementor.
Добавление кастомных контролов в виджет Elementor
Для начала необходимо добавить новые поля (контроли), которые позволят администратору настраивать вывод данных внутри виджета. Например, если у нас есть несколько типов объявлений — For Sale, For Rent, Sold — мы можем дать возможность пользователю выбирать тип прямо в настройках виджета.
В Elementor это реализуется через метод add_control(), в котором задаются параметры поля.
Тип поля — select, список вариантов формируется вручную:
$this->add_control(
'offer_type',
[
'label' => __( 'Тип объявления', 'text-domain' ),
'type' => \Elementor\Controls_Manager::SELECT,
'options' => [
'' => '— Не выбрано —',
'for_sale' => 'For Sale',
'for_rent' => 'For Rent',
'sold' => 'Sold',
],
'default' => '',
]
);
Таким образом, пользователь может задать фильтр, а при пустом значении фильтр просто не применяется.
Передача параметров в WP_Query
После добавления поля нужно использовать его значение в запросе.
В методе render() получаем настройки:
$settings = $this->get_settings_for_display();
Затем создаём массив аргументов для WP_Query и добавляем нужные условия:
$args = [
'post_type' => 'property',
'posts_per_page' => 6,
];
if ( !empty( $settings['offer_type'] ) ) {
$args['meta_query'][] = [
'key' => 'property_type',
'value' => $settings['offer_type'],
];
}
$query = new WP_Query( $args );
Такой подход позволяет динамически фильтровать контент на основе значений, заданных в интерфейсе Elementor.
Добавление фильтра по таксономии (например, Location)
Для расширения функционала можно добавить выбор категории (или любой другой таксономии).
Предположим, у нас есть таксономия location. Тогда нужно получить все её термины и вывести в виде списка в поле select.
$locations = get_terms( [
'taxonomy' => 'location',
'hide_empty' => false,
] );
$options = [ '' => '— Не выбрано —' ];
foreach ( $locations as $location ) {
$options[$location->term_id] = $location->name;
}
$this->add_control(
'location',
[
'label' => __( 'Город', 'text-domain' ),
'type' => \Elementor\Controls_Manager::SELECT,
'options' => $options,
'default' => '',
]
);
Теперь в админке можно выбрать нужный город, и виджет выведет посты только из этой локации.
В WP_Query это реализуется через tax_query:
if ( !empty( $settings['location'] ) ) {
$args['tax_query'] = [
[
'taxonomy' => 'location',
'field' => 'term_id',
'terms' => $settings['location'],
],
];
}
Создание собственной категории для виджетов
Чтобы виджеты проекта не терялись среди стандартных, удобно поместить их в отдельную категорию в Elementor.
Это делается через хук:
add_action( 'elementor/elements/categories_registered', function( $elements_manager ) {
$elements_manager->add_category(
'ali_property',
[
'title' => __( 'Ali Property', 'text-domain' ),
'icon' => 'fa fa-home',
]
);
});
Теперь при добавлении нового виджета можно указать метод get_categories():
public function get_categories() {
return [ 'ali_property' ];
}
В результате в интерфейсе конструктора появится новая категория Ali Property, где будут собраны все ваши собственные виджеты.
Завершение цикла и очистка данных
Важно не забыть после пользовательского цикла WP_Query вызывать:
wp_reset_postdata();
Это сбрасывает глобальные переменные постов и предотвращает возможные конфликты при использовании нескольких виджетов на одной странице.
Заключение
Теперь кастомный виджет для Elementor способен:
- фильтровать контент по типу и локации,
- использовать параметры, переданные из панели управления,
- работать в собственной категории,
- безопасно обрабатывать несколько экземпляров на одной странице.
Такой подход идеально подходит для проектов с динамическим контентом — например, каталога недвижимости, интернет-магазина или каталога услуг.
Вы можете создавать блоки вроде “Дома на продажу в Кишинёве”, просто выбрав соответствующие параметры в настройках виджета — без написания дополнительного кода.
