Z Lovable do WordPressa: projekt przeniesiony do prawdziwego motywu

Przykład konwersji z Lovable do WordPressa, otwarty z obu stron

Wszystko poniżej opisuje konwersję, którą naprawdę przeprowadziliśmy. Oryginał to aplikacja Lovable: bruce-banner.lovable.app, portfolio fotograficzne. Wynik to bruce.html2wp.dev, działający na WordPressie. Do panelu administracyjnego wejdziesz pod /wp-admin z nazwą użytkownika demo i hasłem demo.

Konwersja dała pięć stron i pięć wpisów na motywie bruce-banner. To mieści się w wersji darmowej, która konwertuje do pięciu stron w jednej konwersji i nie potrzebuje klucza. Zanim zaczniesz czytać dalej, otwórz obie strony obok siebie. Ten artykuł jest o różnicy między nimi, więc możesz ją zmierzyć samodzielnie.

Dwie kolejne konwersje z Lovable są otwarte w ten sam sposób. Najpierw spark-remix-kindred.lovable.app stało się terra.html2wp.dev, sklepem z dzianiną na WooCommerce. Potem bloom-echo-remix.lovable.app stało się soria.html2wp.dev, stroną fotografa ślubnego. Na wszystkich trzech login do panelu WordPress to demo / demo.

Czego potrzebuje komputer do konwersji z Lovable do WordPressa

Build, praca w przeglądarce i wszystkie kontrole działają na twoim komputerze. Do usługi, która generuje motyw, trafia tylko zbudowany wynik. To więc nie jest usługa internetowa, do której wgrywasz ZIP, i ma wymagania, o których warto wiedzieć z góry:

• Node 20 lub nowszy do buildu i lokalnych skryptów.
• Python 3 z pakietami Playwright i Pillow. Playwright steruje prawdziwą przeglądarką i właśnie tak aplikacja React zamienia się w HTML.
• Docker z poleceniem docker compose. Uruchamia tymczasowy WordPress na twoim komputerze, a konwerter sprawdza w nim motyw, zanim go zobaczysz.
• php-cli, bo każdy plik PHP przechodzi sprawdzenie składni, zanim trafi do ZIP-a.
• jq, curl, bash i tar. Docelowy WordPress musi mieć wersję 6.6 lub nowszą.

Wtyczka sprawdza to wszystko w pierwszym kroku i wypisuje dwie listy. Pierwsza pokazuje, co może zainstalować sama w twoich folderach. Druga pokazuje, o czym musisz zdecydować: Docker, nowszy Node i uruchomienie Dockera. Drugiej grupy nigdy nie instaluje za twoimi plecami.

Instalacja wtyczki

Wtyczkę publikujemy dwa razy, raz dla każdego agenta. Skrypty i numer wersji są te same dla Claude Code i Codex. Wybierz ten, którego używasz.

Claude Code

/plugin marketplace add iOSDevSK/html2wp-cc-plugin
/plugin install html2wp@html2wp

Potem jeden raz w terminalu:

python3 -m playwright install chromium

Codex

codex plugin marketplace add iOSDevSK/html2wp-codex-plugin
codex plugin add html2wp@html2wp

W wersji darmowej nie ma nic więcej do ustawienia: bez klucza, bez rejestracji, bez karty. Jeśli wolisz nie pracować w terminalu, tę samą konwersję uruchomisz w aplikacji desktopowej html2wp (poradnik ze zrzutami ekranu).

Jak pobrać projekt Lovable na dysk

Adres działającej strony nie jest obsługiwanym wejściem i jest tak celowo. Kopia opublikowanej strony zachowuje tylko wyrenderowany wynik. Traci to, co wie kod źródłowy: jakie ścieżki istnieją, jakie są komponenty i co produkuje build.

Wejściem jest więc folder. Lovable synchronizuje twój projekt z repozytorium na GitHubie. Połącz je, sklonuj i masz projekt lokalnie. Niezależnie od tego, jak w tym miesiącu wygląda interfejs Lovable, repozytorium jest tym, czego chcesz: to te same pliki, z których Lovable buduje stronę.

git clone https://github.com/<you>/<your-lovable-project>.git
cd <your-lovable-project>

Nie musisz najpierw uruchamiać npm install ani buildu. Konwersja robi to sama.

Powiedz „convert this project”

W tym folderze, z otwartym agentem, wpisz:

/html2wp:html2wp

convert this project

