Lovable ke WordPress: proyek yang dikonversi menjadi tema sungguhan

Contoh Lovable ke WordPress yang bisa Anda buka di kedua sisi

Semua yang dijelaskan di bawah berasal dari konversi yang benar-benar kami jalankan. Aslinya adalah aplikasi Lovable: bruce-banner.lovable.app, sebuah portofolio fotografi. Hasilnya adalah bruce.html2wp.dev, yang berjalan di WordPress. Anda bisa masuk ke admin-nya di /wp-admin dengan username demo dan password demo.

Konversi itu menghasilkan lima halaman dan lima post dengan tema bruce-banner. Jumlah itu masih masuk paket gratis, yang mengonversi hingga lima halaman per konversi tanpa kunci. Buka kedua situs berdampingan sebelum lanjut membaca. Artikel ini membahas perbedaan di antara keduanya, jadi Anda bisa mengukurnya sendiri.

Dua konversi Lovable lain juga terbuka dengan cara yang sama. Pertama, spark-remix-kindred.lovable.app menjadi terra.html2wp.dev, toko pakaian rajut di WooCommerce. Lalu bloom-echo-remix.lovable.app menjadi soria.html2wp.dev, situs fotografer pernikahan. Di ketiganya, login admin WordPress adalah demo / demo.

Kebutuhan komputer Anda untuk konversi Lovable ke WordPress

Build, pekerjaan di browser, dan semua pemeriksaan berjalan di komputer Anda. Hanya hasil build yang dikirim ke layanan yang menghasilkan tema. Jadi ini bukan layanan web tempat Anda mengunggah ZIP, dan ada kebutuhan yang perlu Anda ketahui sejak awal:

• Node 20 atau lebih baru untuk build dan skrip lokal.
• Python 3 dengan paket Playwright dan Pillow. Playwright menjalankan browser sungguhan, dan dengan cara itulah aplikasi React berubah menjadi HTML.
• Docker dengan perintah docker compose. Docker menyalakan WordPress sementara di komputer Anda, dan konverter memeriksa tema di sana sebelum Anda melihatnya.
• php-cli, karena setiap file PHP melewati pemeriksaan sintaks sebelum masuk ke ZIP.
• jq, curl, bash, dan tar. WordPress tujuan harus versi 6.6 atau lebih baru.

Plugin memeriksa semua ini di langkah pertama dan menampilkan dua daftar. Daftar pertama berisi apa yang bisa dipasangnya sendiri di dalam folder Anda. Daftar kedua berisi apa yang harus Anda putuskan: Docker, Node yang lebih baru, dan menyalakan Docker. Kelompok kedua ini tidak pernah dipasang diam-diam.

Pasang plugin

Kami merilis plugin ini dua kali, satu untuk tiap agen. Skrip dan nomor versinya sama untuk Claude Code dan Codex. Pilih yang Anda pakai.

Claude Code

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

Lalu, sekali saja, di terminal:

python3 -m playwright install chromium

Codex

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

Untuk paket gratis tidak ada lagi yang perlu disiapkan: tanpa kunci, tanpa pendaftaran, tanpa kartu. Jika Anda tidak ingin bekerja di terminal, konversi yang sama bisa dijalankan di aplikasi desktop html2wp (panduan dengan screenshot).

Cara memindahkan proyek Lovable ke disk Anda

Alamat situs yang sudah online tidak didukung sebagai input, dan itu disengaja. Salinan halaman yang sudah terbit hanya menyimpan hasil render. Yang hilang adalah apa yang diketahui kode sumber: route apa saja yang ada, apa saja komponennya, dan apa yang dihasilkan build.

Jadi inputnya adalah folder. Lovable menyinkronkan proyek Anda ke repositori GitHub. Hubungkan, clone, dan proyek sudah ada di komputer Anda. Seperti apa pun tampilan Lovable bulan ini, repositori itulah yang Anda butuhkan: file yang sama yang dipakai Lovable untuk mem-build situs.

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

Anda tidak perlu menjalankan npm install atau build lebih dulu. Konversi melakukannya sendiri.

Ketik “convert this project”

Di folder itu, dengan agen Anda terbuka, ketik:

/html2wp:html2wp

convert this project

Codex tidak punya slash command. Sebagai gantinya, tulis convert this project into a verified WordPress block theme dan Codex akan menemukan skill-nya sendiri. Di Claude Code maupun Codex, kalimat itulah seluruh instruksinya. Anda tidak menulis file konfigurasi dan tidak memilih perintah build.

