Lovable से WordPress: एक प्रोजेक्ट, जो असली थीम बना

Lovable से WordPress का उदाहरण, दोनों सिरे खुले

नीचे लिखी हर बात एक ऐसे कन्वर्ज़न के बारे में है, जो हमने सच में किया। मूल साइट एक Lovable ऐप है: bruce-banner.lovable.app, एक फ़ोटोग्राफ़ी पोर्टफ़ोलियो। नतीजा है bruce.html2wp.dev, जो WordPress पर चलता है। इसके एडमिन में आप /wp-admin से जा सकते हैं, यूज़रनेम demo और पासवर्ड demo के साथ।

इस कन्वर्ज़न से bruce-banner थीम पर पांच पेज और पांच पोस्ट बने। यह फ़्री टियर में आ जाता है। फ़्री टियर एक कन्वर्ज़न में पांच पेज तक बदलता है, और उसके लिए key नहीं चाहिए। आगे पढ़ने से पहले Lovable वाली और WordPress वाली, दोनों साइटें साथ-साथ खोल लें। यह लेख उन्हीं के फ़र्क के बारे में है, ताकि आप उसे खुद माप सकें।

Lovable के दो और कन्वर्ज़न इसी तरह खुले हैं। पहले में spark-remix-kindred.lovable.app से terra.html2wp.dev बना, जो WooCommerce पर चलने वाली ऊनी कपड़ों की दुकान है। दूसरे में bloom-echo-remix.lovable.app से soria.html2wp.dev बना, जो एक वेडिंग फ़ोटोग्राफ़र की साइट है। तीनों पर WordPress एडमिन का लॉगिन demo / demo है।

Lovable को WordPress में बदलने के लिए आपके कंप्यूटर को क्या चाहिए

बिल्ड, ब्राउज़र का काम और सारी जाँच आपकी मशीन पर चलती हैं। थीम बनाने वाली सर्विस तक सिर्फ़ बिल्ड का नतीजा जाता है। इसलिए Lovable से WordPress का यह रास्ता ऐसी वेब सर्विस नहीं है, जहां आप ZIP अपलोड करें। इसकी कुछ ज़रूरतें हैं, जो आपको पहले से पता होनी चाहिए:

• Node 20 या नया, बिल्ड और लोकल स्क्रिप्ट के लिए।
• Python 3, साथ में Playwright और Pillow पैकेज। Playwright एक असली ब्राउज़र चलाता है, और इसी से React ऐप HTML में बदलता है।
• Docker, docker compose कमांड के साथ। यह आपके कंप्यूटर पर एक अस्थायी WordPress चलाता है। आपके देखने से पहले कन्वर्टर थीम को वहीं जाँचता है।
• php-cli, क्योंकि ZIP में जाने से पहले हर PHP फ़ाइल की सिंटैक्स जाँच होती है।
• jq, curl, bash और tar। जिस WordPress पर थीम लगेगी, उसका वर्ज़न 6.6 या नया होना चाहिए।

प्लगइन पहले चरण में यह सब जाँचता है और दो सूचियां दिखाता है। पहली में वे चीज़ें हैं, जो वह आपके अपने फ़ोल्डरों में खुद इंस्टॉल कर सकता है। दूसरी में वे हैं, जिनका फ़ैसला आपको करना है: Docker, नया Node और Docker को चालू करना। दूसरी सूची की चीज़ें वह आपकी जानकारी के बिना कभी इंस्टॉल नहीं करता।

प्लगइन इंस्टॉल करें

हम प्लगइन दो बार प्रकाशित करते हैं, हर एजेंट के लिए एक बार। Claude Code और Codex के लिए स्क्रिप्ट और वर्ज़न नंबर एक जैसे हैं। जिसे आप इस्तेमाल करते हैं, वही चुनें।

Claude Code

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

फिर एक बार टर्मिनल में:

python3 -m playwright install chromium

Codex

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

फ़्री टियर के लिए और कुछ सेट नहीं करना है: न key, न साइन-अप, न कार्ड। टर्मिनल में काम नहीं करना चाहते, तो यही कन्वर्ज़न html2wp डेस्कटॉप ऐप में चलाएं (स्क्रीनशॉट वाली गाइड)।

अपना Lovable प्रोजेक्ट डिस्क पर कैसे लाएं

लाइव साइट का पता इनपुट के रूप में नहीं चलता, और ऐसा जानबूझकर है। प्रकाशित पेज की कॉपी में सिर्फ़ रेंडर हुआ नतीजा बचता है। सोर्स कोड जो जानता है, वह उसमें खो जाता है: रूट, कंपोनेंट और बिल्ड का नतीजा।