Codex nie ma polecenia z ukośnikiem. Zamiast tego powiedz mu convert this project into a verified WordPress block theme, a sam znajdzie skill. W Claude Code i Codex to zdanie jest całą instrukcją. Nie piszesz pliku konfiguracyjnego i nie wybierasz polecenia buildu.

Flash trwa około 30 minut, a Full około godziny, zależnie od liczby stron i szybkości twojego komputera. Działa głównie bez twojego udziału i po każdym kroku zgłasza, gdzie jest, więc nie spodziewaj się ciszy.

Co dzieje się z Reactem przy konwersji z Lovable do WordPressa

To jest krok, który dodaje projekt Lovable.

Starsza aplikacja Lovable (React i Vite) ma jeden plik index.html. Jego treść to pusty element, w którym montuje się aplikacja React, i tag skryptu, więc nie ma czego konwertować. Najpierw konwerter buduje projekt. Potem prawdziwa przeglądarka przechodzi przez każdą ścieżkę, a rejestrator to obserwuje. Wynikiem jest płaski HTML dla każdej ścieżki, dokładnie to, czego potrzebuje reszta procesu. Nowszy projekt na TanStack Start renderuje strony już na serwerze. Konwerter i tak go buduje i przechodzi każdą ścieżkę tak samo.

Co przechwytuje rejestrator

• Stan, który istnieje dopiero po uruchomieniu JavaScriptu. Otwarte akordeony, zawartość rozwijanych menu, klasy zmieniane przez skrypt. Rejestrator zapisuje je jako dane na elementach, a mały uniwersalny runtime je odtwarza. Nikt nie pisze ich ręcznie z pamięci.
• Progi przewijania, co do piksela. Nagłówek, który zmienia się przy scrollY > 40, używa liczby, którą ktoś wymyślił. Rejestrator ją znajduje i ustala dokładnie, gdzie leży. Zaokrąglony strzał zmieniałby nagłówek w złym momencie, na zawsze.
• Relacje „otwarty może być tylko jeden”. Otwierasz A, potem B. Czy A się zamknęło? Zapis każdego elementu osobno tego nie powie, więc rejestrator testuje to oddzielnie.
• Animacje przy przewijaniu przetrwają. Rejestrator je przechwytuje, a motyw odtwarza dokładnie jak oryginał. Treść jest widoczna bez JavaScriptu, element ukrywa się tylko wtedy, gdy działa runtime, a przy prefers-reduced-motion motyw pomija animację. Zgodność 1:1 mierzymy w spoczynku, po zakończeniu animacji.

Czego nie udaje

• Zachowanie, którego nie udało się zarejestrować, trafia na listę. Każda strona ma własną. Przeczytaj ją.

Ten krok ma własną kontrolę, bo żadna późniejsza kontrola go nie widzi. Konwerter robi zrzut ekranu każdej ścieżki na żywo i porównuje go ze statycznym zapisem przy szerokościach 1440, 820 i 390 pikseli. Jeśli się różnią, krok nie przechodzi. Każdy późniejszy krok mierzy od zapisu do WordPressa, więc błąd powstały tutaj przeszedłby przez nie wszystkie.

Przegląd, którego nie pominiesz

Gdy automatyczne kontrole się kończą, konwersja jeszcze się nie skończyła. Konwerter umieszcza każdą stronę na jednym obrazie obok oryginału, a ty czytasz każdy od góry do dołu.

W jednej konwersji brakowało całej sekcji niżej na stronie, a porównanie pikseli pokazało różnicę tylko 0,4%. Taka strona przechodzi kontrolę bez tej sekcji. Z samej swojej natury automatyczne kontrole nie widzą trzech rodzajów błędów. Pierwszy to kontrolka, która wygląda idealnie, ale nic nie robi. Drugi to wartość wpisana na sztywno z jednej strony, z której powstał szablon. Trzeci to wszystko, co pojawia się dopiero po przewinięciu, kliknięciu albo wysłaniu formularza.

Oprócz wyglądu sprawdź też, czy da się edytować treść. Strona może zgadzać się co do piksela, a właściciel i tak może nie móc edytować jej FAQ albo siatki funkcji. Widzieliśmy to na żywo: akordeon z pięcioma pytaniami wyglądał identycznie, ale żaden edytor go nie oferował. Przegląd, który patrzył tylko na wygląd, to przepuścił. Dlatego przy każdej stronie pytaj, czy każdą powtarzającą się grupę i każdy blok tekstu da się edytować z wp-admin.

