Как создать собственные атрибуты для виджетов Elementor в WordPress

Elementor — мощный конструктор страниц для WordPress, который позволяет создавать уникальные и функциональные блоки. Но иногда стандартных возможностей недостаточно, и возникает задача добавить собственные атрибуты к виджетам для расширения их функционала или интеграции с внешними сервисами.

Зачем нужны собственные атрибуты в виджетах Elementor

Добавление собственных атрибутов позволяет:

• Передавать данные для кастомных скриптов и стилей.
• Создавать уникальные идентификаторы для взаимодействия с JavaScript.
• Добавлять SEO- или ARIA-атрибуты, улучшающие доступность сайта.
• Интегрироваться с аналитикой или сторонними сервисами через data-атрибуты.

Без возможности добавлять кастомные атрибуты часто приходится использовать хаки или сторонние плагины, что усложняет поддержку.

Как добавить собственные атрибуты в виджет Elementor: общий подход

Для добавления кастомных атрибутов обычно нужно:

1. Создать расширение существующего виджета или собственного.
2. Добавить новое поле в настройки виджета, чтобы пользователь мог вводить значение атрибута.
3. Вывести атрибут в HTML-коде виджета при рендеринге.

Рассмотрим на примере создания собственного атрибута data-wpelementor-custom для виджета "Текстовый редактор".

Шаг 1. Расширение виджета с добавлением настройки

Создадим плагин или добавим код в functions.php темы, который расширит виджет Elementor Text Editor, добавив новое поле для пользовательского атрибута.

add_action('elementor/element/text-editor/section_style/after_section_end', 'wpelementor_add_custom_attribute_control');
function wpelementor_add_custom_attribute_control($element) {
    $element->start_controls_section(
        'wpelementor_custom_attributes_section', [
            'label' => __('Дополнительные атрибуты', 'wpelementor'),
            'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
        ]
    );

    $element->add_control(
        'wpelementor_custom_data_attribute', [
            'label' => __('Data attribute', 'wpelementor'),
            'type' => \Elementor\Controls_Manager::TEXT,
            'description' => __('Введите значение для data-wpelementor-custom', 'wpelementor'),
        ]
    );

    $element->end_controls_section();
}

Здесь мы добавляем новую секцию с контролом для ввода значения data-атрибута.

Шаг 2. Вывод атрибута в HTML

Чтобы добавить атрибут в HTML, нужно использовать фильтр рендеринга элемента или переопределить метод render(). Для простоты применим фильтр elementor/frontend/widget/render_content:

add_filter('elementor/frontend/widget/render_content', 'wpelementor_add_custom_data_attribute_to_rendered_html', 10, 2);
function wpelementor_add_custom_data_attribute_to_rendered_html($content, $widget) {
    if ('text-editor' === $widget->get_name()) {
        $custom_value = $widget->get_settings('wpelementor_custom_data_attribute');
        if (!empty($custom_value)) {
            // Добавим атрибут data-wpelementor-custom внутрь обертки виджета
            $content = str_replace('<div class="elementor-text-editor"', '<div class="elementor-text-editor" data-wpelementor-custom="' . esc_attr($custom_value) . '"', $content);
        }
    }
    return $content;
}

Таким образом, если пользователь ввел значение в настройках, соответствующий атрибут появится в HTML-коде.

Примеры полезных кастомных атрибутов для Elementor

1. Data-атрибуты для интеграции с JavaScript

Вы можете передавать ID, типы или другие параметры для скриптов. Например, атрибут data-wpelementor-product-id="123" для кнопки покупки.

2. ARIA-атрибуты для доступности

Добавление aria-label или других атрибутов улучшит восприятие сайта людьми с ограничениями по зрению.

3. SEO-метки

Редкие случаи, когда нужно добавить микроразметку или кастомные атрибуты для поисковых систем.

Использование плагина Clearfy Pro для управления атрибутами и оптимизацией

Если вы хотите комплексно управлять атрибутами и оптимизацией сайта, рекомендую обратить внимание на Clearfy Pro. В нем есть инструменты для отключения лишних атрибутов, добавления пользовательских скриптов и стилей, что поможет поддерживать сайт в оптимальном состоянии.

Советы по безопасности и производительности при добавлении кастомных атрибутов

Всегда экранируйте пользовательский ввод для предотвращения XSS-атак. В примере выше используется esc_attr(), что является хорошей практикой.

Не перегружайте HTML излишними атрибутами, чтобы не замедлять загрузку и не создавать лишнюю сложность для браузера.

Обдумывайте необходимость каждого дополнительного атрибута и документируйте их использование для будущих разработчиков.

Заключение

Добавление собственных атрибутов в виджеты Elementor — простой, но мощный способ расширить функциональность вашего сайта. Используйте приведенный пример как шаблон для своих задач, адаптируя под конкретные нужды. Такой подход позволяет создавать гибкие решения без необходимости менять исходный код плагина Elementor.