ก่อนเริ่มแอปและบัญชีของคุณ

สิ่งที่ต้องมีเพื่อแปลง Lovable เป็น WordPress ในแอป

Mac ที่ใช้ Apple silicon (M1 ขึ้นไป) และ macOS 12 ขึ้นไป
บัญชี ChatGPT AI ในการสมัครใช้งานของคุณเองเป็นผู้แปลง คุณจึงไม่ต้องจ่ายค่าเครดิตหรือโทเค็นให้เรา
โปรเจกต์ Lovable เป็น ZIP หรือโฟลเดอร์ที่มีซอร์สโค้ด ขั้นตอนการดาวน์โหลดอยู่ด้านล่าง
พื้นที่ดิสก์ การแปลงที่กำลังรันแต่ละงานใช้พื้นที่หลาย GB

คุณไม่ต้องติดตั้ง Docker Desktop ไว้ก่อน เพราะแอปดาวน์โหลดและติดตั้งให้เองเมื่อจำเป็น แพ็กเกจฟรีแปลงได้สามเว็บ เว็บละไม่เกินห้าหน้า ซึ่งพอสำหรับการแปลงเว็บ Lovable ขนาดเล็กเป็น WordPress สำหรับงานให้ลูกค้า เว็บที่ใหญ่กว่า และร้านค้า WooCommerce คุณต้องมีไลเซนส์ Pro จากหน้าราคา

การติดตั้งแอป html2wp

ดาวน์โหลดแอปสำหรับ Mac เปิดไฟล์ DMG แล้วลาก html2wp ไปไว้ในโฟลเดอร์ Applications ในคู่มือนี้ ชื่อปุ่มเขียนตรงตามที่แสดงบนหน้าจอ

การเตรียมสภาพแวดล้อม

ใน "Settings" ของแอป ให้คลิก Prepare environment แอปจะดาวน์โหลดและเปิด Docker ถ้าจำเป็น จากนั้นโหลดสภาพแวดล้อมการแปลง และอิมเมจของ WordPress กับฐานข้อมูล ครั้งแรกใช้เวลาไม่กี่นาที Mac อาจขอรหัสผ่านของคุณ และ Docker จะแสดงเงื่อนไขไลเซนส์ของตัวเอง

แอป html2wp: หน้า Settings ที่มีปุ่ม Prepare environment ก่อนการแปลงครั้งแรก — ก่อนการแปลงครั้งแรก: ปุ่ม "Prepare environment" (เตรียมสภาพแวดล้อม) ใน Settings

เมื่อทุกอย่างพร้อม แอปจะแสดง "Ready to work" และปุ่มจะเปลี่ยนเป็น Repair environment ซึ่งคุณต้องใช้ก็ต่อเมื่อสภาพแวดล้อมเสียในภายหลัง

แอป html2wp เมื่อเตรียมสภาพแวดล้อมแล้ว พร้อมปุ่ม Repair environment — สภาพแวดล้อมพร้อมแล้ว และแถบด้านข้างแสดง "Environment ready"

เข้าสู่ระบบด้วย ChatGPT

คลิก Connect with ChatGPT แอปจะแสดงรหัส และปุ่ม "Open sign-in page" จะเปิดหน้าของ OpenAI เข้าสู่ระบบที่นั่นด้วยบัญชี ChatGPT แล้วกรอกรหัสจากแอป คุณพิมพ์รหัสผ่านเฉพาะในหน้าของ OpenAI แอปจึงไม่เคยเห็นรหัสผ่าน

การเข้าสู่ระบบ ChatGPT ของแอป html2wp ด้วยรหัสบนหน้าของ OpenAI — คุณกรอกรหัสจากแอปในหน้าเข้าสู่ระบบของ OpenAI

หลังเข้าสู่ระบบ ให้เลือก "Conversion model" และ "Reasoning effort" หรือใช้ค่าเริ่มต้น ถ้ามีไลเซนส์ Pro ให้กรอกคีย์ใน Settings แล้วคลิก Save & check แพ็กเกจฟรีไม่ต้องใช้คีย์

