Вопрос или проблема
Я пытаюсь создать настраиваемые типы форм для виджета форм Elementor Pro.
Мне удалось создать форму, отобразить её, и всё работает отлично до сих пор. Но я не могу добавить пользовательский раздел на вкладке “Стиль”.
файл plugin.php:
define('EPFF_PLUGIN_DIR', plugin_dir_path(__FILE__));
function register_new_form_fields( $form_fields_registrar ) {
require_once( __DIR__ . '/forms/slider.php' );
require_once( __DIR__ . '/forms/image-radio.php' );
$da_slider = new \daSlider();
$form_fields_registrar->register( $da_slider );
$form_fields_registrar->register( new \daImageRadio() );
}
add_action( 'elementor_pro/forms/fields/register', 'register_new_form_fields' );
add_action('elementor/widget/before_render_content', function($widget) {
// Добавить пользовательские элементы управления для виджета формы
$da_slider_style = new daSliderStyle();
$da_slider_style -> register_controls($widget);
}, 10, 1);
/forms/slider.php: (Я убрал часть кода для улучшения читаемости)
<?php
if (! defined('ABSPATH')) {
exit; // Выход, если доступ осуществляется напрямую
}
class daSlider extends \ElementorPro\Modules\Forms\Fields\Field_Base
{
public $depended_scripts = [];
public $depended_styles = [];
public function get_type(): string
{
return 'range_slider';
}
public function get_name(): string
{
return esc_html__('Ползунок диапазона', 'epff');
}
public function render($item, $item_index, $form): void
{
$html_id = $form->get_attribute_id($item, $item_index);
$name = $form->get_attribute_name($item);
//....
}
public function validation($field, $record, $ajax_handler): void
{
$value = $field['value'];
if (! is_numeric($value)) {
$ajax_handler->add_error($field['id'], esc_html__('Ввод должен быть числом', 'epff'));
}
}
public function update_controls($widget): void
{
$elementor = \ElementorPro\Plugin::elementor();
$control_data = $elementor->controls_manager->get_control_from_stack($widget->get_unique_name(), 'form_fields');
if (is_wp_error($control_data)) {
return;
}
$field_controls = [
'min_val' => [
'name' => 'min_val',
'label' => esc_html__('Минимальное значение', 'epff'),
'type' => \Elementor\Controls_Manager::NUMBER,
'condition' => [
'field_type' => $this->get_type(),
],
'tab' => 'content',
'inner_tab' => 'form_fields_content_tab',
'tabs_wrapper' => 'form_fields_tabs',
],
'slider_style' => [
'name' => 'slider_style',
'label' => esc_html__('Стиль ползунка', 'epff'),
'type' => \Elementor\Controls_Manager::COLOR,
'condition' => [
'field_type' => $this->get_type(),
],
'description' => esc_html__('Текст для отображения минимального и максимального значения. Используйте %d как заполнитель для отображения значения. По умолчанию: %s', 'epff'),
'tab' => 'style',
],
];
$control_data['fields'] = $this->inject_field_controls($control_data['fields'], $field_controls);
}
}
class daSliderStyle extends \Elementor\Widget_Base{
public function get_name(): string
{
return esc_html__('Ползунок диапазона', 'epff');
}
function register_controls(): void {
$this->start_controls_section(
'section_da_slider_style',
[
'label' => __('Стиль ползунка', 'text-domain'),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'slider_background_color',
[
'label' => __('Цвет фона', 'text-domain'),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .da-slider' => 'background-color: {{VALUE}};',
],
]
);
$this->end_controls_section();
}
}
?>
Я пытался добавить это в функцию “update_controls()” и с помощью хука “before_render_content”. Но ничего не работает. Есть идеи?
.
Ответ или решение
Для решения задачи добавления пользовательских стилей в виджет форм Elementor Pro, важно понимать архитектуру, используемую в данном контексте. Рассмотрим несколько ключевых концепций и подходов, которые помогут в достижении цели:
Теория
Плагины для WordPress, такие как Elementor Pro, предоставляют механизм для создания и расширения виджетов, который включает в себя добавление контролов как в раздел «Content», так и в раздел «Style». В вашем коде вы реализовали кастомный элемент управления для поля в разделе «Content», однако, чтобы управлять стилями виджета, необходимо корректно инициировать и привязать контролы в разделе «Style».
Элементор предоставляет специальный API для регистрации кастомных стилей, который основывается на использовании Controls_Manager. Для успешного добавления стилей необходимо правильно определить и зарегистрировать секции и контролы стилизации, чтобы они отображались в пользовательском интерфейсе Elementor.
Пример
Ваш код включает два ключевых класса: daSlider, который отвечает за содержание и основной функционал, и daSliderStyle, который пытается управлять стилями. Вы используете функцию register_controls() в классе daSliderStyle для добавления раздела стилей. Однако, вероятно, происходит неправильная привязка этого класса к виджету формы.
Рассмотрим, что необходимо сделать для корректной регистрации стилей:
-
Определение секции стилей: В
daSliderStyleвы начинаете секцию стилей с помощьюstart_controls_section(). Это правильный подход. -
Добавление контролов в секцию:
add_control()используется для создания конкретных контролов. Обратите внимание на использование селекторов CSS. Вы пытаетесь применить стили к классу.da-slider, убедитесь, что этот класс действительно присутствует в DOM элемента, к которому вы хотите применить стили. -
Регистрация контролов: Критично правильно зарегистрировать контролы и убедиться, что класс
daSliderStyleкорректно связывается с виджетом формы.
Применение
Теперь, как применить теорию на практике:
-
Проверка селекторов: Убедитесь, что используемые селекторы корректны и применяются к нужным элементам в выходном HTML-коде. Проверьте, присутствует ли класс
.da-sliderна вашем слайдере. -
Корректная регистрация контролов: Возможно, стоит проверить метод регистрации контролов для виджета. В вашем коде вы вызываете регистрацию стилей через
add_action('elementor/widget/before_render_content', ...);, что может быть недостаточно для конкретного виджета форм. Убедитесь, чтоdaSliderStyleи его контролы связаны сdaSlider. -
Отладка и логирование: Добавьте логирование (например, с помощью
error_log) внутри методовregister_controls()и проверок, чтобы убедиться в их вызове и корректной работе. -
Использование консоли браузера: Проверьте в инструменте разработчика браузера, какие стили применяются, чтобы убедиться, что контролы действительно влияют на визуальное отображение.
Рассмотрим ваш отрывок кода в daSliderStyle, убедитесь в следующем:
class daSliderStyle extends \Elementor\Widget_Base{
public function get_name(): string
{
return 'range_slider_style'; // Имя виджета
}
public function get_title(): string
{
return __('Range Slider Styles', 'epff');
}
function register_controls(): void {
$this->start_controls_section(
'section_da_slider_style',
[
'label' => __('Slider Style', 'text-domain'),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'slider_background_color',
[
'label' => __('Background Color', 'text-domain'),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .da-slider' => 'background-color: {{VALUE}};',
],
]
);
$this->end_controls_section();
}
}Чтобы ensure окончательное решение, возможно потребуется проанализировать весь жизненный цикл виджета форм и точки привязки вашего кода. Вы можете обратиться к официальной документации Elementor и форумам поддержки для получения дополнительной информации, а также примеров реализации пользовательских стилей.