Claude Design dışa aktarımı: html2wp uygulamasında WordPress teması
Claude Design'da yaptığın bir tasarımı html2wp uygulamasında (Mac ve Windows), terminal olmadan WordPress'e dönüştürebilirsin. Bunun için tasarımı Claude Design'dan HTML olarak dışa aktarırsın. Sonra onu uygulamaya ekler, Flash veya Full'u seçersin ve sonunda tasarımına benzeyen bir WordPress teması indirirsin.
Claude Design'ı uygulamada WordPress'e dönüştürmek için neye ihtiyacın var
- Apple Silicon işlemcili bir Mac (M1 ve sonrası) ve macOS 12 veya sonrası.
- Bir ChatGPT hesabı. Dönüştürmeyi kendi aboneliğindeki yapay zekâ yapar, bu yüzden bize kredi için ödeme yapmazsın.
- Claude Design'dan dışa aktarılmış tasarım: HTML dosyası olarak kaydedilmiş hâli. Birkaç sayfan varsa her birini ayrı bir dosya olarak kaydet.
Claude'dan gelen HTML temaya giden en kısa yoldur, çünkü uygulamanın onu önce derlemesi ya da bir tarayıcıda açması gerekmez. Ücretsiz sürüm her biri en fazla beş sayfa olan üç siteyi dönüştürür. Müşteri işleri için fiyatlandırma sayfasından bir Pro lisans gerekir.
Kurulum, ortam ve giriş
Uygulamayı Mac için indir ve Uygulamalar klasörüne taşı. Settings bölümünde Prepare environment düğmesine tıkla, uygulama Docker'ı ve dönüştürme ortamını indirir. Sonra Connect with ChatGPT ile giriş yap. Uygulama için Lovable rehberi bu adımların her birini ekran görüntüleriyle ayrıntılı anlatır ve Claude için de aynıdırlar.
Claude Design tasarımını uygulamaya almak
Tasarımı Claude Design'dan dışa aktarmak için Claude'daki artifact'i bir .html dosyası olarak indir. Bir klasör oluştur ve dosyayı içine index.html olarak kaydet. Tasarım dosyanın içinde olmayan görsellere bağlantı veriyorsa onları aynı klasöre, kodun beklediği yerlere koy. Hakkımızda veya İletişim gibi diğer sayfalar onun yanına about.html ve contact.html olarak gider. Uygulama hangi sayfanın ne olduğunu dosya adından çıkarır.
Uygulamada New project (⌘N) düğmesine tıkla, çıktı olarak “HTML WordPress theme” seçeneğini bırak ve “Choose a folder” seç. Klasörü ZIP'lediysen bunun yerine “Import a ZIP” kullan.
WordPress teması için Flash veya Full
Flash varsayılandır: her adım bir kez çalışır ve yaklaşık yarım saat sürer. Full her kontrolü çalıştırır ve hataları düzeltmeye çalışır, bu yüzden yaklaşık bir saat sürer. Tek sayfalık bir tasarım genelde kısa uçta kalır, ama kontroller yine de eksiksiz çalışır.
Dönüştürme sırasında Overview sekmesi uygulamanın ne yaptığını gösterir. Duraklatmak için Stop conversion düğmesine tıkla, sonra “Continue” ile devam et.
Claude Design tasarımını uygulamada kontrol etmek
Compare sekmesi orijinali ve WordPress sürümünü masaüstü ve mobil genişlikte yan yana gösterir. Her sayfaya göz at, çünkü otomatik kontroller farkların çoğunu yakalar, ama hepsini değil. Bir şey uyuşmuyorsa sohbete yaz. Değişiklik önizlemede olur, ardından “Make release” temanın yeni bir sürümünü paketler.
Claude Design'dan WordPress'e: temayı dışa aktarmak
Exports sekmesinde WordPress temasının yanındaki “Save” düğmesine tıkla ve ZIP'i kaydet. WordPress'te onu Görünüm → Temalar → Yeni ekle → Tema yükle yoluyla yüklersin. Tema tek başına ayakta durur: sayfalar, formlar, menüler ve SEO eklentisiz çalışır.
Visual Edit editörü müşterin için tıklayarak düzenleme ekler. Terminalde çalışıyorsan Claude Code ve Codex eklentili rehber aynı dönüştürmeyi anlatır.