इसलिए Lovable से WordPress कन्वर्ज़न का इनपुट एक फ़ोल्डर है। Lovable आपके प्रोजेक्ट को एक GitHub रिपॉज़िटरी से सिंक करता है। उसे कनेक्ट करें, क्लोन करें, और प्रोजेक्ट आपके कंप्यूटर पर आ जाता है। Lovable का इंटरफ़ेस इस महीने जैसा भी दिखे, आपको रिपॉज़िटरी ही चाहिए। उसमें वही फ़ाइलें हैं, जिनसे Lovable साइट बनाता है।

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

पहले npm install या बिल्ड चलाने की ज़रूरत नहीं है। कन्वर्ज़न यह खुद करता है।

लिखें “convert this project”

उसी फ़ोल्डर में एजेंट खोलें और यह लिखें:

/html2wp:html2wp

convert this project

Codex में स्लैश कमांड नहीं है। उसकी जगह उसे लिखें convert this project into a verified WordPress block theme, और वह स्किल खुद ढूंढ लेता है। Claude Code या Codex के साथ यही वाक्य पूरा निर्देश है। आप न कोई कॉन्फ़िग फ़ाइल लिखते हैं, न बिल्ड कमांड चुनते हैं।

Flash में लगभग 30 मिनट लगते हैं और Full में लगभग एक घंटा। समय पेजों की संख्या और आपके कंप्यूटर की रफ़्तार पर निर्भर करता है। काम ज़्यादातर आपकी मौजूदगी के बिना चलता है, और हर चरण के बाद वह बताता है कि कहां पहुंचा। इसलिए पूरी खामोशी की उम्मीद न करें।

WordPress कन्वर्ज़न में Lovable के React का क्या होता है

यही वह चरण है, जो Lovable प्रोजेक्ट की वजह से WordPress कन्वर्ज़न में जुड़ता है।

पुराने Lovable ऐप (React और Vite) में एक ही index.html होता है। उसकी body में एक खाली एलिमेंट होता है, जिसमें React ऐप माउंट होता है, और एक script टैग। यानी कन्वर्ट करने को कुछ नहीं है। पहले कन्वर्टर प्रोजेक्ट को बिल्ड करता है। फिर एक असली ब्राउज़र हर रूट पर जाता है, और एक रिकॉर्डर सब देखता रहता है। नतीजा हर रूट के लिए सपाट HTML है, ठीक वैसा जैसा बाकी प्रक्रिया को चाहिए। TanStack Start पर बना नया प्रोजेक्ट अपने पेज पहले से सर्वर पर रेंडर करता है। फिर भी कन्वर्टर उसे बिल्ड करता है और हर रूट पर उसी तरह जाता है।

रिकॉर्डर क्या पकड़ता है

• वह स्थिति, जो JavaScript चलने के बाद ही बनती है। खुले accordion, ड्रॉपडाउन का कंटेंट, वे क्लास जिन्हें कोई स्क्रिप्ट बदलती है। रिकॉर्डर इन्हें एलिमेंट पर डेटा के रूप में रखता है, और एक छोटा सामान्य रनटाइम इन्हें दोबारा चलाता है। कोई इन्हें याद के भरोसे हाथ से नहीं लिखता।
• स्क्रॉल की सीमाएं, पिक्सेल तक सटीक। जो हेडर scrollY > 40 पर बदलता है, उसका नंबर किसी ने अपनी मर्ज़ी से चुना था। रिकॉर्डर उसे ढूंढता है और ठीक-ठीक पता करता है कि वह कहां है। अंदाज़े से गोल किया गया नंबर हेडर को हमेशा गलत पल पर बदलेगा।
• “एक बार में सिर्फ़ एक खुला” वाले रिश्ते। आप A खोलते हैं, फिर B। क्या A बंद हुआ? हर एलिमेंट को अकेले रिकॉर्ड करने से यह पता नहीं चलता, इसलिए रिकॉर्डर इसे अलग से टेस्ट करता है।
• स्क्रॉल पर आने वाले एनिमेशन बचे रहते हैं। रिकॉर्डर उन्हें पकड़ता है, और थीम उन्हें मूल की तरह ही चलाती है। JavaScript के बिना भी कंटेंट दिखता रहता है। एलिमेंट सिर्फ़ तब छिपता है, जब रनटाइम चल रहा हो, और prefers-reduced-motion होने पर थीम एनिमेशन छोड़ देती है। 1:1 मिलान हम तब मापते हैं, जब एनिमेशन पूरे होकर पेज रुक जाता है।

