Вопрос или проблема
Ниже представлен мой крайне простой код плагина. Я пытаюсь подключиться к вкладке “Дополнительно” каждого виджета Elementor, чтобы отобразить параметры конфигурации моего плагина. Плагин показывает/скрывает виджеты на фронт-энде в зависимости от значения параметра URL. На вкладке “Дополнительно” любого виджета должна быть секция “Условная видимость” с моими опциями ниже, но как бы я ни старался, я не могу заставить это работать.
Чего мне здесь не хватает? Я проверил документацию Elementor и, очевидно, упускаю что-то важное.
<?php
/**
* Название плагина: Elementor Conditional Visibility
* Описание: Расширяет Elementor, добавляя функциональность условной видимости ко всем виджетам.
* Версия: 1.0.0
* Текстовый домен: elementor-conditional-visibility
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Выход, если доступ осуществляется напрямую.
}
/**
* Внедрение наших пользовательских контролов на вкладку "Дополнительно" всех виджетов.
*
* Документация по хукам для моей справки: https://developers.elementor.com/docs/hooks/injecting-controls/
*/
add_action( 'elementor/element/common/section_attributes/before_section_end', 'ecv_add_conditional_visibility_controls', 10, 3 );
function ecv_add_conditional_visibility_controls( $element, $section_id, $args ) {
// Убедимся, что мы внедряем сразу после 'section_attributes' на вкладке "Дополнительно".
if ( 'section_attributes' !== $section_id ) {
return;
}
$element->start_controls_section(
'ecv_conditional_visibility_section',
[
'tab' => \Elementor\Controls_Manager::TAB_ADVANCED,
'label' => __( 'Условная видимость', 'elementor-conditional-visibility' ),
]
);
// Имя параметра URL
$element->add_control(
'ecv_url_param_name',
[
'label' => __( 'Имя параметра URL', 'elementor-conditional-visibility' ),
'type' => \Elementor\Controls_Manager::TEXT,
'placeholder' => __( 'например, promo', 'elementor-conditional-visibility' ),
'description' => __( 'Укажите параметр запроса для проверки, например "promo" в ?promo=summer.', 'elementor-conditional-visibility' ),
]
);
// Значение параметра URL
$element->add_control(
'ecv_url_param_value',
[
'label' => __( 'Значение параметра URL', 'elementor-conditional-visibility' ),
'type' => \Elementor\Controls_Manager::TEXT,
'placeholder' => __( 'например, summer', 'elementor-conditional-visibility' ),
'description' => __( 'Виджет будет совпадать с этим значением. Оставьте пустым, если должно совпадать любое значение.', 'elementor-conditional-visibility' ),
]
);
// Если параметр совпадает
$element->add_control(
'ecv_action_on_match',
[
'label' => __( 'Если параметр совпадает', 'elementor-conditional-visibility' ),
'type' => \Elementor\Controls_Manager::SELECT,
'default' => 'показать',
'label_block' => true,
'options' => [
'показать' => __( 'Показать', 'elementor-conditional-visibility' ),
'скрыть' => __( 'Скрыть', 'elementor-conditional-visibility' ),
],
]
);
// Если параметр не предоставлен или не совпадает
$element->add_control(
'ecv_action_on_not_match',
[
'label' => __( 'Если параметр не предоставлен или не совпадает', 'elementor-conditional-visibility' ),
'type' => \Elementor\Controls_Manager::SELECT,
'default' => 'показать',
'label_block' => true,
'options' => [
'показать' => __( 'Показать', 'elementor-conditional-visibility' ),
'скрыть' => __( 'Скрыть', 'elementor-conditional-visibility' ),
],
]
);
$element->end_controls_section();
}
/**
* Решение, отобразить ли виджет на основе пользовательских настроек условной видимости.
*
* Также можно использовать хук 'elementor/widget/before_render_content', если предпочитаете.
*/
add_action( 'elementor/frontend/widget/before_render', 'ecv_apply_conditional_visibility' );
function ecv_apply_conditional_visibility( $widget ) {
$settings = $widget->get_settings_for_display();
$param_name = isset( $settings['ecv_url_param_name'] ) ? trim( $settings['ecv_url_param_name'] ) : '';
$param_value = isset( $settings['ecv_url_param_value'] ) ? trim( $settings['ecv_url_param_value'] ) : '';
$action_match = isset( $settings['ecv_action_on_match'] ) ? $settings['ecv_action_on_match'] : 'показать';
$action_no = isset( $settings['ecv_action_on_not_match'] ) ? $settings['ecv_action_on_not_match'] : 'показать';
// Если нет имени параметра, ничего не делаем.
if ( ! $param_name ) {
return;
}
// Получить текущее значение в URL (?param_name=...).
$current_value = isset( $_GET[ $param_name ] ) ? sanitize_text_field( $_GET[ $param_name ] ) : '';
// Определяем, является ли это "совпадением".
$has_match = false;
if ( $current_value !== '' ) {
// Если 'значение для совпадения' пустое, любое непустое значение URL считается совпадением.
if ( '' === $param_value ) {
$has_match = true;
} else {
$has_match = ( $current_value === $param_value );
}
}
// Логика скрытия/отображения.
if ( $has_match ) {
// Параметр совпадает.
if ( 'скрыть' === $action_match ) {
$widget->set_settings( '_render_widget', false );
}
} else {
// Параметр отсутствует или не совпадает.
if ( 'скрыть' === $action_no ) {
$widget->set_settings( '_render_widget', false );
}
}
}
Ответ или решение
Основываясь на вашей проблеме с отображением настроек кастомного элемента управления в разделе "Дополнительно" виджета Elementor, давайте рассмотрим возможные причины и шаги для их устранения.
Теория
Ваше намерение состоит в том, чтобы добавить кастомные элементы управления к каждой секции "Дополнительно" в Elementor с использованием хуков, тем самым предоставив возможность управлять видимостью виджетов на основе URL-параметров. В теории, это должно быть реализовано путем использования хука elementor/element/common/section_attributes/before_section_end
, который позволяет путем инъекции добавить секцию с элементами управления. Однако, когда настройки не появляются, это может свидетельствовать о проблемах, связанных с самим отображением элементов управления, неправильным идентификатором секции, или порядком загрузки скриптов.
Пример
Ваш текущий код использует хук, чтобы вставить кастомные элементы управления в секцию section_attributes
вкладки "Дополнительно". Пример кода:
add_action( 'elementor/element/common/section_attributes/before_section_end', 'ecv_add_conditional_visibility_controls', 10, 3 );
function ecv_add_conditional_visibility_controls( $element, $section_id, $args ) {
if ( 'section_attributes' !== $section_id ) {
return;
}
$element->start_controls_section(
'ecv_conditional_visibility_section',
[
'tab' => \Elementor\Controls_Manager::TAB_ADVANCED,
'label' => __( 'Conditional Visibility', 'elementor-conditional-visibility' ),
]
);
// Добавление поля "URL Parameter Name"
$element->add_control(
'ecv_url_param_name',
[
'label' => __( 'URL Parameter Name', 'elementor-conditional-visibility' ),
'type' => \Elementor\Controls_Manager::TEXT,
'placeholder' => __( 'e.g. promo', 'elementor-conditional-visibility' ),
]
);
// Здесь могут быть добавлены дополнительные параметры управления...
$element->end_controls_section();
}
Применение
Проверка на правильность хука и идентификатора секции
-
Правильность идентификатора секции: Убедитесь, что вы используете корректный идентификатор секции. Проверьте на наличие опечаток и соответствие документации Elementor. В вашем случае идентификатор
section_attributes
должен совпадать с фактическим идентификатором секции в Elementor. Проверьте последние версии документации, так как изменения могут быть внесены разработчиками Elementor. -
Хук и его параметры: Убедитесь, что хук
elementor/element/common/section_attributes/before_section_end
правильно используется и поддерживается вашей версией Elementor. Проверьте, соответствуют ли передаваемые параметры хуку:$element
,$section_id
,$args
.
Очистка кеша и проверки JavaScript
-
Очистка кеша: Иногда изменения не отображаются из-за кеширования в браузере или на уровне сайта. Очистите кеш вашего браузера, а также проверьте наличие плагинов кеширования на вашем сайте и временно отключите их, чтобы убедиться, что они не мешают обновлению настроек.
-
Проблемы с JavaScript: Ошибка в загрузке или конфликт с другими JavaScript-файлами может препятствовать отображению кастомных настроек. Откройте консоль разработчика вашего браузера (обычно доступно через F12) и проверьте наличие ошибок. Если какие-то ошибки связаны с Elementor или приведенным вами кодом, попробуйте их исправить.
Обновление и совместимость версии
-
Совместимость версии и плагинов: Убедитесь, что у вас установлены актуальная версия Elementor и все используемые плагины. Если ваш код работает с более старой версией Elementor, также возможно, что изменения в API плагина повлияли на поведение вашего кода.
-
Конфликт с другими плагинами: Временно отключите другие плагины, которые могут влиять на элементы управления в Elementor, чтобы исключить конфликты.
Альтернативные рекомендации
- Другие хуки: Если текущий хук по каким-то причинам не работает, попробуйте использовать другие хуки, такие как
elementor/element/common/before_section_start
илиelementor/element/common/after_section_end
, чтобы понять, могут ли они решить проблему.
Таким образом, основой для исправления вашей проблемы должна стать проверка правильности используемого хука, идентификатора секции и совместимости версии Elementor. Надеюсь, эти шаги помогут разрешить ваше затруднение, и ваша кастомная секция будет успешно отображаться в разделе "Дополнительно" виджета Elementor.