จาก Lovable สู่ WordPress: แปลงโปรเจกต์เป็นธีมจริง

ตัวอย่างการแปลง Lovable เป็น WordPress ที่เปิดดูได้ทั้งสองฝั่ง

ทุกอย่างด้านล่างอธิบายการแปลงที่เราทำจริง ต้นฉบับคือแอป Lovable bruce-banner.lovable.app พอร์ตโฟลิโอภาพถ่าย ผลลัพธ์คือ bruce.html2wp.dev ซึ่งทำงานบน WordPress คุณเข้าหน้าแอดมินได้ที่ /wp-admin ด้วยชื่อผู้ใช้ demo และรหัสผ่าน demo

การแปลงได้ห้าหน้าและห้าโพสต์บนธีม bruce-banner ซึ่งอยู่ในแพ็กเกจฟรี ที่แปลงได้ครั้งละไม่เกินห้าหน้าและไม่ต้องใช้คีย์ เปิดทั้งสองเว็บเทียบกันก่อนอ่านต่อ บทความนี้พูดถึงความต่างระหว่างสองเว็บนั้น คุณจึงวัดเองได้

ยังมีการแปลงจาก Lovable อีกสองงานที่เปิดดูได้แบบเดียวกัน งานแรก spark-remix-kindred.lovable.app กลายเป็น terra.html2wp.dev ร้านเสื้อผ้าถักบน WooCommerce งานที่สอง bloom-echo-remix.lovable.app กลายเป็น soria.html2wp.dev เว็บของช่างภาพงานแต่งงาน ทั้งสามเว็บเข้าสู่ระบบแอดมินของ WordPress ด้วย demo / demo

คอมพิวเตอร์ต้องมีอะไรเพื่อแปลง Lovable เป็น WordPress

การ build งานในเบราว์เซอร์ และการตรวจทั้งหมดรันบนเครื่องของคุณ มีเพียงผลลัพธ์ที่ build แล้วที่ส่งไปยังบริการที่สร้างธีม นี่จึงไม่ใช่เว็บเซอร์วิสที่คุณอัปโหลด ZIP และมีความต้องการของระบบที่ควรรู้ไว้ก่อน

• Node 20 ขึ้นไป สำหรับการ build และสคริปต์บนเครื่อง
• Python 3 พร้อมแพ็กเกจ Playwright และ Pillow Playwright ควบคุมเบราว์เซอร์จริง และนั่นคือวิธีที่แอป React กลายเป็น HTML
• Docker พร้อมคำสั่ง docker compose ซึ่งเปิด WordPress ชั่วคราวบนคอมพิวเตอร์ของคุณ และตัวแปลงจะตรวจธีมที่นั่นก่อนที่คุณจะเห็น
• php-cli เพราะไฟล์ PHP ทุกไฟล์ผ่านการตรวจไวยากรณ์ก่อนเข้าไปใน ZIP
• 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

สำหรับแพ็กเกจฟรีไม่ต้องตั้งค่าอะไรอีก ไม่ต้องใช้คีย์ ไม่ต้องสมัคร ไม่ต้องใช้บัตร ถ้าไม่อยากทำงานในเทอร์มินัล คุณรันการแปลงเดียวกันได้ในแอปเดสก์ท็อป html2wp (คู่มือพร้อมภาพหน้าจอ)

วิธีนำโปรเจกต์ Lovable ลงดิสก์ของคุณ

ที่อยู่ของเว็บที่ออนไลน์อยู่ไม่ใช่อินพุตที่รองรับ และเราตั้งใจให้เป็นแบบนั้น สำเนาของหน้าที่เผยแพร่แล้วเก็บไว้แค่ผลลัพธ์ที่แสดงผล แต่สูญเสียสิ่งที่ซอร์สโค้ดรู้ ได้แก่ มี route อะไรบ้าง คอมโพเนนต์คืออะไร และการ build ให้ผลอะไร