Instalacja motywu

W folderze projektu pojawia się ZIP z motywem, a obok niego CONVERSION-REPORT.md. Nic więcej. Folder roboczy z buildem leży poza twoim projektem, w folderze cache, więc twoje repozytorium zostaje czyste. Raport to wyjątek, bo jego czytelnikiem jesteś ty. Wymienia, co objęła konwersja, co znalazł przegląd, każde ostrzeżenie (także te akceptowalne) i to, co jeszcze jest otwarte.

W WordPressie przejdź do Wygląd → Motywy → Dodaj nowy → Wyślij motyw na serwer, wybierz ZIP i go włącz. Motyw jest samodzielny. Strony, blog, formularze, menu, SEO i przekierowania to jego własny kod. Do działania nie potrzebuje żadnej wtyczki i nigdy nie łączy się z żadnym naszym serwerem.

Edycja strony po przeniesieniu z Lovable do WordPressa: trzy drogi

Wpisy na blogu stają się zwykłymi wpisami WordPressa, więc od razu piszesz je w edytorze blokowym. Tekst stron zostaje w twoim HTML i do jego edycji są dwie opcje, które warto znać. Jedna z nich to page builder.

Jeśli konwertujesz po to, żeby projekt przetrwał, page builder jest dokładnie tym, co go niszczy. Ręczne przenoszenie projektu do buildera to krok, po którym strona przestaje wyglądać jak projekt, i właśnie dlatego ten konwerter istnieje. Ale jeśli projekt to tylko punkt wyjścia, a klient i tak przebuduje połowę w następnym kwartale, śmiało daj mu Elementora.

Lite czy Pro, jeśli wybierasz Visual Edit

Czat AI w Pro działa na twoim własnym kluczu API. Nie sprzedajemy ci tokenów, a koszt ich użycia rozliczasz bezpośrednio ze swoim dostawcą.

Lovable czy WordPress? Nie musisz wybierać

Zwykle przedstawia się to jako jedno albo drugie. Przy stronie z treścią nie musi tak być. W Lovable szybko robisz projekt. W WordPressie strona żyje latami, a edytuje ją ktoś inny. Konwersja zachowuje pierwsze i przenosi drugie. Motyw działa na każdym hostingu WordPress, więc strona nie musi już mieszkać tam, gdzie ją zbudowano.

Przenosi się strona internetowa: strony, blog, formularze, menu, SEO i przekierowania. Nie przenosi się aplikacja za nią: logowanie, baza danych i wywołania twojego własnego API. Jeśli twój projekt Lovable to głównie to, zostaw go w Lovable. Sklep leży pośrodku. Z licencją Pro jego katalog staje się WooCommerce, jak w przypadku Terra Studios.

Ile kosztuje konwersja z Lovable do WordPressa i czego odmawia

Wersja darmowa jest dostępna dla każdego, bez klucza i bez rejestracji: trzy konwersje po pięć stron i łącznie pięć ponownych uruchomień. Obie liczby liczą się na adres IP, więc biuro dzielące jeden adres dostaje jeden przydział dla wszystkich. Wersja darmowa służy do wypróbowania narzędzia, stron prywatnych i pracy niekomercyjnej.

Licencja Pro znosi limit stron, a konwersje i ponowne uruchomienia są bez limitu. Dodaje też krok, który zamienia sklep w WooCommerce. Tego kroku w ogóle nie ma w wersji darmowej: aplikacja od razu odmawia darmowej konwersji strony ze sklepem, zamiast zrobić ją w połowie. Pro kosztuje 49 € miesięcznie albo 490 € rocznie, a ceny są na stronie z cennikiem. W czasie bety pierwsza płatność jest o 30% tańsza, a klucz przychodzi e-mailem.

Dwie odmowy warto znać z góry. Projekt React, którego ścieżki istnieją tylko dla pojedynczych rekordów (/product/:id bez danych do wyrenderowania), to aplikacja internetowa, a nie strona do konwersji. Konwerter otwarcie jej odmawia, zamiast dostarczyć jedną losową instancję szablonu. A to jest beta: kontrole wyłapują większość różnic, nie wszystkie. Dlatego przegląd strona po stronie jest częścią procesu, a nie opcjonalnym szlifem.

Poradnik krok po kroku dla całego procesu jest w dokumentacji aplikacji html2wp. Trzy konwersje z Lovable, które możesz otworzyć z obu stron, są w przykładzie na początku tego artykułu.