Flash butuh sekitar 30 menit dan Full sekitar satu jam, tergantung jumlah halaman dan kecepatan komputer Anda. Sebagian besar prosesnya berjalan tanpa Anda. Setelah tiap langkah, plugin melaporkan posisinya, jadi jangan heran kalau ia tidak diam.

Apa yang terjadi pada React saat konversi Lovable ke WordPress

Inilah langkah tambahan dari proyek Lovable.

Aplikasi Lovable versi lama (React dan Vite) hanya punya satu index.html. Body-nya berisi elemen kosong tempat aplikasi React dipasang, ditambah satu tag script, jadi tidak ada yang bisa dikonversi. Pertama, konverter mem-build proyek. Lalu browser sungguhan menelusuri setiap route sementara sebuah perekam mengamati. Hasilnya adalah HTML datar per route, persis yang dibutuhkan sisa proses. Proyek baru di TanStack Start sudah merender halamannya di server; konverter tetap mem-build-nya dan menelusuri setiap route dengan cara yang sama.

Apa yang direkam

• State yang baru ada setelah JavaScript berjalan. Accordion yang terbuka, isi dropdown, class yang diubah script. Perekam menyimpannya sebagai data pada elemen, dan runtime kecil yang generik memutarnya kembali. Tidak ada yang menulisnya ulang dari ingatan.
• Ambang scroll, sampai ke piksel. Header yang berubah pada scrollY > 40 memakai angka yang dipilih seseorang. Perekam menemukannya dan menghitung letak persisnya. Tebakan yang dibulatkan akan mengubah header di saat yang salah, selamanya.
• Hubungan “hanya satu yang boleh terbuka”. Anda membuka A, lalu B. Apakah A tertutup? Merekam tiap elemen secara terpisah tidak bisa menjawabnya, jadi perekam mengujinya sendiri.
• Animasi saat scroll tetap ada. Perekam menangkapnya, dan tema memutarnya persis seperti aslinya. Konten tetap terlihat tanpa JavaScript, elemen hanya disembunyikan selama runtime berjalan, dan dengan prefers-reduced-motion tema melewati animasinya. Kecocokan 1:1 kami ukur saat halaman diam, setelah animasi selesai.

Apa yang tidak dipalsukan

• Perilaku yang tidak bisa direkam masuk ke daftar. Setiap halaman punya daftarnya sendiri. Bacalah.

Langkah ini punya pemeriksaan sendiri, karena tidak ada pemeriksaan berikutnya yang bisa melihatnya. Konverter mengambil screenshot setiap route secara live dan membandingkannya dengan rekaman statisnya pada lebar 1440, 820, dan 390 piksel. Kalau ada perbedaan, langkah ini gagal. Semua langkah berikutnya mengukur dari rekaman ke WordPress, jadi cacat yang muncul di sini akan lolos dari semuanya.

Pemeriksaan yang tidak boleh Anda lewati

Saat pemeriksaan otomatis selesai, konversi belum berakhir. Konverter menaruh setiap halaman dalam satu gambar di samping aslinya, dan Anda membaca semuanya dari atas sampai bawah.

Dalam satu konversi, satu section utuh di bagian bawah halaman hilang, dan perbandingan piksel hanya menunjukkan selisih 0,4%. Halaman itu lolos pemeriksaan tanpa section tersebut. Pada dasarnya, pemeriksaan otomatis tidak bisa melihat tiga jenis cacat. Pertama, kontrol yang tampak sempurna tetapi tidak berfungsi. Kedua, nilai yang ditulis mati dari satu halaman asal sebuah template. Ketiga, apa pun yang baru muncul setelah Anda scroll, klik, atau mengirim formulir.

Periksa juga apakah kontennya bisa diedit, bukan hanya apakah tampilannya benar. Halaman bisa cocok sampai ke piksel, tetapi pemiliknya tetap tidak bisa mengedit FAQ atau grid fiturnya. Kami pernah melihatnya langsung: accordion dengan lima pertanyaan tampak identik, tetapi tidak ada editor yang menawarkannya. Pemeriksaan yang hanya melihat tampilan meloloskannya. Jadi untuk setiap halaman, tanyakan apakah setiap kelompok yang berulang dan setiap blok teks bisa diedit dari wp-admin.

Pasang tema