อินพุตจึงเป็นโฟลเดอร์ Lovable ซิงก์โปรเจกต์ของคุณไปที่ repository บน GitHub เชื่อมต่อ แล้ว clone มา คุณก็มีโปรเจกต์บนเครื่อง ไม่ว่าหน้าตาของ Lovable เดือนนี้จะเป็นอย่างไร repository คือสิ่งที่คุณต้องการ เพราะเป็นไฟล์ชุดเดียวกับที่ Lovable ใช้สร้างเว็บ

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

คุณไม่ต้องรัน npm install หรือ build ก่อน การแปลงทำให้เอง

พิมพ์ "convert this project"

ในโฟลเดอร์นั้น เมื่อเปิดเอเจนต์ไว้แล้ว ให้พิมพ์

/html2wp:html2wp

convert this project

Codex ไม่มีคำสั่งแบบ slash ให้บอกว่า convert this project into a verified WordPress block theme แล้ว Codex จะหา skill เอง ทั้งใน Claude Code และ Codex ประโยคนั้นคือคำสั่งทั้งหมด คุณไม่ต้องเขียนไฟล์ config และไม่ต้องเลือกคำสั่ง build

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

React เกิดอะไรขึ้นเมื่อแปลง Lovable เป็น WordPress

นี่คือขั้นตอนที่โปรเจกต์ Lovable เพิ่มเข้ามา

แอป Lovable รุ่นเก่า (React และ Vite) มี index.html เพียงไฟล์เดียว ส่วน body เป็น element ว่างที่แอป React เมานต์เข้าไป บวกแท็ก script จึงไม่มีอะไรให้แปลง ตัวแปลงจึง build โปรเจกต์ก่อน จากนั้นเบราว์เซอร์จริงจะไล่ผ่านทุก route ขณะที่ตัวบันทึกคอยดู ผลลัพธ์คือ HTML แบบแบนต่อหนึ่ง route ซึ่งเป็นสิ่งที่กระบวนการส่วนที่เหลือต้องการพอดี ส่วนโปรเจกต์รุ่นใหม่บน TanStack Start เรนเดอร์หน้าเว็บบนเซิร์ฟเวอร์อยู่แล้ว แต่ตัวแปลงก็ยัง build และไล่ทุก route ด้วยวิธีเดียวกัน

สิ่งที่ตัวบันทึกเก็บไว้

• สถานะที่มีอยู่หลัง JavaScript ทำงานแล้วเท่านั้น accordion ที่เปิดอยู่ เนื้อหาในดรอปดาวน์ class ที่สคริปต์เปลี่ยน ตัวบันทึกเก็บเป็นข้อมูลบน element และ runtime ขนาดเล็กแบบทั่วไปจะเล่นซ้ำ ไม่มีใครเขียนขึ้นใหม่จากความจำ
• จุดเปลี่ยนตอนเลื่อนหน้า แม่นยำระดับพิกเซล header ที่เปลี่ยนที่ scrollY > 40 ใช้ตัวเลขที่มีคนตั้งขึ้นมาเอง ตัวบันทึกหาตัวเลขนั้นเจอและคำนวณตำแหน่งที่แน่นอน ถ้าเดาแบบปัดเศษ header จะเปลี่ยนผิดจังหวะไปตลอด
• ความสัมพันธ์แบบ "เปิดได้ทีละอัน" คุณเปิด A แล้วเปิด B แล้ว A ปิดไหม การบันทึกทีละ element บอกไม่ได้ ตัวบันทึกจึงทดสอบเรื่องนี้แยกต่างหาก
• แอนิเมชันตอนเลื่อนเข้าหน้ายังอยู่ครบ ตัวบันทึกเก็บไว้ และธีมเล่นซ้ำเหมือนต้นฉบับทุกประการ เนื้อหายังมองเห็นได้โดยไม่มี JavaScript element จะซ่อนเฉพาะตอน runtime ทำงาน และเมื่อตั้งค่า prefers-reduced-motion ธีมจะข้ามแอนิเมชัน เราวัดความตรงกันแบบ 1:1 ในสถานะนิ่ง หลังแอนิเมชันจบแล้ว

สิ่งที่ไม่แกล้งทำ

• พฤติกรรมที่บันทึกไม่ได้จะถูกจดลงรายการ แต่ละหน้ามีรายการของตัวเอง อ่านด้วย

