Elementor MCP: как подключить ИИ-агента к WordPress и собрать сайт одним промтом. Пошагово

Сайт на WordPress обычно собирают долго: тема, блоки, тексты, картинки, мобильная версия. Если попросить обычный чат нарисовать страницу, он выдаст кусок кода, который придётся вставлять в виджет HTML. Править такую страницу в визуальном редакторе уже нельзя.

Elementor MCP решает именно это. Это мост между ИИ-агентом и сайтом: агент получает набор инструментов Elementor и строит страницы из настоящих контейнеров, заголовков, кнопок и картинок. Потом вы открываете страницу в обычном редакторе и правите всё сами. А если результат не нравится, просите сделать другую версию.

Об этом говорят сейчас: Elementor выпустил MCP, и подключение занимает несколько минут. Плагин сам готовит промт для агента, остаётся вставить его. Разбираем по шагам, что для этого нужно и где подводные камни.

Как всё устроено

Здесь четыре части, и у каждой своя роль:

• WordPress. Хранит и показывает сайт.
• Elementor. Визуальный конструктор, в котором живёт дизайн.
• Агент. В примере это Codex: он понимает задачу и выполняет работу.
• MCP. Соединение между агентом и сайтом. Расшифровка не нужна: считайте это мостом между ИИ-агентом и другой программой.

Проще всего запомнить так: агент это мозг, MCP это мост, Elementor это стройка.

Есть и похожий проект, Novamira. Он тоже подключает агента к WordPress, но даёт гораздо больше доступа: к файлам PHP, базе данных, плагинам и темам. Elementor MCP это набор инструментов только для страниц Elementor и части функций WordPress. Если нужны страницы, которые потом редактируют люди, начинать проще с Elementor MCP.

Что понадобится

• Сайт на WordPress. Подойдёт любой хостинг или свой сервер. Для пробы лучше новый пустой сайт.
• Плагин Elementor. В примере в редакторе видна кнопка Upgrade Now: платная версия не подключена.
• Тема с конструктором шапки и подвала. В примере это Solace.
• ИИ-агент с поддержкой MCP. В примере Codex из приложения ChatGPT. Модель GPT-6 Astra в нём доступна не на бесплатном тарифе: на экране тарифы Plus за 20 долларов в месяц, Pro за 100 и Business.
• Запас по лимитам. Сборка сайта съедает много.

Россия: что доступно и чем заменить

WordPress и Elementor ставятся на свой сервер, и тут ничего не мешает. Сложнее с агентом: Codex и другие сервисы OpenAI напрямую из России обычно недоступны, оплата подписки тоже затруднена.

Но сам Elementor MCP к Codex не привязан. На вкладке подключения есть Claude Code, Claude Desktop, Codex, Cursor и пункт Other, то есть подойдёт любой клиент, который умеет работать с MCP. Значит, можно взять агента, который запускается у вас и работает с открытой моделью на своём сервере, либо клиента, к которому подключаются российские модели.

Что при этом изменится, честно сказать нельзя: в примере проверен только Codex с Astra. Там он сам сгенерировал картинки для сайта. Без такой функции картинки придётся готовить заранее и загружать в медиатеку WordPress. Качество вёрстки у других моделей может оказаться другим, так что сначала пробуйте на тестовом сайте.

Что важно знать до старта

• Агент получает доступ к сайту. Плагин создаёт для него пароль приложения и вкладывает в промт подключения. Не показывайте этот промт посторонним и не оставляйте в общих чатах. Пробуйте на тестовом сайте, а перед работой на живом сделайте резервную копию.
• Полный доступ в агенте. В примере для сборки включён режим Full access: агент правит файлы и ходит в интернет без подтверждений. Приложение прямо предупреждает, что это повышает риск потери данных и утечки.
• Это дорого по лимитам. Сборка заняла около 12 минут, и кредиты закончились на полпути. Пришлось пополнить баланс и написать «продолжай». За всю работу лимит в примере кончался дважды.
• CSS-классы мешают правке. Если агент вешает их на текст и кнопки, такие элементы становятся нередактируемыми. Это нужно запретить в промте.
• Атомарный редактор лучше не включать. В примере его считают сырым для живых сайтов. Тема Solace отключает его сама.
• Контактная форма может не слать письма. Для этого нужна настройка SMTP.

Шаг 1. Ставим WordPress и входим в админку

Установите WordPress на хостинге: большинство хостингов делают это в несколько кликов. Данные для входа запишите, они понадобятся.

Админка открывается по адресу сайта с добавкой /wp-admin. Если пароль потерян, зайти можно из панели хостинга, там есть кнопка входа в WordPress.

После установки хостинг ставит свои плагины. В примере их отключили и удалили: уведомления от них только отвлекают. Для этого в разделе плагинов отмечаем их, выбираем «Deactivate» и «Delete».

Шаг 2. Ставим Elementor и тему

В разделе плагинов нажмите «Add Plugin», найдите Elementor, нажмите «Install now», затем «Activate». Мастер первичной настройки можно пропустить.

Теперь тема. Для работы агента тема не так важна, но лучше взять ту, где можно отдельно собрать шапку и подвал, а содержимое страниц оставить агенту. В примере это Solace: ставим и активируем, затем при желании ставим стартовые шаблоны.

Шаг 3. Настраиваем Elementor под агента

В настройках Elementor нужны две проверки.

Первая: вкладка Atomic Editor. Его не включаем: Solace по умолчанию его отключает. Если он всё же нужен, в примере советуют другие темы, например Hello Elementor или Astra, но для живого сайта это рискованно.

Вторая: вкладка Features. Опция Container должна быть Active. Иначе агент иногда собирает страницу из старых секций, а не из контейнеров. После переключения нажмите «Save Changes».

