Lovable'dan WordPress'e: gerçek bir temaya dönüştürülen proje

Lovable'dan WordPress'e dönüştürme örneği, iki ucu da açık

Aşağıdaki her şey gerçekten yaptığımız bir dönüştürmeyi anlatıyor. Orijinal bir Lovable uygulaması: bir fotoğrafçılık portfolyosu olan bruce-banner.lovable.app. Sonuç, WordPress üzerinde çalışan bruce.html2wp.dev. Yönetim paneline /wp-admin adresinden demo kullanıcı adı ve demo parolasıyla girebilirsin.

Dönüştürme, bruce-banner temasında beş sayfa ve beş yazı üretti. Bu, dönüştürme başına en fazla beş sayfa dönüştüren ve anahtar gerektirmeyen ücretsiz sürüme sığar. Okumaya devam etmeden önce iki siteyi yan yana aç. Bu yazı ikisi arasındaki farkla ilgili, böylece onu kendin ölçebilirsin.

İki Lovable dönüştürmesi daha aynı şekilde açık. İlki, spark-remix-kindred.lovable.app WooCommerce üzerinde bir triko mağazası olan terra.html2wp.dev oldu. Sonra bloom-echo-remix.lovable.app bir düğün fotoğrafçısının sitesi olan soria.html2wp.dev oldu. Üçünde de WordPress yönetici girişi demo / demo.

Lovable'ı WordPress'e dönüştürmek için bilgisayarının ihtiyaçları

Derleme, tarayıcı işi ve tüm kontroller senin makinende çalışır. Temayı üreten servise yalnızca derlenmiş çıktı gider. Yani bu bir ZIP yüklediğin bir web servisi değildir ve baştan bilmen gereken gereksinimleri vardır:

• Derleme ve yerel betikler için Node 20 veya daha yenisi.
• Playwright ve Pillow paketleriyle Python 3. Playwright gerçek bir tarayıcıyı yönetir ve bir React uygulaması böylece HTML'e dönüşür.
• Docker, docker compose komutuyla birlikte. Bilgisayarında geçici bir WordPress başlatır ve dönüştürücü temayı sen görmeden önce orada kontrol eder.
• php-cli, çünkü her PHP dosyası ZIP'e girmeden önce bir sözdizimi kontrolünden geçer.
• jq, curl, bash ve tar. Hedef WordPress 6.6 veya daha yeni olmalıdır.

Eklenti bunların hepsini ilk adımda kontrol eder ve iki liste yazdırır. Birincisi kendi klasörlerinin içine kendi başına kurabileceklerini gösterir. İkincisi senin karar vermen gerekenleri gösterir: Docker, daha yeni bir Node ve Docker'ı başlatmak. İkinci grubu asla senden habersiz kurmaz.

Eklentiyi kur

Eklentiyi iki kez, her ajan için bir kez yayınlıyoruz. Betikler ve sürüm numarası Claude Code ve Codex için aynıdır. Kullandığını seç.

Claude Code

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

Ardından bir kez, bir terminalde:

python3 -m playwright install chromium

Codex

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

Ücretsiz sürüm için ayarlanacak başka bir şey yok: anahtar yok, kayıt yok, kart yok. Terminalde çalışmak istemezsen aynı dönüştürmeyi html2wp masaüstü uygulamasında (ekran görüntülü bir rehber) yapabilirsin.

Lovable projeni diskine nasıl alırsın

Canlı bir sitenin adresi desteklenen bir girdi değildir ve bu bilerek böyle. Yayınlanmış bir sayfanın kopyası yalnızca görüntülenen sonucu tutar. Kaynak kodun bildiklerini kaybeder: hangi rotaların var olduğunu, bileşenlerin ne olduğunu ve derlemenin ne ürettiğini.

Bu yüzden girdi bir klasördür. Lovable projeni bir GitHub deposuyla eşitler. Depoyu bağla, klonla ve proje yerelde olsun. Lovable arayüzü bu ay nasıl görünürse görünsün, istediğin şey depodur: Lovable'ın siteyi derlediği dosyaların aynısı.

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

Önce npm install veya bir derleme çalıştırman gerekmez. Dönüştürme bunu kendisi yapar.

“convert this project” de

O klasörde, ajanın açıkken şunu yaz:

/html2wp:html2wp

convert this project

Codex'te eğik çizgi komutu yoktur. Bunun yerine ona convert this project into a verified WordPress block theme de, skill'i kendisi bulur. Claude Code veya Codex'te bu cümle talimatın tamamıdır. Hiçbir yapılandırma dosyası yazmaz ve derleme komutu seçmezsin.