แอป html2wp ที่เข้าสู่ระบบบัญชี ChatGPT แล้ว พร้อมการตั้งค่าโมเดลและระดับการคิด — บัญชีที่เข้าสู่ระบบแล้วและการเลือกโมเดลสำหรับการแปลง

การแปลงจาก Lovable สู่ธีม

นำโปรเจกต์ Lovable เข้าแอปเพื่อแปลงเป็น WordPress

แอปต้องใช้ซอร์สไฟล์ของโปรเจกต์ ไม่ใช่ที่อยู่ของเว็บที่ออนไลน์อยู่ Lovable ซิงก์โปรเจกต์ไปที่ repository บน GitHub เปิด repository บน GitHub แล้วดาวน์โหลดด้วย Code → Download ZIP คุณไม่ต้อง build โปรเจกต์หรือรัน npm install เพราะแอปทำให้เอง

ในแอป คลิก New project (⌘N) ใต้ "Output" ให้คงไว้ที่ HTML WordPress theme แล้วเลือก Import a ZIP หรือ "Choose a folder" ถ้าคุณแตกไฟล์โปรเจกต์ไว้แล้ว แอปทำงานบนสำเนา ไฟล์ต้นฉบับของคุณจึงไม่เปลี่ยน

หน้าต่าง New project ใน html2wp: ผลลัพธ์เป็นธีม WordPress และการนำเข้าโฟลเดอร์หรือ ZIP ของโปรเจกต์ Lovable — New project: ผลลัพธ์ HTML WordPress theme และการนำเข้า ZIP หรือโฟลเดอร์

โปรเจกต์ Lovable ที่นำเข้าแอป html2wp เป็น HTML WordPress theme แล้ว — หลังนำเข้า แอปยืนยันว่าไฟล์ต้นฉบับของคุณไม่เปลี่ยน

Flash หรือ Full เพื่อแปลง Lovable เป็น WordPress

ในหน้าจอโปรเจกต์ คุณเลือกว่าจะให้แอปแปลงเว็บ Lovable เป็น WordPress ละเอียดแค่ไหน Flash คือค่าเริ่มต้น แต่ละขั้นตอนรันครั้งเดียว และใช้เวลาประมาณครึ่งชั่วโมง Full รันการตรวจทุกอย่างและพยายามแก้ข้อผิดพลาดที่เจอ จึงใช้เวลาประมาณหนึ่งชั่วโมง เวลาที่ใช้จริงขึ้นกับจำนวนหน้าและความเร็วของ Mac

โปรเจกต์ Lovable ในแอป html2wp ก่อนเริ่มการแปลงเป็น WordPress แบบ Flash หรือ Full — ปุ่ม Flash และ Full และประเภทธีม: HTML หรือ Astro 5

ถ้าไม่ต้องใช้ WordPress ให้เปลี่ยนประเภทเป็น Astro 5 แอปจะสร้างเว็บแบบ static และคุณ deploy ไปที่ Cloudflare Pages จากแอปได้โดยตรง

การแปลงทำงานอย่างไร

ระหว่างการแปลง แท็บ "Overview" แสดงขั้นตอนที่ปลั๊กอินแปลงกำลังทำ และการแก้ไขที่ทำไปเอง ส่วนใหญ่ทำงานโดยไม่ต้องมีคุณ ไม่ว่าโปรเจกต์ Lovable จะเป็นแอป React รุ่นเก่าหรือโปรเจกต์ TanStack Start รุ่นใหม่ แอปจะ build ก่อน เปิดในเบราว์เซอร์ แล้วบันทึกแต่ละหน้าเป็น HTML ที่เสร็จสมบูรณ์ จากนั้นจึงเปลี่ยน HTML นั้นเป็นธีม