यह किस चीज़ की नकल नहीं गढ़ता

• जो व्यवहार रिकॉर्ड नहीं हो सका, वह एक सूची में जाता है। हर पेज की अपनी सूची है। उसे पढ़ें।

इस चरण की अपनी जाँच है, क्योंकि बाद की कोई जाँच इसे नहीं देख सकती। कन्वर्टर हर रूट का लाइव स्क्रीनशॉट लेता है। फिर वह उसे 1440, 820 और 390 पिक्सेल चौड़ाई पर स्टैटिक कैप्चर से मिलाता है। फ़र्क हो, तो यह चरण फ़ेल हो जाता है। बाद का हर चरण कैप्चर से WordPress तक मापता है, इसलिए यहां बनी गड़बड़ी उन सबसे बच निकलेगी।

वह जाँच, जिसे आप छोड़ नहीं सकते

ऑटोमैटिक जाँच पूरी होने पर भी कन्वर्ज़न खत्म नहीं होता। कन्वर्टर हर पेज को उसके मूल के साथ एक इमेज में रखता है। फिर आप हर इमेज ऊपर से नीचे तक पढ़ते हैं।

एक कन्वर्ज़न में पेज के नीचे का पूरा एक सेक्शन गायब था, और पिक्सेल तुलना में फ़र्क सिर्फ़ 0.4% आया। ऐसा पेज सेक्शन के बिना भी जाँच पास कर लेता है। ऑटोमैटिक जाँच अपने स्वभाव से तीन तरह की गड़बड़ियां नहीं देख सकती। पहली: ऐसा कंट्रोल जो एकदम सही दिखता है, पर कुछ नहीं करता। दूसरी: ऐसी वैल्यू, जो उस एक पेज से हार्ड-कोड हो गई जिससे टेम्पलेट बना। तीसरी: कुछ भी, जो स्क्रॉल, क्लिक या फ़ॉर्म भेजने के बाद ही दिखता है।

यह भी जाँचें कि कंटेंट एडिट हो सकता है या नहीं, सिर्फ़ यह नहीं कि वह सही दिखता है। पेज पिक्सेल तक मेल खा सकता है, फिर भी मालिक उसका FAQ या फ़ीचर ग्रिड एडिट न कर पाए। हमने यह लाइव देखा: पांच सवालों वाला accordion बिल्कुल एक जैसा दिखता था, पर कोई एडिटर उसे नहीं खोलता था। सिर्फ़ दिखावट देखने वाली जाँच ने उसे जाने दिया। इसलिए हर पेज पर wp-admin खोलें। देखें कि हर दोहराया जाने वाला समूह और टेक्स्ट का हर ब्लॉक एडिट होता है या नहीं।

थीम इंस्टॉल करें

आपके प्रोजेक्ट फ़ोल्डर में एक थीम ZIP आती है और उसके बगल में CONVERSION-REPORT.md। इसके सिवा कुछ नहीं। बिल्ड वाला वर्किंग फ़ोल्डर आपके प्रोजेक्ट के बाहर, एक cache फ़ोल्डर में रहता है, इसलिए आपकी रिपॉज़िटरी साफ़ रहती है। रिपोर्ट अपवाद है, क्योंकि उसे आप पढ़ते हैं। उसमें लिखा होता है कि कन्वर्ज़न ने क्या कवर किया और जाँच में क्या मिला। उसमें हर चेतावनी (स्वीकार्य वाली भी) और बाकी बचे काम भी होते हैं।

WordPress में Appearance → Themes → Add New → Upload Theme पर जाएं, ZIP चुनें और थीम को एक्टिवेट करें। थीम अपने दम पर चलती है। पेज, ब्लॉग, फ़ॉर्म, मेन्यू, SEO और रीडायरेक्ट सब उसका अपना कोड हैं। उसे चलने के लिए किसी प्लगइन की ज़रूरत नहीं, और वह हमारे किसी सर्वर से कभी बात नहीं करती।

Lovable से WordPress कन्वर्ज़न के बाद एडिटिंग: तीन रास्ते

ब्लॉग पोस्ट साधारण WordPress पोस्ट बन जाती हैं, इसलिए आप उन्हें तुरंत ब्लॉक एडिटर में लिखते हैं। पेजों का टेक्स्ट आपके HTML में रहता है, और उसके लिए दो विकल्प जानने लायक हैं। उनमें से एक पेज बिल्डर है।

