Добавьте кнопку на Elementor для добавления нового раздела на странице редактирования.

Я хочу добавить кнопку в элементор “Добавить новый раздел” на странице редактирования. В корневом файле моего плагина я просто подключил js файл. Я убедился, что js файл загружается правильно, и в консоли я вижу в конце этот console.log(‘Elementor initialized’);. Если кто-то может решить проблему, пожалуйста, помогите мне. Для уточнения, я просто хочу добавить только кнопку.

Смотрите изображение для большей ясности

    console.log('custom-button.js загружен');

jQuery(window).on('elementor:init', function() {
    console.log('Elementor инициализирован');

    elementor.hooks.addAction('editor/init', function() {
        console.log('Редактор инициализирован');

        const interval = setInterval(() => {
            const targetContainers = document.querySelectorAll('.elementor-add-new-section, .e-view');

            console.log('Проверка целевых контейнеров:', targetContainers);

            if (targetContainers.length > 0) {
                targetContainers.forEach((container, index) => {
                    console.log(`Контейнер ${index} найден`, container);

                    if (container.classList.contains('e-view')) {
                        const buttonDiv = document.createElement('div');
                        buttonDiv.classList.add('elementor-add-section-area-button');

                        const newButton = document.createElement('button');
                        newButton.textContent="Добавить новый раздел";
                        newButton.classList.add('button', 'button-primary');

                        buttonDiv.appendChild(newButton);
                        container.appendChild(buttonDiv);
                        console.log('Кнопка добавлена в редактор');

                        clearInterval(interval);
                    }
                });
            } else {
                console.log('Совпадающих целевых контейнеров пока не найдено');
            }
        }, 500); 
    });
});

Для добавления пользовательской кнопки в интерфейсе “Добавить новый раздел” Elementor вы можете использовать JavaScript, чтобы подключиться к интерфейсу редактора Elementor. Поскольку вы успешно подключили файл JavaScript и видите журнал консоли, вы можете добавить код для вставки кнопки в раздел.

Вот базовый пример того, как добавить кнопку в редакторе Elementor:

1. JavaScript код (в вашем подключаемом файле):

   jQuery(document).ready(function($) {
       // Ждем полной инициализации Elementor
       elementor.on('preview:loaded', function() {
           console.log('Elementor инициализирован');
   
           // Добавить кнопку в панель разделов Elementor
           const buttonHTML = '<button id="custom-button" style="padding: 5px; margin-left: 10px;">Пользовательская кнопка</button>';
   
           // Найти место, куда вы хотите добавить кнопку
           // Здесь, например, мы добавляем в панель инструментов раздела
           $(document).on('DOMNodeInserted', function(e) {
               if ($(e.target).hasClass('elementor-add-section')) {
                   $(e.target).append(buttonHTML);
   
                   // Опционально: добавить обработчик событий для кнопки
                   $('#custom-button').on('click', function() {
                       alert('Пользовательская кнопка нажата!');
                   });
               }
           });
       });
   });
   

2. Объяснение:

   • elementor.on('preview:loaded', function() {...}): Это гарантирует, что код выполнится только после полной загрузки Elementor.
   • $(document).on('DOMNodeInserted', function(e) {...}): Мониторит изменения в DOM. Когда пользовательский интерфейс “Добавить раздел” добавляется, мы вставляем пользовательскую кнопку.
   • $('#custom-button').on('click', function() {...}): Добавляет событие клика для кнопки.

3. CSS стилизация (по желанию):

   Если вам нужны особые стили для вашей кнопки, вы можете добавить CSS как встроенно, так и в отдельном файле CSS.

   #custom-button {
       background-color: #28a745;
       color: white;
       border: none;
       padding: 5px 10px;
       border-radius: 3px;
       cursor: pointer;
   }
   

После реализации этого перезагрузите редактор Elementor, и вы должны увидеть пользовательскую кнопку в области “Добавить раздел”. Дайте знать, если вам нужна дополнительная настройка.