Z Lovable do WordPressa: krok po kroku w aplikacji html2wp
Ten poradnik pokazuje, jak w aplikacji html2wp przenieść projekt Lovable do WordPressa. Nie potrzebujesz terminala ani programowania. Dodajesz projekt jako ZIP, wybierasz Flash albo Full, a na końcu pobierasz gotowy motyw WordPress, który wygląda jak twój projekt.
Czego potrzebujesz, żeby przenieść Lovable do WordPressa w aplikacji
- Mac z procesorem Apple (M1 lub nowszy) i macOS 12 lub nowszy.
- Konto ChatGPT. Konwersję wykonuje AI z twojej własnej subskrypcji, więc nie płacisz nam za kredyty ani tokeny.
- Projekt Lovable jako ZIP albo folder z kodem źródłowym. Jak go zdobyć, opisujemy niżej.
- Miejsce na dysku. Każda trwająca konwersja zajmuje kilka GB.
Nie musisz wcześniej instalować Docker Desktop, bo aplikacja w razie potrzeby sama go pobiera i instaluje. Wersja darmowa konwertuje trzy strony po maksymalnie pięć podstron, co wystarczy, żeby przenieść małą stronę z Lovable do WordPressa. Do pracy dla klientów, większych stron i sklepu WooCommerce potrzebujesz licencji Pro ze strony z cennikiem.
Instalacja aplikacji html2wp
Pobierz aplikację na Maca, otwórz plik DMG i przeciągnij html2wp do folderu Aplikacje. W tym poradniku nazwy przycisków są zapisane dokładnie tak, jak widać je na ekranie.
Przygotowanie środowiska
W ustawieniach aplikacji (Settings) kliknij Prepare environment. Aplikacja w razie potrzeby pobiera i uruchamia Dockera, a potem wczytuje środowisko konwersji oraz obrazy WordPressa i bazy danych. Za pierwszym razem trwa to kilka minut. Mac może zapytać o hasło, a Docker pokazuje swoje warunki licencji.
Gdy wszystko jest gotowe, aplikacja pokazuje „Ready to work”, a przycisk zmienia się na Repair environment. Potrzebujesz go tylko wtedy, gdy środowisko później się zepsuje.
Logowanie przez ChatGPT
Kliknij Connect with ChatGPT. Aplikacja pokazuje kod, a przycisk Open sign-in page otwiera stronę OpenAI. Zaloguj się tam kontem ChatGPT i wpisz kod z aplikacji. Hasło wpisujesz tylko na stronie OpenAI, więc aplikacja nigdy go nie widzi.
Po zalogowaniu wybierz Conversion model i Reasoning effort albo zostaw ustawienia domyślne. Jeśli masz licencję Pro, wpisz klucz w ustawieniach i kliknij Save & check. Wersja darmowa nie potrzebuje klucza.
Twój projekt Lovable w aplikacji
Aplikacja potrzebuje plików źródłowych projektu, a nie adresu działającej strony. Lovable synchronizuje projekt z repozytorium na GitHubie. Otwórz je na GitHubie i pobierz przez Code → Download ZIP. Nie musisz budować projektu ani uruchamiać npm install, bo aplikacja robi to sama.
W aplikacji kliknij New project (⌘N). W sekcji Output zostaw HTML WordPress theme i wybierz Import a ZIP albo Choose a folder, jeśli projekt jest rozpakowany. Aplikacja pracuje na kopii, więc twoje oryginalne pliki zostają bez zmian.
Flash albo Full przy konwersji z Lovable do WordPressa
Na ekranie projektu wybierasz, jak dokładnie aplikacja ma przenieść stronę z Lovable do WordPressa. Flash jest domyślny: każdy krok działa raz i trwa to około pół godziny. Full uruchamia każdą kontrolę i próbuje naprawić znalezione błędy, więc trwa około godziny. Dokładny czas zależy od liczby stron i szybkości twojego Maca.
Jeśli nie potrzebujesz WordPressa, przełącz typ na Astro 5. Aplikacja zbuduje wtedy statyczną stronę, którą wdrożysz na Cloudflare Pages prosto z aplikacji.
Jak przebiega konwersja
W trakcie konwersji zakładka Overview pokazuje kroki, nad którymi pracuje wtyczka konwersji, i poprawki, które zrobiła sama. Przez większość czasu działa bez ciebie. Niezależnie od tego, czy projekt Lovable to starsza aplikacja React, czy nowszy projekt na TanStack Start, aplikacja najpierw go buduje, otwiera w przeglądarce i zapisuje każdą stronę jako gotowy HTML. Dopiero potem zamienia ten HTML w motyw.
Żeby zrobić przerwę, kliknij Stop conversion, a potem wznów przyciskiem Continue. Jeśli wtyczka sama zatrzyma się na którymś kroku, Repair and continue pozwala jej naprawić błąd i działać dalej.
Sprawdzenie strony z Lovable względem WordPressa
Zakładka Compare (Porównaj) pokazuje każdą stronę oryginału obok wersji WordPress, w szerokości desktopowej (Desktop · 1440) i mobilnej (Mobile · 390), z różnicą w procentach. Przejrzyj każdą stronę samodzielnie. Automatyczne kontrole wyłapują większość różnic, ale nie wszystkie: w jednej konwersji brakowało całej sekcji, a różnica wynosiła tylko 0,4%.
W zakładce Preview (Podgląd) przycisk Open website otwiera lokalną stronę WordPress, a WordPress admin jej kokpit. Jeśli chcesz coś zmienić, wpisz to w czat po prawej. Zmiana pojawia się w podglądzie w ciągu kilku sekund. Potem kliknij Make release, a aplikacja spakuje motyw dokładnie tak, jak widzisz go w podglądzie.
Eksport motywu WordPress po konwersji z Lovable
Po konwersji z Lovable do WordPressa gotowe pliki są w zakładce Exports (Eksporty). Przy motywie WordPress kliknij Save i zapisz ZIP. Znajdziesz tam też raport z konwersji w PDF, ZIP z oryginalnym projektem, a po konwersji Flash także projekt Astro 5.
W WordPressie przejdź do Wygląd → Motywy → Dodaj nowy → Wyślij motyw na serwer, wybierz ZIP i włącz motyw. Strony, blog, formularze, menu, SEO i przekierowania są częścią motywu i działają bez wtyczki.
Jeśli chcesz, żeby klient edytował teksty i obrazy kliknięciem bezpośrednio na stronie, dodaj edytor Visual Edit. Jeśli wolisz pracować z agentem w terminalu, tę samą konwersję opisuje poradnik z wtyczką dla Claude Code i Codex.