Вайбкодинг плагинов для WordPress: Создание и публикация расширений для Elementor с помощью ИИ
Пошаговый кейс создания бесплатного плагина для Elementor через вайбкодинг с Claude: 7 UX-функций, архитектура хуков и прохождение ревью WordPress.org.
Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
🎯 О чём этот конспект: Практический опыт создания бесплатного WordPress-плагина («Rino’s Toolkit for Elementor») дизайнером без навыков ручного программирования с помощью вайбкодинга. Подробный разбор 7 полезных функций для оптимизации Elementor (Atomic V4 и V3), архитектура безопасных расширений только для редактора и подводные камни модерации в официальном каталоге WordPress.org.
👤 Кому будет полезно: Вайбкодерам, UI/UX-дизайнерам, владельцам агентств и создателям сайтов на WordPress/Elementor, которые хотят закрывать «боли» своего рабочего процесса и создавать собственные плагины с помощью ИИ-ассистентов.
✨ Что получите: Чёткий пайплайн разработки плагинов на стеке Local WP + Claude/Codex, проверенную архитектуру хуков для интерфейса Elementor и алгоритм успешного прохождения проверки в репозитории WordPress.
1. Архитектура вайбкодинга для WordPress: Связка Local WP и Claude
Контекст: Создание плагинов традиционно требовало глубоких знаний архитектуры ядра WordPress, PHP-хуков (actions / filters) и JavaScript API редактора. С приходом инструментов генерации кода порог входа снизился: дизайнеры и продуктовые специалисты могут формулировать точные UX-требования, пока ИИ генерирует код расширения. Автор начал проект как эксперимент в прямом эфире, где за один стрим собрал рабочий прототип, после чего показал код сеньор-разработчику для аудита. Базовый сетап состоит из локальной среды разработки и подключения ИИ к кодовой базе проекта.
Тайминг:[00:34], [01:34], [10:19]
Выгода: Позволяет запустить собственный плагин за несколько дней вместо месяцев изучения PHP и JS, экономя тысячи долларов на найме разработчиков для закрытия мелких рутинных проблем интерфейса.
Как применить:
Шаг 1: Развёртывание локального окружения — инструмент Local WP — Установите Local WP, создайте новый тестовый сайт на WordPress в один клик и активируйте последнюю версию Elementor.
Шаг 2: Инициализация плагина и подключение ИИ — инструмент Claude Code / Cursor / Windsurf — Откройте директорию wp-content/plugins/ вашего сайта в редакторе с ИИ-агентом. Создайте папку плагина и задайте базовую структуру через системный промпт:
Ты опытный WordPress и Elementor разработчик. Напиши основу плагина, который внедряет скрипты и стили ИСКЛЮЧИТЕЛЬНО в интерфейс редактора Elementor (хук elementor/editor/after_enqueue_scripts / elementor/editor/after_enqueue_styles). Плагин не должен загружать никаких файлов и скриптов во фронтенд сайта. Код должен следовать стандартам безопасности WordPress (nonce, sanitization, strict escaping).
Шаг 3: Тестирование и экспорт — инструмент WordPress Admin — Проверьте функционал в локальном браузере, запакуйте папку плагина в .zip и загрузите на рабочие сайты или отправьте на ревью.
Результат: Готовый к расширению каркас плагина, напрямую управляемый ИИ-агентом в реальном локальном окружении WordPress.
2. Оптимизация работы с CSS-классами в Atomic V4: Полные имена и визуальный подсветчик
Контекст: В новом редакторе Elementor (Atomic V4) фокус сместился на глобальные классы стилей, однако интерфейс имеет серьезные ограничения эргономики. Длинные осмысленные имена классов обрезаются многоточием, заставляя пользователя постоянно наводить курсор для всплывающей подсказки. Кроме того, когда класс переиспользуется на десятках компонентов страницы, встроенный инструмент показывает только факт использования, но не даёт визуального фокуса на конкретных блоках полотна.
Тайминг:[02:14], [02:47]
Выгода: Устранение микрозадержек при верстке сложных интерфейсов, исключение ошибок случайного редактирования элементов за счет мгновенной подсветки всей группы компонентов с общим классом.
Как применить:
Шаг 1: Снятие ограничения на ширину имени класса (Full Class Names) — инструмент CSS-инъекция в редактор — Отключите обрезку текста в селекторе списка классов панели Elementor, разрешив отображение полной строки:
/* Пример CSS-модификатора для панели Elementor V4 */.elementor-control-type-classes .elementor-control-classes-item .elementor-control-classes-item__name { white-space: normal !important; text-overflow: unset !important; overflow: visible !important; word-break: break-all;}
Шаг 2: Внедрение фичи Class Highlighter — инструмент JS-агент в editor.js — Добавьте в контекстное меню класса кнопку «Highlight on page». Скрипт находит все DOM-узлы внутри iframe-холста Elementor с данным селектором и вешает на них контурный стиль:
Результат: Полные имена классов читаются без наведения мыши, а клик по кнопке «Highlight» мгновенно подсвечивает фиолетовым контуром все блоки на странице, использующие данный стиль.
3. Ускорение навигации по стилям: Фильтрация вкладок и двойные индикаторы
Контекст: Стилистическая панель Elementor Atomic V4 перегружена аккордеонами и вкладками (Padding, Margin, Typography, Box Shadow, Borders). Поиск нужного свойства превращается в постоянный скроллинг и хаотичное раскрытие блоков. Дополнительно встроенные точки-индикаторы (показывающие, что для данного селектора или локального элемента переопределено свойство) слишком мелкие и часто пропускаются глазом, что приводит к конфликтам каскада.
Тайминг:[03:33], [04:18]
Выгода: Сокращение времени поиска нужного свойства верстки в 3–4 раза; мгновенное обнаружение локальных переопределений стилей, нарушающих дизайн-систему.
Как применить:
Шаг 1: Реализация Tab Search (Живой поиск по стилям) — инструмент Vanilla JS в iframe редактора — Добавьте поле ввода над вкладками панели стилей. При вводе (например, shadow или pad) скрипт скрывает аккордеоны, не содержащие совпадений, и открывает нужные.
Шаг 2: Кнопка аккордеона «Раскрыть/Свернуть всё» — инструмент JS Event Listener — Добавьте рядом с поиском тумблер одного клика, который циклически применяет триггер открытия/закрытия для всех секций контролов.
Шаг 3: Масштабирование индикаторных точек (Bigger Indicator Dots) — инструмент CSS редактора — Увеличьте дефолтный размер маркеров изменений ровно в 2 раза:
Результат: Быстрая фильтрация свойств через ввод текста и четко видимые маркеры изменений как в локальных стилях, так и в классах.
4. Глубокая навигация по DOM: Хлебные крошки (Breadcrumbs) вместо Navigator
Контекст: Стандартная плавающая панель структуры (Navigator) в Elementor часто перекрывает холст, закрывая верстку на небольших мониторах ноутбуков. При работе со сложными макетами (Flexbox-контейнеры, Grid, вложенные Div-блоки) выбор родителя кликом мыши часто невозможен из-за абсолютного позиционирования или перекрытия слоев. Автор адаптировал концепцию хлебных крошек из редактора Gutenberg, закрепив строку пути внизу экрана.
Тайминг:[04:53]
Выгода: Экономия полезного пространства экрана за счет отключения плавающей панели Navigator; мгновенный переход на любой уровень вложенности DOM-дерева в один клик.
Как применить:
Шаг 1: Отслеживание активной модели Elementor — инструмент Elementor JS Hooks — Подпишитесь на события смены активного элемента в редакторе:
Шаг 2: Генерация цепочки родителей — инструмент DOM Traversal — Пройдитесь циклом по родительским контейнерам выбранной ноды до корневого раздела страницы:
function updateBreadcrumbs(activeView) { const container = document.querySelector('#rino-breadcrumbs-bar'); container.innerHTML = ''; let current = activeView; const path = []; while (current) { path.unshift({ title: current.model.get('label') || current.model.get('widgetType') || current.model.get('elType'), id: current.model.get('id') }); current = current.getParent(); } path.forEach((item, index) => { const link = document.createElement('span'); link.textContent = item.title; link.onclick = () => window.elementor.getContainer(item.id).view.setActive(); container.appendChild(link); if (index < path.length - 1) container.append(' > '); });}
Шаг 3: Фиксация в статус-баре — инструмент CSS-стилизация — Разместите плашку по центру нижней панели инструментов Elementor с минимальной высотой (например, 28px).
Результат: Компактная цепочка навигации внизу экрана, позволяющая подниматься из дочернего параграфа в родительский Flexbox и Grid без открытой панели структуры.
5. Контроль композиции макета: Масштабирование холста (Zoom Out Canvas)
Контекст: При верстке лендингов на стандартных экранах (13–15 дюймов) дизайнер не видит ритм всей страницы целиком, из-за чего приходится постоянно открывать превью в новой вкладке. В Figma базовой функцией является отдаление рабочей области. В Elementor такой функции «из коробки» не предусмотрено.
Тайминг:[05:58]
Выгода: Быстрая проверка макета и вертикального ритма всей страницы (зум до 50% и 25%) прямо во время редактирования без рендера превью.
Шаг 2: Применение трансформации к Iframe — инструмент CSS Transform — При переключении зума применяйте свойство transform: scale() к контейнеру #elementor-preview с сохранением точки трансформации transform-origin: top center.
Шаг 3: Учет ограничения высоты экранов (Критический баг с vh) — инструмент Best Practices верстки — Учитывайте поведение блоков с фиксированной высотой:
⚠️ Техническое ограничение: Если на секциях задана высота в vh (например, min-height: 50vh), браузер высчитывает её от видимого окна монитора. При масштабировании такой блок визуально сохранит высоту 50% от реального экрана, нарушив пропорции. Используйте padding для отступов вместо жестких значений vh.
Результат: Возможность масштабировать всю страницу в 2–4 раза прямо в редакторе, не теряя доступа к кликам и инструментам верстки.
6. Восстановление быстрых действий для Elementor V4 (Quick Action Buttons)
Контекст: В классическом Elementor (V3) при наведении на блок появлялись управляющие хэндлы. В первой итерации редактора Atomic V4 разработчики ядра убрали контекстные кнопки быстрого доступа, заставляя переходить в правую кнопку мыши или использовать шорткаты. Вайбкодинг позволяет вернуть нужный UX через кастомный оверлей на выделенном блоке.
Тайминг:[07:11]
Выгода: Выполнение операций перемещения, дублирования и удаления виджета за один клик без вызова громоздкого контекстного меню.
Как применить:
Шаг 1: Создание плавающего тулбара — инструмент HTML/CSS компонент — Создайте мини-бар с 4 кнопками: Вверх (Move Up), Вниз (Move Down), Дублировать (Duplicate), Удалить (Delete).
Шаг 2: Привязка к API Elementor V4 — инструмент Elementor Common Commands — Вызывайте стандартные команды Elementor при клике на иконки панели:
// Команды для тулбара быстрых действийconst runElementorAction = (action, containerId) => { switch(action) { case 'duplicate': $e.run('document/elements/duplicate', { container: window.elementor.getContainer(containerId) }); break; case 'delete': $e.run('document/elements/delete', { container: window.elementor.getContainer(containerId) }); break; case 'moveUp': $e.run('document/elements/move', { container: window.elementor.getContainer(containerId), direction: 'up' }); break; case 'moveDown': $e.run('document/elements/move', { container: window.elementor.getContainer(containerId), direction: 'down' }); break; }};
Результат: Над каждым активным блоком в V4 появляется компактный блок кнопок, возвращающий скорость верстки из Elementor V3.
7. Модерация и безопасность: Репозиторий WordPress и защита фронтенда
Контекст: При релизе публичного плагина автор столкнулся с отклонением ревьюерами WordPress.org из-за названия: рабочее имя «Swiss Knife for Elementor» нарушило политику товарных знаков (бренд «Swiss Knife» принадлежит сторонней компании). После смены нейминга на «Rino’s Toolkit for Elementor» плагин прошел верификацию. Второй критический аспект — безопасность: чтобы пользователи без опасений ставили плагин на боевые сайты, он спроектирован так, чтобы код физически не мог повлиять на клиентскую часть (фронтенд) сайта.
Тайминг:[07:41], [09:05], [09:41]
Выгода: Гарантия 0% риска падения сайта на фронтенде и успешное прохождение автоматического и ручного ревью каталога WordPress.org с первой попытки.
Как применить:
Шаг 1: Изоляция окружения плагина — инструмент WordPress Plugin API — Ограничьте выполнение всех скриптов плагина проверкой контекста редактора. Если запрос не относится к админке или редактору Elementor, плагин завершает работу:
<?php// Проверка, что код выполняется только в редакторе Elementoradd_action('elementor/editor/after_enqueue_scripts', function() { // Подключение JS только для интерфейса редактора wp_enqueue_script( 'rinos-toolkit-editor', plugins_url('assets/js/editor.js', __FILE__), ['elementor-editor'], '1.0.0', true );});
Шаг 2: Проверка товарных знаков перед сабмитом — инструмент WordPress Repo Guidelines — Убедитесь, что название плагина не содержит зарегистрированных торговых марок как основного префикса. Формат [Ваш бренд] + for + [Чужой бренд] разрешен, но слова вроде Swiss Knife, Photoshop и прямые префиксы чужих продуктов гарантированно вызовут реджект.
Шаг 3: Аудит сеньор-разработчиком — инструмент Human-in-the-loop — Даже при качественном вайбкодинге перед публичным релизом отдайте финальный diff профессиональному WordPress-разработчику для проверки экранирования данных (esc_html, wp_kses), валидации прав пользователя (current_user_can) и чистоты хуков.
Результат: Одобренный репозиторием WordPress.org плагин с нулевым влиянием на скорость загрузки страниц для посетителей.
FAQ
В: Может ли этот плагин сломать верстку сайта на фронтенде?
О: Нет. Архитектурно все скрипты и стили плагина подключаются исключительно через внутренние хуки редактора Elementor (elementor/editor/after_enqueue_*). Для посетителей сайта плагин абсолютно невидим, его деактивация или удаление не влияют на сохраненные стили или макеты страниц.
В: С какими версиями Elementor совместим Rino’s Toolkit?
О: Плагин оптимизирован под Elementor V4 (Atomic Editor с системой классов), но функции хлебных крошек (Breadcrumbs), масштабирования холста (Zoom Out) и быстрых действий работают также и с виджетами классической версии Elementor V3.
В: Почему зум холста (Zoom Out Canvas) искажает некоторые секции?
О: Это техническое ограничение браузерного рендера единиц измерения vh. Если контейнеру жестко задана высота в процентах от высоты экрана (например, min-height: 50vh), CSS-трансформация родительского фрейма не меняет высоту вьюпорта браузера, из-за чего блок сохраняет исходный физический размер. При использовании padding масштабирование работает корректно.
В: Сложно ли не-программисту выпустить свой плагин в официальный репозиторий WordPress?
О: Технически процесс упрощен: связка Local WP + Claude позволяет сгенерировать корректную файловую структуру. Главная сложность заключается в соблюдении строгих правил каталога WordPress.org: соблюдение авторских прав на бренды в названии, отсутствие трекинга без согласия и обязательное экранирование всех входящих переменных.
В: Зачем использовать подсветку классов (Class Highlighter), если в Elementor уже есть счетчик элементов?
О: Встроенный счетчик Elementor лишь сообщает количество мест, где применен класс, но не показывает их физическое расположение на длинном лендинге. Кнопка «Highlight on page» вешает заметную контрастную фиолетовую обводку на все связанные блоки прямо в визуальной области холста.
В: Можно ли выборочно отключать функции плагина, если мне нужна только одна из них?
О: Да, в интерфейсе плагина реализована панель настроек с независимыми переключателями для каждой из 7 опций, а также мастер-тумблер включения/выключения всех модулей разом.
Ресурсы и ссылки
Rino’s Toolkit for Elementor — официальная страница бесплатного плагина в репозитории WordPress — упомянут в видео
Website Stylekit — созданное автором веб-приложение для генерации палитр и типографических шкал — упомянут в видео
Local WP — программа для локального развертывания сайтов WordPress — https://localwp.com
Elementor — визуальный конструктор сайтов для WordPress (версии V3 и Atomic V4) — упомянут в видео
Bricks Builder — альтернативный визуальный конструктор для WordPress — упомянут в видео
Claude / Codex — ИИ-модели и агенты, использованные автором для генерации кода плагина — упомянуты в видео
Конспект создан на основе видео «I Built an Elementor Addon with AI (Free Download)» канала Rino de Boer. Все права на оригинальный материал принадлежат авторам.Источник: https://www.youtube.com/watch?v=wDzYhUN2BUw