ขั้นตอนนี้มีการตรวจของตัวเอง เพราะการตรวจภายหลังมองไม่เห็น ตัวแปลงถ่ายภาพหน้าจอทุก route ขณะทำงานจริง แล้วเทียบกับภาพที่บันทึกแบบนิ่งที่ความกว้าง 1440, 820 และ 390 พิกเซล ถ้าต่างกัน ขั้นตอนนี้ไม่ผ่าน ทุกขั้นตอนหลังจากนี้วัดจากภาพที่บันทึกไปจนถึง WordPress ข้อบกพร่องที่เกิดตรงนี้จึงหลุดผ่านทุกขั้นได้

การตรวจที่ข้ามไม่ได้

เมื่อการตรวจอัตโนมัติจบ การแปลงยังไม่เสร็จ ตัวแปลงจะวางแต่ละหน้าไว้ในภาพเดียวคู่กับต้นฉบับ และคุณอ่านทุกภาพตั้งแต่บนลงล่าง

ในการแปลงครั้งหนึ่ง ส่วนทั้งส่วนที่อยู่ลึกลงไปในหน้าหายไป และการเทียบพิกเซลแสดงความต่างแค่ 0.4% หน้านั้นผ่านการตรวจทั้งที่ไม่มีส่วนนั้น การตรวจอัตโนมัติมองไม่เห็นข้อบกพร่องสามแบบโดยธรรมชาติ แบบแรกคือปุ่มควบคุมที่ดูสมบูรณ์แต่ไม่ทำอะไร แบบที่สองคือค่าที่ฝังตายตัวมาจากหน้าเดียวที่ใช้สร้างเทมเพลต แบบที่สามคืออะไรก็ตามที่ปรากฏหลังเลื่อนหน้า คลิก หรือส่งฟอร์มเท่านั้น

ตรวจด้วยว่าแก้ไขเนื้อหาได้หรือไม่ ไม่ใช่แค่ดูว่าหน้าตาถูกต้อง หน้าอาจตรงกันทุกพิกเซล แต่เจ้าของเว็บอาจแก้ FAQ หรือตารางฟีเจอร์ไม่ได้ เราเจอกรณีนี้จริง accordion ที่มีห้าคำถามดูเหมือนเดิมทุกอย่าง แต่ไม่มีตัวแก้ไขใดเปิดให้แก้ การตรวจที่ดูแค่หน้าตาปล่อยให้ผ่านไป สำหรับทุกหน้า ให้ถามว่าคุณแก้ไขกลุ่มที่ซ้ำกันแต่ละกลุ่มและข้อความแต่ละบล็อกจาก wp-admin ได้หรือไม่

ติดตั้งธีม

โฟลเดอร์โปรเจกต์ของคุณจะได้ไฟล์ ZIP ของธีม และข้าง ๆ กันคือ CONVERSION-REPORT.md ไม่มีอะไรอื่น โฟลเดอร์ทำงานที่มีผล build อยู่นอกโปรเจกต์ของคุณในโฟลเดอร์แคช repository ของคุณจึงสะอาด รายงานเป็นข้อยกเว้น เพราะผู้อ่านคือคุณ รายงานบอกว่าการแปลงครอบคลุมอะไร การตรวจพบอะไร คำเตือนทุกข้อ (รวมถึงข้อที่ยอมรับได้) และสิ่งที่ยังค้างอยู่

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

แก้ไขเว็บหลังแปลง Lovable เป็น WordPress: สามทาง

โพสต์บล็อกจะกลายเป็นโพสต์ WordPress ธรรมดา คุณจึงเขียนใน block editor ได้ทันที ส่วนข้อความของหน้าเว็บยังอยู่ใน HTML ของคุณ และสำหรับส่วนนี้มีสองทางเลือกที่ควรรู้ หนึ่งในนั้นคือ page builder