Шаг 4. Включаем MCP и подключаем агента

В боковом меню Elementor открываем вкладку «Elementor MCP» и включаем доступ MCP. Дальше выбираем агента из списка: Claude Code, Claude Desktop, Codex, Cursor или Other. Для выбранного агента нажимаем «Generate setup prompt». Плагин создаёт для сайта пароль приложения и вкладывает его в готовый промт.

Копируем промт и открываем агента. В примере перед промтом написано:

Хочу подключить Codex к Elementor MCP, вот промт.

Ниже вставляется сам промт: адрес сервера MCP, имя пользователя, пароль приложения и имя сервера в настройках. Агент может запросить разрешения: в примере выбрано «Allow for this conversation». Затем он записал подключение в файл настроек ~/.codex/config.toml, сам поправил поле заголовков на поддерживаемое http_headers и попросил перезапустить приложение.

После перезапуска проверяем связь простым вопросом:

Ты теперь подключён к нашему сайту?

Агент подтвердил подключение к сайту через Elementor MCP, успешно выполнил тестовый запрос на чтение и сообщил, что может смотреть и править страницы Elementor. Сайт при этом не менялся.

Шаг 5. Пишем бриф, а не «сделай красиво»

Слабый запрос вроде «сделай мне красивый сайт» заставляет агента угадывать всё: бизнес, аудиторию, структуру страниц, цвета и картинки. Сильный запрос это полное задание: чем занимается бизнес, для кого сайт, как он выглядит и что нельзя делать.

Хороший приём: сначала попросить агента улучшить сам промт и только потом запустить сборку. В примере описание задачи такое:

Хочу очень креативный сайт с эффектом раздельного экрана для моего бизнеса в сфере недвижимости. Нужна сильная продающая страница. Изображения должны сдвигаться и анимироваться при прокрутке. Стиль как у сайтов с наградами за дизайн. Градиент зелёного, синего и белого, шрифты и кнопки в роскошном стиле. Важно: не используй CSS-классы для текста, кнопок и фонов, мне нужно уметь менять все части сайта. CSS-классы можно только для изображений. Сгенерируй мне промт для этого.

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

Шаг 6. Запускаем сборку

Улучшенный промт копируем и вставляем в новое окно с припиской:

Построй этот сайт на моём домене через Elementor MCP.

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

По ходу агент задаёт вопросы, например, название агентства. В примере их пропустили, и он поставил заглушки. Спросил он и про атомарный редактор: ему ответили не использовать его, только стандартные виджеты и контейнеры. Доступ в интернет разрешили кнопкой «Always allow».

Сборка занимает от 5 до 20 минут, в зависимости от сложности. В примере результат был готов примерно через 12 минут, с остановкой на пополнение баланса.

Шаг 7. Смотрим результат и правим руками

Получился сайт с разделённым экраном, анимацией прокрутки изображений, зелёным градиентным блоком и формой контактов внизу. Агент указал, что названия и данные об агентстве остались заглушками.

Чтобы править, на странице нажимаем «Edit with Elementor». Дальше обычная работа в конструкторе:

• Текст. Кликаем по заголовку и печатаем.
• Стиль. Вкладка Style меняет шрифт и цвет, вкладка Advanced отступы.
• Элементы. Виджет перетаскивают мышкой: розовая линия показывает, куда он встанет. Правая кнопка мыши даёт дублирование и удаление.

Теперь проверьте, что агент не наставил лишнего. В примере нашлись два момента. Первый: в заголовках встречается тег <br>, который принудительно переносит строку. Это типичная привычка агентов, но не ошибка. Второй: блок с анимацией картинок использует собственный CSS, и менять такую картинку нужно аккуратно: выбрать её и загрузить свою в медиатеку.

Ещё одна находка: для формы контактов агент сам поставил плагин Contact Form 7 из каталога WordPress, а в страницу вставил его шорткод. Так он может ставить плагины, если это нужно задаче.

Шаг 8. Мобильная версия и новые страницы

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

Новые страницы тоже просим у агента:

Создай страницу «О нас» и страницу «Контакты» в том же дизайне. Не добавляй CSS-классы в новые элементы. И сделай небольшое мега-меню.

После этого страницы появляются в WordPress, но на сайте ничего не меняется: в меню их нужно добавить.

Шаг 9. Подключаем меню и шапку

В WordPress открываем «Appearance», затем «Menus». В примере главного меню ещё не было: создаём новое, называем его, добавляем страницы и отмечаем как основное.

Меню на странице сразу не появится: шапка собрана из элементов Elementor, а не конструктором шапки. Есть два пути.

Быстрый: в редакторе добавить виджет «Nav Menu» (в Solace он есть), выбрать меню и поправить цвет текста. Но такое меню работает только на одной странице, на остальных вернётся старое.

Правильный путь через конструктор Solace: «Customize», «Header builder», «Manage site builder», затем «Build now», выбрать «Entire website» и «Save and add template». Там собираем шапку: меню, логотип сайта, цвета. Удачную секцию можно сохранить как шаблон и вставить в другое место. После публикации меню видно на всех страницах сайта.

Итоги

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

Практические выводы:

• Бриф важнее всего: чем точнее задание, тем меньше времени и денег уйдёт на исправления.
• Запрет на CSS-классы для текста и кнопок надо повторять в каждом новом задании.
• Перед публикацией проверьте все страницы и форму контактов.
• Меню и шапку лучше сразу делать через конструктор темы.

Мы в Агентехе учим сотрудников подключать ИИ-агентов к рабочим инструментам, писать им точные задания и безопасно выдавать доступы. Как устроено обучение.