डिज़ाइन बचाने के लिए कन्वर्ट कर रहे हैं, तो पेज बिल्डर ठीक वही चीज़ है, जो उसे खत्म करती है। डिज़ाइन को हाथ से बिल्डर में ले जाने के बाद साइट डिज़ाइन जैसी नहीं दिखती। यह कन्वर्टर इसी वजह से बना है। लेकिन कभी डिज़ाइन सिर्फ़ शुरुआत होता है, और क्लाइंट अगली तिमाही में उसका आधा हिस्सा वैसे भी बदल देगा। तब उसे Elementor दे दें।

Visual Edit चुनें, तो Lite या Pro

Pro में AI चैट आपकी अपनी API key पर चलती है। हम आपको टोकन नहीं बेचते, और उनका खर्च आप सीधे अपने प्रोवाइडर के साथ चुकाते हैं।

Lovable या WordPress? आपको चुनना नहीं पड़ता

लोग आमतौर पर इसे दो में से एक चुनने का सवाल मानते हैं। कंटेंट साइट के लिए ऐसा ज़रूरी नहीं है। Lovable में आप तेज़ी से डिज़ाइन बनाते हैं। WordPress में साइट सालों चलती है, और कोई और उसे एडिट करता है। Lovable से WordPress कन्वर्ज़न पहली खूबी को बनाए रखता है और साइट को दूसरी दुनिया में ले जाता है। थीम किसी भी WordPress होस्टिंग पर चलती है, इसलिए साइट को वहीं रहना ज़रूरी नहीं, जहां आपने उसे बनाया।

जो चीज़ साथ जाती है, वह वेबसाइट है: पेज, ब्लॉग, फ़ॉर्म, मेन्यू, SEO और रीडायरेक्ट। उसके पीछे का ऐप्लिकेशन साथ नहीं जाता: साइन-इन, डेटाबेस और आपकी अपनी API की कॉल। अगर आपका Lovable प्रोजेक्ट ज़्यादातर यही है, तो उसे Lovable में ही रखें। दुकान इन दोनों के बीच आती है। Pro लाइसेंस के साथ उसका कैटलॉग WooCommerce बन जाता है, जैसा Terra Studios के साथ हुआ।

Lovable से WordPress कन्वर्ज़न की कीमत, और वह किससे मना करता है

फ़्री टियर सबके लिए खुला है, बिना key और बिना साइन-अप: पांच-पांच पेज के तीन कन्वर्ज़न और कुल पांच री-रन। दोनों संख्याएं हर IP पते के हिसाब से गिनी जाती हैं। इसलिए एक पता साझा करने वाले दफ़्तर को सबके लिए एक ही कोटा मिलता है। फ़्री टियर टूल आज़माने, निजी साइटों और गैर-व्यावसायिक काम के लिए है।

Pro लाइसेंस पेजों की सीमा हटा देता है और कन्वर्ज़न व री-रन असीमित कर देता है। यह वह चरण भी जोड़ता है, जो दुकान को WooCommerce में बदलता है। फ़्री टियर में यह चरण बिल्कुल नहीं है। दुकान वाली साइट का फ़्री कन्वर्ज़न ऐप सीधे मना कर देता है, आधा काम करने के बजाय। Pro की कीमत €49 महीना या €490 साल है, और कीमतें कीमतों के पेज पर हैं। बीटा के दौरान पहला पेमेंट 30% सस्ता है, और key ईमेल से आती है।

दो इनकार पहले से जान लेना अच्छा है। कुछ React प्रोजेक्ट के रूट सिर्फ़ हर रिकॉर्ड के लिए होते हैं (/product/:id, जिसे रेंडर करने को कोई डेटा नहीं)। ऐसा प्रोजेक्ट वेब ऐप है, कन्वर्ट करने लायक साइट नहीं। कन्वर्टर उसे खुलकर मना कर देता है, टेम्पलेट का कोई एक बेतरतीब नमूना भेजने के बजाय। और यह बीटा है: जाँच ज़्यादातर फ़र्क पकड़ती है, सब नहीं। इसीलिए पेज-दर-पेज जाँच प्रक्रिया का हिस्सा है, वैकल्पिक सजावट नहीं।

पूरी प्रक्रिया की चरण-दर-चरण गाइड html2wp ऐप के डॉक्यूमेंटेशन में है। Lovable से WordPress के तीनों कन्वर्ज़न दोनों सिरों से खुले हैं। वे इस लेख की शुरुआत वाले उदाहरण में हैं।