ถ้าคุณแปลงเพื่อให้ดีไซน์อยู่รอด page builder คือสิ่งที่ทำลายดีไซน์นั้น การย้ายดีไซน์เข้า builder ด้วยมือคือขั้นตอนที่ทำให้เว็บไม่เหมือนดีไซน์อีกต่อไป และนั่นคือเหตุผลที่ตัวแปลงนี้มีอยู่ แต่ถ้าดีไซน์เป็นแค่จุดเริ่มต้น และไตรมาสหน้าลูกค้าจะสร้างใหม่ครึ่งหนึ่งอยู่แล้ว ก็ให้ Elementor ไปได้เลย

Lite หรือ Pro ถ้าคุณเลือก Visual Edit

แชต AI ใน Pro ใช้ API key ของคุณเอง เราไม่ขายโทเค็นให้คุณ และคุณจ่ายค่าใช้งานโดยตรงกับผู้ให้บริการของคุณ

Lovable หรือ WordPress? ไม่ต้องเลือก

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

สิ่งที่ย้ายคือเว็บไซต์ ได้แก่ หน้า บล็อก ฟอร์ม เมนู SEO และการ redirect สิ่งที่ไม่ย้ายคือแอปพลิเคชันเบื้องหลัง ได้แก่ การเข้าสู่ระบบ ฐานข้อมูล และการเรียก API ของคุณเอง ถ้าโปรเจกต์ Lovable ของคุณส่วนใหญ่เป็นแบบนั้น ให้เก็บไว้ใน Lovable ร้านค้าอยู่ตรงกลาง เมื่อมีไลเซนส์ Pro แค็ตตาล็อกสินค้าจะกลายเป็น WooCommerce เหมือนที่เกิดกับ Terra Studios

การแปลง Lovable เป็น WordPress มีค่าใช้จ่ายเท่าไรและปฏิเสธอะไร

แพ็กเกจฟรีเปิดให้ทุกคน ไม่ต้องใช้คีย์และไม่ต้องสมัคร แปลงได้สามครั้ง ครั้งละห้าหน้า และรันซ้ำได้รวมห้าครั้ง ทั้งสองจำนวนนับต่อที่อยู่ IP ออฟฟิศที่ใช้ที่อยู่ร่วมกันจึงได้สิทธิ์ชุดเดียวสำหรับทุกคน แพ็กเกจฟรีมีไว้สำหรับลองใช้เครื่องมือ เว็บส่วนตัว และงานที่ไม่ใช่เชิงพาณิชย์

ไลเซนส์ Pro ปลดขีดจำกัดจำนวนหน้า และทำให้การแปลงและการรันซ้ำไม่จำกัด รวมถึงเพิ่มขั้นตอนที่เปลี่ยนร้านค้าเป็น WooCommerce ขั้นตอนนี้ไม่มีในแพ็กเกจฟรีเลย แอปจะปฏิเสธการแปลงฟรีของเว็บที่มีร้านค้าทั้งหมด แทนที่จะทำแค่ครึ่งเดียว Pro ราคา €49 ต่อเดือนหรือ €490 ต่อปี ราคาอยู่ในหน้าราคา ระหว่างช่วงเบต้า การชำระเงินครั้งแรกถูกลง 30% และคีย์ส่งถึงทางอีเมล

มีการปฏิเสธสองแบบที่ควรรู้ไว้ก่อน โปรเจกต์ React ที่มี route เฉพาะต่อระเบียนข้อมูล (/product/:id โดยไม่มีข้อมูลให้แสดงผล) คือเว็บแอป ไม่ใช่เว็บที่จะแปลง ตัวแปลงจะปฏิเสธอย่างเปิดเผย แทนที่จะส่งเทมเพลตออกมาหนึ่งตัวอย่างแบบสุ่ม และนี่คือเบต้า การตรวจจับความต่างได้เกือบทั้งหมด ไม่ใช่ทั้งหมด การตรวจทีละหน้าจึงเป็นส่วนหนึ่งของกระบวนการ ไม่ใช่การเก็บงานที่จะทำหรือไม่ก็ได้

คู่มือทีละขั้นตอนของกระบวนการทั้งหมดอยู่ในเอกสารของแอป html2wp การแปลงจาก Lovable ทั้งสามงานที่เปิดดูได้ทั้งต้นทางและปลายทางอยู่ในตัวอย่างตอนต้นของบทความนี้