ส่งออกจาก Claude Design: เปลี่ยนเป็นธีม WordPress ในแอป html2wp
คุณเปลี่ยนดีไซน์จาก Claude Design เป็น WordPress ได้ในแอป html2wp โดยไม่ต้องใช้เทอร์มินัล ในการส่งออก คุณบันทึกดีไซน์เป็น HTML จากนั้นเพิ่มเข้าแอป เลือก Flash หรือ Full แล้วตอนจบก็ดาวน์โหลดธีม WordPress ที่หน้าตาเหมือนดีไซน์ของคุณ
สิ่งที่ต้องมีเพื่อแปลงดีไซน์จาก Claude Design เป็น WordPress ในแอป
- Mac ที่ใช้ Apple silicon (M1 ขึ้นไป) และ macOS 12 ขึ้นไป
- บัญชี ChatGPT AI ในการสมัครใช้งานของคุณเองเป็นผู้แปลง คุณจึงไม่ต้องจ่ายค่าเครดิตให้เรา
- ไฟล์ที่ส่งออกจาก Claude Design: ดีไซน์ที่บันทึกเป็นไฟล์ HTML ถ้ามีหลายหน้า ให้บันทึกแต่ละหน้าเป็นไฟล์แยกกัน
HTML จาก Claude คือทางที่สั้นที่สุดสู่ธีม เพราะแอปไม่ต้อง build หรือเปิดในเบราว์เซอร์ก่อน แพ็กเกจฟรีแปลงได้สามเว็บ เว็บละไม่เกินห้าหน้า สำหรับงานให้ลูกค้า คุณต้องมีไลเซนส์ Pro จากหน้าราคา
การติดตั้ง สภาพแวดล้อม และการเข้าสู่ระบบ
ดาวน์โหลดแอปสำหรับ Mac แล้วย้ายไปไว้ในโฟลเดอร์ Applications ใน "Settings" ให้คลิก Prepare environment แล้วแอปจะดาวน์โหลด Docker และสภาพแวดล้อมการแปลง จากนั้นเข้าสู่ระบบด้วย Connect with ChatGPT คู่มือ Lovable สำหรับแอป อธิบายแต่ละขั้นตอนนี้อย่างละเอียดพร้อมภาพหน้าจอ และสำหรับ Claude ขั้นตอนก็เหมือนกัน
นำดีไซน์ที่ส่งออกจาก Claude Design เข้าแอป
ในการส่งออก ให้ดาวน์โหลดอาร์ทิแฟกต์ใน Claude เป็นไฟล์ .html สร้างโฟลเดอร์แล้วบันทึกไฟล์ไว้ในนั้นในชื่อ index.html ถ้าดีไซน์ลิงก์ไปยังรูปภาพที่ไม่ได้อยู่ในไฟล์ ให้วางรูปไว้ในโฟลเดอร์เดียวกัน ในตำแหน่งที่โค้ดคาดไว้ หน้าอื่น เช่น เกี่ยวกับเรา หรือติดต่อ ให้วางไว้ข้าง ๆ เป็น about.html และ contact.html แอปดูจากชื่อไฟล์ว่าหน้าไหนเป็นหน้าอะไร
ในแอป คลิก New project (⌘N) คงผลลัพธ์ไว้ที่ "HTML WordPress theme" แล้วเลือก "Choose a folder" ถ้าคุณบีบอัดโฟลเดอร์เป็น ZIP แล้ว ให้ใช้ "Import a ZIP" แทน
Flash หรือ Full สำหรับดีไซน์จาก Claude Design
Flash คือค่าเริ่มต้น แต่ละขั้นตอนรันครั้งเดียว และใช้เวลาประมาณครึ่งชั่วโมง Full รันการตรวจทุกอย่างและพยายามแก้ข้อผิดพลาด จึงใช้เวลาประมาณหนึ่งชั่วโมง ดีไซน์หน้าเดียวมักอยู่ฝั่งที่สั้นกว่า แต่การตรวจยังรันครบ
ระหว่างการแปลง แท็บ "Overview" แสดงว่าแอปกำลังทำอะไร ถ้าต้องการหยุดชั่วคราว คลิก Stop conversion แล้วทำต่อด้วย "Continue"
ตรวจดีไซน์ในแอป
แท็บ Compare (เปรียบเทียบ) แสดงต้นฉบับกับเวอร์ชัน WordPress เคียงกัน ที่ความกว้างเดสก์ท็อปและมือถือ ดูทุกหน้า เพราะการตรวจอัตโนมัติจับความต่างได้เกือบทั้งหมด แต่ไม่ใช่ทั้งหมด ถ้ามีอะไรไม่ตรง ให้เขียนในแชต การเปลี่ยนแปลงจะเกิดในตัวอย่าง แล้ว "Make release" จะแพ็กธีมเวอร์ชันใหม่
ส่งออกธีมจาก Claude Design เป็น WordPress
ในแท็บ Exports คลิก "Save" ข้างธีม WordPress แล้วเก็บไฟล์ ZIP ไว้ ใน WordPress คุณอัปโหลดที่ Appearance → Themes → Add New → Upload Theme ธีมทำงานได้ด้วยตัวเอง หน้า ฟอร์ม เมนู และ SEO ทำงานโดยไม่ต้องใช้ปลั๊กอิน
ตัวแก้ไข Visual Edit เพิ่มการแก้ไขด้วยการคลิกให้ลูกค้าของคุณ ถ้าคุณทำงานในเทอร์มินัล คู่มือที่ใช้ปลั๊กอินสำหรับ Claude Code และ Codex อธิบายการแปลงเดียวกันไว้