Folder proyek Anda mendapat ZIP tema dan, di sebelahnya, CONVERSION-REPORT.md. Tidak ada yang lain. Folder kerja berisi build ada di luar proyek Anda, di folder cache, jadi repositori Anda tetap bersih. Laporan itu pengecualiannya, karena pembacanya adalah Anda. Isinya: apa yang dicakup konversi, apa yang ditemukan pemeriksaan, setiap peringatan (termasuk yang masih bisa diterima), dan apa yang masih terbuka.

Di WordPress, buka Tampilan → Tema → Tambah Baru → Unggah Tema, pilih ZIP-nya, lalu aktifkan. Tema ini berdiri sendiri. Halaman, blog, formulir, menu, SEO, dan redirect semuanya kode tema itu sendiri. Tema tidak butuh plugin untuk berjalan dan tidak pernah menghubungi server kami.

Mengedit situs setelah konversi Lovable ke WordPress: tiga jalur

Postingan blog menjadi postingan WordPress biasa, jadi Anda langsung menulisnya di editor blok. Teks halaman tetap ada di HTML Anda, dan untuk itu ada dua pilihan yang perlu Anda ketahui. Salah satunya adalah page builder.

Jika Anda mengonversi agar desainnya bertahan, page builder justru yang merusaknya. Memindahkan desain ke builder secara manual adalah langkah yang membuat situs berhenti mirip dengan desainnya, dan karena itulah konverter ini ada. Tetapi jika desainnya hanya titik awal dan klien toh akan membangun ulang separuhnya kuartal depan, silakan berikan Elementor.

Lite atau Pro, jika Anda memilih Visual Edit

Chat AI di Pro berjalan dengan API key Anda sendiri. Kami tidak menjual token kepada Anda, dan biaya pemakaiannya Anda bayar langsung ke penyedia Anda.

Lovable atau WordPress? Anda tidak harus memilih

Orang biasanya menganggapnya pilihan salah satu. Untuk situs konten, tidak harus begitu. Di Lovable Anda membuat desain dengan cepat. Di WordPress sebuah situs hidup bertahun-tahun dan diedit orang lain. Konversi mempertahankan yang pertama dan memindahkan yang kedua. Tema ini berjalan di hosting WordPress mana pun, jadi situs tidak harus tinggal di tempat Anda membuatnya.

Yang pindah adalah website-nya: halaman, blog, formulir, menu, SEO, dan redirect. Yang tidak pindah adalah aplikasi di belakangnya: login pengguna, database, dan panggilan ke API Anda sendiri. Jika proyek Lovable Anda sebagian besar berisi hal itu, biarkan tetap di Lovable. Toko online ada di tengah-tengah. Dengan lisensi Pro, katalognya menjadi WooCommerce, seperti pada Terra Studios.

Biaya konversi Lovable ke WordPress dan apa yang ditolaknya

Paket gratis terbuka untuk semua orang, tanpa kunci dan tanpa pendaftaran: tiga konversi, masing-masing lima halaman, dan total lima proses ulang. Kedua angka dihitung per alamat IP, jadi kantor yang berbagi satu alamat mendapat satu jatah untuk semua orang. Paket gratis ditujukan untuk mencoba alat ini, situs pribadi, dan pekerjaan nonkomersial.

Lisensi Pro menghapus batas halaman serta membuat konversi dan proses ulang tanpa batas. Lisensi ini juga menambahkan langkah yang mengubah toko online menjadi WooCommerce. Langkah itu sama sekali tidak ada di paket gratis: aplikasi langsung menolak konversi gratis untuk situs yang punya toko, alih-alih mengerjakan separuhnya. Pro seharga €49 per bulan atau €490 per tahun, dan harganya ada di halaman harga. Selama beta, pembayaran pertama 30% lebih murah dan kunci dikirim lewat email.

Ada dua penolakan yang sebaiknya Anda ketahui sejak awal. Proyek React yang route-nya hanya ada per record (/product/:id tanpa data untuk dirender) adalah aplikasi web, bukan situs untuk dikonversi. Konverter menolaknya secara terbuka, alih-alih mengirim satu contoh acak dari template. Dan ini masih beta: pemeriksaan menangkap sebagian besar perbedaan, tidak semuanya. Karena itulah pemeriksaan halaman demi halaman adalah bagian dari proses, bukan sentuhan akhir yang opsional.

Panduan langkah demi langkah untuk seluruh proses ada di dokumentasi aplikasi html2wp. Tiga konversi Lovable yang bisa Anda buka di kedua sisi ada di contoh di awal artikel ini.