Sayfa sayısına ve bilgisayarının hızına bağlı olarak Flash yaklaşık 30 dakika, Full yaklaşık bir saat sürer. Çoğunlukla sen olmadan çalışır ve her adımdan sonra nerede olduğunu bildirir, yani sessizlik bekleme.

Lovable'ı WordPress'e dönüştürdüğünde React'e ne olur

Bir Lovable projesinin eklediği adım budur.

Eski bir Lovable uygulamasının (React ve Vite) tek bir index.html dosyası vardır. Gövdesi, React uygulamasının içine yerleştiği boş bir öğe ve bir betik etiketinden ibarettir, yani dönüştürülecek bir şey yoktur. Önce dönüştürücü projeyi derler. Sonra bir kaydedici izlerken gerçek bir tarayıcı her rotayı dolaşır. Sonuç, her rota için düz HTML'dir; sürecin geri kalanının tam olarak ihtiyaç duyduğu şey. TanStack Start üzerindeki yeni bir proje sayfalarını zaten sunucuda oluşturur; dönüştürücü yine de onu derler ve her rotayı aynı şekilde dolaşır.

Kaydedici neleri yakalar

• Yalnızca JavaScript çalıştıktan sonra var olan durum. Açık akordeonlar, açılır menü içerikleri, bir betiğin değiştirdiği sınıflar. Kaydedici bunları öğelerin üzerinde veri olarak saklar ve küçük, genel bir çalışma zamanı onları yeniden oynatır. Kimse bunları ezberden elle yazmaz.
• Piksel hassasiyetinde kaydırma eşikleri. scrollY > 40 noktasında değişen bir başlık, birinin uydurduğu bir sayı kullanır. Kaydedici onu bulur ve tam olarak nerede olduğunu hesaplar. Yuvarlanmış bir tahmin, başlığı sonsuza dek yanlış anda değiştirirdi.
• “Yalnızca biri açık olabilir” ilişkileri. A'yı açarsın, sonra B'yi. A kapandı mı? Her öğeyi tek başına kaydetmek bunu söyleyemez, bu yüzden kaydedici bunu ayrıca test eder.
• Kaydırınca beliren animasyonlar korunur. Kaydedici onları yakalar ve tema onları orijinaldeki gibi oynatır. İçerik JavaScript olmadan görünür kalır, bir öğe yalnızca çalışma zamanı çalışırken gizlenir ve prefers-reduced-motion ile tema animasyonu atlar. 1:1 eşleşmeyi, animasyonlar bittikten sonra durağan hâlde ölçeriz.

Neyi taklit etmez

• Kaydedemediği davranış bir listeye girer. Her sayfanın kendi listesi vardır. Oku.

Bu adımın kendi kontrolü vardır, çünkü sonraki hiçbir kontrol onu göremez. Dönüştürücü her rotanın canlı ekran görüntüsünü alır ve 1440, 820 ve 390 piksel genişlikte statik kaydıyla karşılaştırır. Farklıysa adım başarısız olur. Sonraki her adım kayıttan WordPress'e kadar ölçer, bu yüzden burada oluşan bir kusur hepsinden kaçardı.

Atlayamayacağın inceleme

Otomatik kontroller bittiğinde dönüştürme henüz bitmiş değildir. Dönüştürücü her sayfayı orijinalinin yanına tek bir görüntüde koyar ve sen her birini baştan sona okursun.

Bir dönüştürmede sayfanın aşağısındaki koca bir bölüm eksikti ve piksel karşılaştırması yalnızca %0,4 fark gösterdi. O sayfa bölüm olmadan kontrolden geçer. Otomatik kontroller doğaları gereği üç tür kusuru göremez. Birincisi, kusursuz görünen ama hiçbir şey yapmayan bir kontrol öğesi. İkincisi, bir şablonun geldiği tek sayfadan sabit olarak kodlanmış bir değer. Üçüncüsü, yalnızca kaydırdıktan, tıkladıktan veya bir form gönderdikten sonra ortaya çıkan her şey.

Doğru görünüp görünmediğinin yanında içeriği düzenleyip düzenleyemediğini de kontrol et. Bir sayfa pikseline kadar eşleşebilir, ama site sahibi yine de SSS'sini veya özellik ızgarasını düzenleyemeyebilir. Bunu canlı gördük: beş soruluk bir akordeon aynı görünüyordu, ama hiçbir editör onu sunmuyordu. Yalnızca görünüşe bakan bir inceleme onu geçirdi. Bu yüzden her sayfa için, her tekrarlanan grubu ve her metin bloğunu wp-admin'den düzenleyip düzenleyemediğini sor.

Temayı kur

