З Lovable у 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.

Що потрібно комп’ютеру, щоб перенести 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. Другу групу він ніколи не встановлює за вашою спиною.

Встановіть плагін

Ми публікуємо плагін двічі, по одному для кожного агента. Скрипти й номер версії однакові для 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 немає slash-команди. Натомість скажіть йому convert this project into a verified WordPress block theme, і він сам знайде навичку. У Claude Code чи Codex це речення і є всією інструкцією. Ви не пишете конфігураційний файл і не вибираєте команду збірки.

Flash триває близько 30 хвилин, а Full близько години, залежно від кількості сторінок і швидкості вашого комп’ютера. Здебільшого він працює без вашої участі й повідомляє, де перебуває, після кожного кроку, тож тиші не чекайте.

Що відбувається з React під час перенесення з Lovable у WordPress

Саме цей крок додає проєкт Lovable.

Старіший застосунок Lovable (React і Vite) має один index.html. Його тіло містить порожній елемент, у який монтується застосунок React, плюс тег скрипту, тож конвертувати нічого. Спершу конвертер збирає проєкт. Потім справжній браузер проходить кожен маршрут, а рекордер за цим спостерігає. Результатом є плаский 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, і для його редагування є два варіанти, про які варто знати. Один із них є конструктором сторінок.

Якщо ви конвертуєте для того, щоб дизайн уцілів, конструктор сторінок якраз його й знищує. Ручне перенесення дизайну в конструктор є тим кроком, після якого сайт перестає бути схожим на дизайн, і тому цей конвертер існує. Але якщо дизайн лише відправна точка, а клієнт однаково перебудує половину наступного кварталу, сміливо дайте йому Elementor.

Lite чи Pro, якщо ви вибрали Visual Edit

AI-чат у Pro працює на вашому власному API-ключі. Ми не продаємо вам токени, а вартість їх використання ви розраховуєте безпосередньо зі своїм провайдером.

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, які можна відкрити з обох боків, наведено в прикладі на початку цієї статті.