การแปลงแบบ Flash จาก Lovable เป็น WordPress ในแอป html2wp พร้อมความคืบหน้าและปุ่ม Stop conversion — การแปลงแบบ Flash ที่กำลังรัน พร้อมเปอร์เซ็นต์และขั้นตอนถัดไป

ถ้าต้องการหยุดชั่วคราว คลิก Stop conversion แล้วทำต่อด้วย "Continue" ถ้าปลั๊กอินหยุดที่ขั้นตอนใดเอง Repair and continue จะให้ปลั๊กอินแก้ข้อผิดพลาดแล้วทำต่อ

ตรวจเว็บ Lovable เทียบกับ WordPress

แท็บ Compare (เปรียบเทียบ) แสดงแต่ละหน้าของต้นฉบับคู่กับเวอร์ชัน WordPress ที่ความกว้างเดสก์ท็อป (Desktop · 1440) และมือถือ (Mobile · 390) พร้อมความต่างเป็นเปอร์เซ็นต์ ดูทุกหน้าด้วยตัวเอง การตรวจอัตโนมัติจับความต่างได้เกือบทั้งหมด แต่ไม่ใช่ทั้งหมด ในการแปลงครั้งหนึ่ง ส่วนทั้งส่วนหายไปแต่ความต่างแค่ 0.4%

แท็บ Compare ในแอป html2wp: ต้นฉบับด้านซ้าย เวอร์ชัน WordPress ด้านขวา — การเปรียบเทียบหน้าที่ความกว้างเดสก์ท็อป ภาพหน้าจอมาจากเว็บตัวอย่าง

ในแท็บ Preview ปุ่ม "Open website" เปิดเว็บ WordPress บนเครื่อง และ "WordPress admin" เปิดแดชบอร์ด ถ้าอยากเปลี่ยนอะไร ให้พิมพ์ในแชตด้านขวา การเปลี่ยนแปลงจะแสดงในตัวอย่างภายในไม่กี่วินาที จากนั้นคลิก Make release แล้วแอปจะแพ็กธีมให้ตรงตามที่คุณเห็นในตัวอย่าง

แอป html2wp หลังแก้ไขผ่านแชต พร้อมปุ่ม Make release — หลังแก้ไขในแชต แอปแสดงจำนวนการเปลี่ยนแปลงและปุ่ม "Make release"

แปลง Lovable เป็น WordPress เสร็จแล้ว: ส่งออกธีม

เมื่อคุณแปลง Lovable เป็น WordPress เสร็จ ไฟล์ที่เสร็จแล้วอยู่ในแท็บ Exports ข้างธีม WordPress ให้คลิก "Save" แล้วเก็บไฟล์ ZIP ไว้ ในแท็บนี้ยังมีรายงานการแปลงเป็น PDF, ZIP ของโปรเจกต์ต้นฉบับ และหลังการแปลงแบบ Flash จะมีโปรเจกต์ Astro 5 ด้วย

แท็บ Exports ในแอป html2wp หลังแปลง Lovable เป็น WordPress พร้อม ZIP ของธีมและรายงานการแปลง — ธีมเป็นไฟล์ ZIP รายงานการแปลง และโปรเจกต์ต้นฉบับ

ใน WordPress ไปที่ Appearance → Themes → Add New → Upload Theme เลือกไฟล์ ZIP แล้วเปิดใช้งานธีม หน้า บล็อก ฟอร์ม เมนู SEO และการ redirect เป็นส่วนหนึ่งของธีมทั้งหมดและทำงานโดยไม่ต้องใช้ปลั๊กอิน

ถ้าอยากให้ลูกค้าแก้ไขข้อความและรูปภาพด้วยการคลิกบนหน้าเว็บ ให้เพิ่มตัวแก้ไข Visual Edit ถ้าชอบทำงานกับเอเจนต์ในเทอร์มินัลมากกว่า คู่มือที่ใช้ปลั๊กอินสำหรับ Claude Code และ Codex อธิบายการแปลงเดียวกันไว้

แปลง Lovable เป็น WordPress: ทีละขั้นตอนในแอป html2wp