Proje klasörüne bir tema ZIP'i ve yanında CONVERSION-REPORT.md gelir. Başka hiçbir şey gelmez. Derlemeyi içeren çalışma klasörü projenin dışında, bir önbellek klasöründe durur, böylece deponu temiz kalır. Rapor bir istisnadır, çünkü okuyucusu sensin. Dönüştürmenin neyi kapsadığını, incelemenin ne bulduğunu, her uyarıyı (kabul edilebilir olanlar dahil) ve hâlâ açık olanları listeler.

WordPress'te Görünüm → Temalar → Yeni ekle → Tema yükle yolunu izle, ZIP'i seç ve etkinleştir. Tema tek başına ayakta durur. Sayfalar, blog, formlar, menüler, SEO ve yönlendirmelerin hepsi kendi kodudur. Çalışmak için hiçbir eklentiye ihtiyaç duymaz ve sunucularımızdan hiçbiriyle asla iletişim kurmaz.

Lovable'dan WordPress'e dönüştürmeden sonra siteyi düzenlemek: üç yol

Blog yazıları sıradan WordPress yazılarına dönüşür, bu yüzden onları hemen blok editöründe yazarsın. Sayfa metinleri HTML'inde kalır ve bunun için bilmeye değer iki seçenek var. Bunlardan biri bir sayfa oluşturucu.

Tasarım korunsun diye dönüştürüyorsan, onu yok eden şey tam olarak bir sayfa oluşturucudur. Bir tasarımı elle bir oluşturucuya taşımak, sitenin tasarıma benzemeyi bıraktığı adımdır ve bu dönüştürücü bu yüzden var. Ama tasarım yalnızca bir başlangıç noktasıysa ve müşteri gelecek çeyrekte zaten yarısını yeniden kuracaksa, ona Elementor'u ver.

Visual Edit'i seçersen Lite mı Pro mu

Pro'daki yapay zekâ sohbeti senin API anahtarınla çalışır. Sana token satmayız, onları kullanmanın maliyetini doğrudan sağlayıcınla ödersin.

Lovable mı WordPress mi? Seçmek zorunda değilsin

İnsanlar bunu genelde ya biri ya diğeri diye düşünür. Bir içerik sitesi için böyle olmak zorunda değil. Lovable'da hızlıca bir tasarım yaparsın. WordPress'te bir site yıllarca yaşar ve onu başka biri düzenler. Dönüştürme birincisini korur ve ikincisini taşır. Tema her WordPress barındırmasında çalışır, yani site artık onu yaptığın yerde yaşamak zorunda değildir.

Taşınan şey web sitesidir: sayfalar, blog, formlar, menüler, SEO ve yönlendirmeler. Taşınmayan şey arkasındaki uygulamadır: giriş, veritabanı ve kendi API'ne yapılan çağrılar. Lovable projen çoğunlukla bunlardan oluşuyorsa onu Lovable'da tut. Bir mağaza ikisinin arasında durur. Pro lisansla kataloğu, Terra Studios'ta olduğu gibi WooCommerce olur.

Lovable'dan WordPress'e dönüştürmenin fiyatı ve neleri reddettiği

Ücretsiz sürüm anahtarsız ve kayıtsız herkese açıktır: her biri beş sayfalık üç dönüştürme ve toplam beş yeniden çalıştırma. İki sayı da IP adresi başına sayılır, yani tek bir adresi paylaşan bir ofis herkes için tek bir hak alır. Ücretsiz sürüm aracı denemek, kişisel siteler ve ticari olmayan işler içindir.

Pro lisans sayfa sınırını kaldırır, dönüştürmeleri ve yeniden çalıştırmaları sınırsız yapar. Bir mağazayı WooCommerce'e dönüştüren adımı da ekler. Bu adım ücretsiz sürümde hiç yoktur: uygulama, mağazası olan bir sitenin ücretsiz dönüştürmesini yarım yapmak yerine baştan reddeder. Pro aylık €49 veya yıllık €490 tutar, fiyatlar fiyatlandırma sayfasında. Beta boyunca ilk ödeme %30 daha ucuzdur ve anahtar e-postayla gelir.

Önceden bilmeye değer iki ret var. Rotaları yalnızca kayıt başına var olan bir React projesi (görüntülenecek verisi olmayan /product/:id) dönüştürülecek bir site değil, bir web uygulamasıdır. Dönüştürücü, şablonun rastgele bir örneğini teslim etmek yerine onu açıkça reddeder. Bir de bu bir beta: kontroller farkların çoğunu yakalar, hepsini değil. Sayfa sayfa incelemenin isteğe bağlı bir cila değil, sürecin parçası olmasının nedeni bu.

Tüm sürecin adım adım rehberi html2wp uygulamasının dokümantasyonunda. İki ucunu da açabileceğin üç Lovable dönüştürmesi bu yazının başındaki örnekte.