html2wp / Блог / Lovable на WordPress
Перенос Lovable на WordPress: проект, превращённый в настоящую тему
Перенос проекта Lovable на WordPress устроен так же, как перенос HTML на WordPress, только с одним дополнительным шагом. Старые проекты Lovable представляют собой React-приложения, и в их HTML нечего конвертировать: страница появляется только в браузере, когда выполнится JavaScript. Новые проекты (TanStack Start, с мая 2026 года) отрисовывают страницы на сервере, и html2wp конвертирует оба вида одинаково. Это руководство ведёт от такого проекта к теме WordPress, в которой остаётся ваш код, а не его переделка. Каждый шаг взят из настоящей конвертации, и оба её конца можно открыть.
Пример переноса Lovable на WordPress, открытый с обеих сторон
Всё, что описано ниже, взято из конвертации, которую мы действительно провели. Оригинал является приложением Lovable: bruce-banner.lovable.app, портфолио фотографа. Результат работает на WordPress: bruce.html2wp.dev. В его админку можно войти через /wp-admin с логином demo и паролем demo.
Конвертация дала пять страниц и пять записей на теме bruce-banner. Это укладывается в бесплатный тариф, который конвертирует до пяти страниц за раз и не требует ключа. Прежде чем читать дальше, откройте оба сайта рядом. Эта статья о разнице между ними, так что вы сможете измерить её сами.
Ещё две конвертации из Lovable открыты так же. Сначала spark-remix-kindred.lovable.app превратился в terra.html2wp.dev, магазин вязаной одежды на WooCommerce. Затем bloom-echo-remix.lovable.app превратился в soria.html2wp.dev, сайт свадебного фотографа. На всех трёх вход в админку WordPress: demo / demo.
Что именно здесь значит «1:1»
Код, который приложение Lovable собирает в браузере, и есть тот код, что попадает в тему. Никто не пересобирает ваши секции в виджеты конструктора страниц, поэтому вы не получаете постраничного приближения к дизайну. Все шаги ниже следуют из этого.
Что нужно компьютеру для переноса Lovable на WordPress
Сборка, работа браузера и все проверки идут на вашем компьютере. В сервис, который создаёт тему, уходит только собранный результат. Поэтому это не веб-сервис, куда вы загружаете ZIP, и у него есть требования, о которых стоит знать заранее:
- Node 20 или новее для сборки и локальных скриптов.
- Python 3 с пакетами Playwright и Pillow. Playwright управляет настоящим браузером, и именно так React-приложение превращается в HTML.
- Docker с командой
docker compose. Он запускает временный WordPress на вашем компьютере, и конвертер проверяет там тему, прежде чем вы её увидите. - php-cli, потому что каждый PHP-файл проходит проверку синтаксиса, прежде чем попасть в ZIP.
jq,curl,bashиtar. Целевой WordPress должен быть версии 6.6 или новее.
Плагин проверяет всё это на первом шаге и выводит два списка. В первом то, что он может установить сам внутри ваших папок. Во втором то, что решаете вы: Docker, более новый Node и запуск Docker. Вторую группу он никогда не устанавливает за вашей спиной.
Больше всего людей удивляет Docker
Другим конвертерам он не нужен, потому что они пропускают этот шаг. Здесь конвертер устанавливает созданную тему в настоящий WordPress и тестирует её там. Для этого и нужны браузер и контейнер. Если вы ищете пятиминутный инструмент в браузере, это не он.
Установите плагин
Мы публикуем плагин дважды, по одному на каждого агента. Скрипты и номер версии у Claude Code и Codex одинаковые. Выберите тот, которым пользуетесь.
Claude Code
/plugin marketplace add iOSDevSK/html2wp-cc-plugin /plugin install html2wp@html2wp
Затем один раз в терминале:
python3 -m playwright install chromium
Codex
codex plugin marketplace add iOSDevSK/html2wp-codex-plugin codex plugin add html2wp@html2wp
Для бесплатного тарифа больше ничего настраивать не нужно: ни ключа, ни регистрации, ни карты. Если вы не хотите работать в терминале, ту же конвертацию можно запустить в настольном приложении html2wp (руководство со скриншотами).
Как получить проект Lovable на свой диск
Адрес работающего сайта не поддерживается как вход, и это сделано намеренно. Копия опубликованной страницы хранит только отрисованный результат. Она теряет то, что знает исходный код: какие есть маршруты, из каких компонентов состоит сайт и что даёт сборка.
Поэтому на вход подаётся папка. Lovable синхронизирует ваш проект с репозиторием на GitHub. Подключите его, клонируйте, и проект у вас локально. Как бы ни выглядел интерфейс Lovable в этом месяце, вам нужен именно репозиторий: те же файлы, из которых Lovable собирает сайт.
git clone https://github.com/<you>/<your-lovable-project>.git cd <your-lovable-project>
Заранее запускать npm install или сборку не нужно. Конвертация сделает это сама.
Скажите «convert this project»
В этой папке, с открытым агентом, введите:
/html2wp:html2wp
convert this project
В Codex нет слеш-команды. Вместо неё скажите ему convert this project into a verified WordPress block theme, и он сам найдёт скилл. В Claude Code или Codex эта фраза и есть вся инструкция. Вы не пишете файл конфигурации и не выбираете команду сборки.
Flash занимает около 30 минут, Full около часа, в зависимости от числа страниц и скорости вашего компьютера. Процесс в основном идёт без вас и после каждого шага сообщает, где находится, так что тишины не ждите.
Что происходит с React при переносе Lovable на WordPress
Именно этот шаг добавляет проект Lovable.
У старого приложения Lovable (React и Vite) один index.html. Его body состоит из пустого элемента, в который монтируется React-приложение, и тега script, так что конвертировать нечего. Сначала конвертер собирает проект. Затем настоящий браузер проходит по каждому маршруту, а за ним следит рекордер. В результате получается плоский HTML на каждый маршрут, ровно то, что нужно остальному процессу. Новый проект на TanStack Start уже отрисовывает страницы на сервере. Конвертер всё равно собирает его и так же проходит по каждому маршруту.
Что записывает рекордер
- Состояние, которое есть только после работы JavaScript. Открытые аккордеоны, содержимое выпадающих меню, классы, которые меняет скрипт. Рекордер сохраняет их как данные на элементах, а небольшой универсальный рантайм воспроизводит их. Никто не пишет их вручную по памяти.
- Пороги прокрутки с точностью до пикселя. Шапка, которая меняется при
scrollY > 40, использует число, которое кто-то придумал. Рекордер находит его и точно вычисляет, где оно стоит. Округлённая догадка навсегда меняла бы шапку не в тот момент. - Связи вида «открыт может быть только один». Вы открываете A, затем B. Закрылся ли A? Запись каждого элемента по отдельности этого не покажет, поэтому рекордер проверяет это отдельно.
- Анимации при прокрутке сохраняются. Рекордер записывает их, и тема воспроизводит их точно как оригинал. Контент виден и без JavaScript, элемент скрывается только пока работает рантайм, а при
prefers-reduced-motionтема пропускает анимацию. Совпадение 1:1 мы измеряем в покое, когда анимации закончились.
Чего он не подделывает
- Поведение, которое не удалось записать, попадает в список. У каждой страницы он свой. Прочитайте его.
У этого шага своя проверка, потому что ни одна последующая проверка его не видит. Конвертер делает скриншот каждого маршрута вживую и сравнивает его со статической копией при ширине 1440, 820 и 390 пикселей. Если они различаются, шаг не проходит. Все последующие шаги измеряют расстояние от копии до WordPress, поэтому дефект, сделанный здесь, прошёл бы мимо них всех.
Проверка, которую нельзя пропустить
Когда автоматические проверки закончились, конвертация ещё не завершена. Конвертер помещает каждую страницу на одно изображение рядом с оригиналом, и вы читаете каждое сверху донизу.
В одной конвертации не хватало целой секции ниже по странице, а попиксельное сравнение показало разницу всего 0,4 %. Такая страница проходит проверку без секции. Три вида дефектов автоматические проверки по своей природе не видят. Первый: элемент управления, который выглядит идеально, но ничего не делает. Второй: значение, жёстко взятое с той единственной страницы, из которой сделан шаблон. Третий: всё, что проявляется только после прокрутки, клика или отправки формы.
Проверьте также, можно ли править контент, а не только правильно ли он выглядит. Страница может совпадать до пикселя, и всё же владелец не сможет править её FAQ или сетку преимуществ. Мы видели это вживую: аккордеон с пятью вопросами выглядел идентично, но ни один редактор не давал его править. Проверка, которая смотрела только на внешний вид, его пропустила. Поэтому для каждой страницы спросите себя, можно ли править из wp-admin каждую повторяющуюся группу и каждый блок текста.
Установите тему
В папке вашего проекта появляются ZIP с темой и рядом с ним CONVERSION-REPORT.md. Больше ничего. Рабочая папка со сборкой лежит вне проекта, в папке кеша, так что ваш репозиторий остаётся чистым. Отчёт является исключением, потому что его читатель вы. В нём перечислено, что охватила конвертация, что нашла проверка, каждое предупреждение (включая допустимые) и что ещё не закрыто.
В WordPress откройте Внешний вид → Темы → Добавить новую тему → Загрузить тему, выберите ZIP и активируйте его. Тема самостоятельная. Страницы, блог, формы, меню, SEO и редиректы написаны её собственным кодом. Для работы ей не нужен плагин, и она никогда не обращается к нашим серверам.
Правка сайта после переноса Lovable на WordPress: три пути
Записи блога становятся обычными записями WordPress, поэтому вы сразу пишете их в блочном редакторе. Текст страниц остаётся в вашем HTML, и для его правки есть два варианта, о которых стоит знать. Один из них конструктор страниц.
| Путь | Что вы получаете | Чего это вам стоит |
|---|---|---|
| Только тема | Ваш код без изменений. Ни плагина, ни зависимости, ничего не нужно продлевать. Записи вы правите в блочном редакторе. | Без плагина текст страниц меняется в HTML. Если клиент хочет править его сам, достаточно установить Visual Edit (Lite бесплатный). |
| Visual Edit, наш плагин | Вы нажимаете на заголовок прямо на странице, печатаете поверх и сохраняете. Тексты, изображения, ссылки, формы и меню вы правите там, где они стоят, а код остаётся прежним. Lite бесплатен и не требует ключа. | Это ещё один плагин в WordPress. Lite хранит 10 шагов истории и не имеет ИИ-чата. Pro стоит 59 € в год. |
| Elementor или другой конструктор страниц |
Любой, кто знает Elementor, может сам переставить страницу, а знают его многие. Для клиента, который будет сам менять макет, это знакомство имеет ценность. | Код пересобирается в виджеты конструктора и больше не ваш. После этого сайт не отображается без Elementor, и вам достаются его структура, его CSS и его обновления. |
Если вы конвертируете ради того, чтобы сохранить дизайн, конструктор страниц как раз его и разрушает. Ручной перенос дизайна в конструктор и есть тот шаг, после которого сайт перестаёт быть похож на дизайн, и поэтому этот конвертер существует. Но если дизайн лишь отправная точка и клиент в следующем квартале всё равно переделает половину, смело давайте ему Elementor.
Lite или Pro, если вы выбрали Visual Edit
| Lite (бесплатно) | Pro | |
|---|---|---|
| Правка контента по клику | ✓ | ✓ |
| Формы, меню, SEO-поля | ✓ | ✓ |
| Правка через ИИ-чат | – | ✓, с вашим API-ключом |
| Экспорт темы | – | ✓ |
| Защита форм Turnstile | – | ✓ |
| ИИ-редактирование изображений и анимации из них | – | ✓ |
| История правок | 10 шагов | 300 шагов |
ИИ-чат в Pro работает на вашем собственном API-ключе. Мы не продаём вам токены, и за их использование вы рассчитываетесь напрямую со своим провайдером.
Lovable или WordPress? Выбирать не обязательно
Обычно вопрос ставят как «или одно, или другое». Для контентного сайта так быть не должно. В Lovable вы быстро делаете дизайн. В WordPress сайт живёт годами, и правит его кто-то другой. Перенос Lovable на WordPress сохраняет первое и переносит второе. Тема работает на любом хостинге WordPress, так что сайту больше не нужно жить там, где вы его сделали.
Переносится сайт: страницы, блог, формы, меню, SEO и редиректы. Не переносится приложение за ним: вход, база данных и вызовы вашего собственного API. Если ваш проект Lovable в основном из этого и состоит, оставьте его в Lovable. Магазин находится посередине. С лицензией Pro его каталог становится WooCommerce, как это было у Terra Studios.
Сколько стоит конвертация Lovable в WordPress и от чего она отказывается
Бесплатный тариф доступен всем, без ключа и регистрации: три конвертации по пять страниц и всего пять повторных запусков. Оба числа считаются на IP-адрес, поэтому офис с одним общим адресом получает один лимит на всех. Бесплатный тариф нужен, чтобы попробовать инструмент, для личных сайтов и некоммерческой работы.
Лицензия Pro снимает лимит страниц и делает конвертации и повторные запуски неограниченными. Она также добавляет шаг, который превращает магазин в WooCommerce. В бесплатном тарифе этого шага нет вовсе: приложение сразу отказывается бесплатно конвертировать сайт с магазином, а не делает его наполовину. Pro стоит 49 € в месяц или 490 € в год, цены есть на странице с ценами. Во время беты первый платёж на 30 % дешевле, а ключ приходит на почту.
О двух отказах стоит знать заранее. React-проект, у которого маршруты существуют только для каждой записи (/product/:id без данных для отрисовки), является веб-приложением, а не сайтом для конвертации. Конвертер открыто от него отказывается и не выдаёт один случайный экземпляр шаблона. И это бета: проверки ловят большую часть различий, но не все. Поэтому постраничная проверка входит в процесс, а не служит необязательной полировкой.
Пошаговое руководство по всему процессу есть в документации к приложению html2wp. Три конвертации из Lovable, которые можно открыть с обеих сторон, есть в примере в начале этой статьи.