ปลั๊กอินสำหรับ Claude Code และ Codex

การติดตั้ง

ปลั๊กอินอยู่ใน repository บน GitHub สองแห่ง แห่งหนึ่งสำหรับ Claude Code อีกแห่งสำหรับ Codex ทั้งสองมีเนื้อหาและหมายเลขเวอร์ชันเหมือนกัน ต่างกันแค่วิธีที่แต่ละเครื่องมือโหลด ติดตั้งตัวที่ตรงกับเครื่องมือของคุณ เพราะอีกตัวจะโหลดไม่ขึ้น

สลับไปที่เครื่องมือของคุณแล้วรันทั้งสองคำสั่งตามลำดับ

คำสั่งแรกเพิ่มแค็ตตาล็อกปลั๊กอิน (marketplace) จาก GitHub แล้วคำสั่งที่สองติดตั้ง html2wp จากแค็ตตาล็อกนั้น Codex ต้องใช้ repository ของตัวเองเพราะค้นหาปลั๊กอินผ่านไฟล์ .agents/plugins/marketplace.json และ repository ของ Claude Code ไม่มีไฟล์นี้

การอัปเดต

คำสั่งอัปเดตมีชื่อต่างกันในแต่ละเครื่องมือ ใน Codex คือ upgrade ใน Claude Code คือ update:

ดูเวอร์ชันที่ติดตั้งอยู่ได้ด้วยคำสั่ง codex plugin list ใน Codex ส่วนใน Claude Code ไปที่ /plugin → Marketplaces → html2wp

ถ้าเวอร์ชันใน Codex ไม่เปลี่ยนหลังอัปเดต แสดงว่า Codex เก็บสำเนาเก่าไว้ ลบสำเนานั้นแล้วติดตั้งปลั๊กอินใหม่

ถ้ายังไม่ได้ผล Codex อาจมีสำเนาเก่าอีกชุดจากการติดตั้งด้วยมือ คำสั่ง codex plugin marketplace list จะแสดงทุกแค็ตตาล็อก ถ้าเห็น html2wp@<other-name> ในนั้น ให้ลบด้วย codex plugin remove html2wp@<that-name>

งานส่วนใหญ่เกิดขึ้นในบริการ html2wp และบริการอัปเดตตัวเอง การแปลงครั้งถัดไปของคุณจึงใช้เวอร์ชันใหม่อยู่แล้ว คุณต้องอัปเดตเฉพาะส่วนที่รันบนคอมพิวเตอร์ของคุณ ได้แก่ การตรวจ สคริปต์ และตัวกรองข้อมูลขาออก สิ่งที่เปลี่ยนในแต่ละเวอร์ชันอยู่ในประวัติ commit บน GitHub

ความต้องการของระบบ

คุณไม่ต้องตรวจเรื่องนี้เอง เมื่อเริ่มการแปลง ปลั๊กอินจะตรวจคอมพิวเตอร์ของคุณก่อนและแสดงรายการสิ่งที่ขาด

Node.js                ok        v22.14.0
Python                 ok        3.12.4
Playwright             MISSING   mirroring, prerendering and every screenshot
Docker                 NOT RUNNING  installed, but the daemon is not up

สำหรับแพ็กเกจที่ติดตั้งลงในโฟลเดอร์ผู้ใช้เท่านั้น เช่น Playwright หรือเบราว์เซอร์ chromium ปลั๊กอินจะเสนอติดตั้งให้ และถามก่อนทุกคำสั่ง สิ่งที่เปลี่ยนทั้งระบบ เช่น Docker Desktop หรือ Node.js เวอร์ชันใหม่กว่า ปลั๊กอินจะแค่แจ้ง แล้วรอจนกว่าคุณจะติดตั้งเอง

ถ้าคุณอยากติดตั้งแพ็กเกจ Python ด้วยมือ

ควรใช้โมเดลไหน

ระหว่างการแปลง AI ต้องตัดสินใจหลายเรื่อง เช่น หน้าไหนเป็นหน้าแรก ทำไมการตรวจไม่ผ่าน หรือลูกค้าจะสังเกตเห็นความต่างระหว่างภาพหน้าจอสองภาพหรือไม่ การเลือกโมเดลจึงมีผลต่อผลลัพธ์มากกว่าการตั้งค่าอื่นใด

ใน Claude Code, Opus 5 ทำงานหลัก และ Fable 5 ถูกปรึกษาในการตัดสินใจสำคัญ ซึ่งเป็นจุดที่การแปลงพลาดบ่อยที่สุด

คีย์ไลเซนส์

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

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

ไฟล์นี้ใช้เก็บคีย์ไลเซนส์ html2wp ที่คุณได้เมื่อซื้อ Pro คีย์ Visual Edit Pro ไม่ได้ใส่ที่นี่ คีย์นั้นคุณกรอกในปลั๊กอิน Visual Edit บนเว็บที่คุณแก้ไข และใช้กับการแปลงไม่ได้

ถ้าอยากรู้ว่าคีย์ใช้ได้หรือไม่ ใช้กับอะไร และใช้ได้ถึงเมื่อไร ให้รัน npx html2wp-license YOUR-KEY การตรวจคีย์ในหน้าไลเซนส์อธิบายความหมายของผลลัพธ์ สิ่งที่ไลเซนส์ให้และวิธีซื้ออยู่ในหน้าไลเซนส์

การแปลงโปรเจกต์

เปิดเทอร์มินัลในโฟลเดอร์ของโปรเจกต์ที่ต้องการแปลง แล้วเริ่มเอเจนต์ของคุณที่นั่น

ถ้าใช้ Claude Code ให้พิมพ์ claude แทน codex ในบรรทัดสุดท้าย

จากนั้นสั่งเอเจนต์ด้วยคำสั่งเดียว

แค่นั้นเอง คุณไม่ต้องรัน npm install หรือ npm run build และไม่ต้องตั้งค่าอะไร โปรเจกต์จาก Bolt, v0, shadcn หรือ Next.js export ก็แปลงแบบเดียวกัน ใน Claude Code คุณพิมพ์แค่ /html2wp:html2wp ก็ได้ หรือบอก Codex ให้ใช้ html2wp แล้วปลั๊กอินจะถามว่าจะแปลงอะไร

ช่วงไม่กี่นาทีแรกของการแปลง

> convert this project

  Checking this machine first…
    Node.js     ok    v22.14.0
    Playwright  MISSING
  Two Python packages are missing. Shall I install them? (they go in your
  user directory, no root)

> yes

  … installed. Building the project, then prerendering it.
  7 routes found: /, /about, /pricing, /blog, /blog/launch, /contact, /faq
  Decided: /blog is the listing, /blog/launch an article, the rest are pages.
  Written to the manifest; carrying on.

ในบรรทัดท้าย ๆ ปลั๊กอินบันทึกว่าจัดประเภทหน้าอย่างไร /blog คือหน้ารวมบทความ /blog/launch คือบทความ และที่เหลือเป็นหน้าทั่วไป ตรวจการตัดสินใจนี้บนเว็บที่เสร็จแล้วตอนท้าย

อินพุตแบบอื่น

คำสั่ง convert this project แปลงโฟลเดอร์ที่คุณอยู่ ถ้าไฟล์อยู่ที่อื่น ให้พิมพ์พาธไปยังไฟล์ เช่น convert ./dist

อินพุตต้องอยู่บนดิสก์ของคุณเสมอ ปลั๊กอินไม่แปลงที่อยู่ของเว็บที่ออนไลน์อยู่ ปลั๊กอินต้องใช้ไฟล์ที่ใช้สร้างเว็บ ไม่ใช่สิ่งที่เบราว์เซอร์แสดง

โปรเจกต์ Lovable แปลงอย่างไร

แอป Lovable สร้างด้วย React index.html ของแอปมีแค่ element ว่างกับสคริปต์ และหน้าเว็บจะมีชีวิตขึ้นมาในเบราว์เซอร์เท่านั้น ปลั๊กอินจึง build โปรเจกต์ก่อน เปิดในเบราว์เซอร์จริง แล้วบันทึกแต่ละหน้าเป็น HTML ที่เสร็จสมบูรณ์ รวมถึงเก็บเนื้อหาที่ปรากฏหลังสคริปต์ทำงานแล้วเท่านั้น เช่น accordion ที่เปิดอยู่หรือเมนูดรอปดาวน์ จากนั้นจึงสร้างธีมจากหน้าเหล่านี้ รายละเอียดอยู่ในคู่มือแปลง Lovable เป็น WordPress

สิ่งที่ปลั๊กอินตัดสินใจแทนคุณ

หน้าไหนเป็นหน้าอะไร

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

ถ้าจัดประเภทผิด การแก้ไม่แพง คุณแก้การจัดประเภทแล้วรันการแปลงอีกครั้ง นั่นคือการรันซ้ำ และไม่นับรวมในขีดจำกัดการแปลงของคุณ

จากนั้นส่วนใหญ่ทำงานเอง

Flash ใช้เวลาประมาณครึ่งชั่วโมง Full ประมาณหนึ่งชั่วโมง ขึ้นอยู่กับจำนวนหน้าและความเร็วของคอมพิวเตอร์ ระหว่างนั้นปลั๊กอินจะ build เว็บ เทียบกับต้นฉบับ และส่งไปแปลงที่บริการ html2wp หลังจากนั้นจะติดตั้งธีมที่เสร็จแล้วลงใน WordPress ชั่วคราวใน Docker บนคอมพิวเตอร์ของคุณและทดสอบที่นั่น

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

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

สิ่งที่คุณได้รับ

• ธีมเป็นไฟล์ ZIP คุณอัปโหลดขึ้น WordPress ที่ Appearance → Themes → Add New → Upload Theme ปลั๊กอินจะไม่สร้างธีมที่เสียเลย เช่น ถ้า PHP มี syntax error เนื้อหาหายไป ภาพหน้าจอของธีมมีขนาดผิด หรือซื้อของในร้านค้าไม่ได้
• รายงาน CONVERSION-REPORT.md ในโฟลเดอร์เดียวกับ ZIP แสดงรายการหน้าที่แปลงแล้ว เมนูที่เชื่อมต่อแล้ว ทุกอย่างที่คุณพบระหว่างการตรวจ คำเตือนทุกข้อจากการแปลง และสิ่งที่ยังต้องทำ
• ลิงก์ไปยัง Visual Edit Lite ตัวแก้ไขฟรีสำหรับการแก้ไขแบบชี้แล้วคลิก ตัวแก้ไขไม่ได้เป็นส่วนหนึ่งของธีม และธีมทำงานได้โดยไม่ต้องมีตัวแก้ไข Visual Edit Pro เป็นไลเซนส์แบบเสียเงินแยกต่างหาก

ธีมทำงานได้ด้วยตัวเอง หน้า บล็อก ฟอร์ม เมนู SEO และการ redirect เป็นส่วนหนึ่งของโค้ดธีมและทำงานโดยไม่ต้องใช้ปลั๊กอิน โค้ดเป็น PHP, CSS และ JavaScript ที่อ่านเข้าใจได้ เป็นของคุณและไม่ผูกกับเรา ธีมไม่เชื่อมต่อไปที่ใด วิธีแก้ไขด้วยการคลิกอธิบายไว้ในส่วน Visual Edit ของเอกสารแอป

อะไรออกจากคอมพิวเตอร์ของคุณ

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

การตรวจธีมรันฝั่งคุณ บริการจึงไม่เห็นผล ตอนท้ายปลั๊กอินจึงส่งผลไปให้ ข้อนี้บังคับ บริการจะไม่เริ่มการแปลงครั้งถัดไปจนกว่าการแปลงก่อนหน้าจะส่งผลแล้ว

• สิ่งที่ส่ง: ชื่อการตรวจ ผ่านหรือไม่ จำนวนหน้า เปอร์เซ็นต์ความตรงกันที่แย่ที่สุด และชื่อสั้นของหน้าที่ไม่ผ่าน เช่น about หรือ pricing
• สิ่งที่ไม่ส่ง: ที่อยู่หรือโดเมนของเว็บ โค้ด ข้อความ ภาพหน้าจอ พาธไฟล์ คีย์ไลเซนส์ หรือชื่อเว็บ ปลั๊กอินส่งเฉพาะช่องที่กำหนดไว้ล่วงหน้า ไม่มีอะไรอื่น
• ตรวจเองได้: คำสั่ง send-verdicts.sh <workspace> --dry-run พิมพ์สิ่งที่จะถูกส่งออกมาให้ดูโดยไม่ส่งอะไรเลย เป็นสคริปต์สั้น ๆ ไฟล์เดียวที่คุณอ่านได้

ปลั๊กอินไม่ส่งข้อมูลอื่น และธีมที่เสร็จแล้วไม่ส่งอะไรเลย คำอธิบายฉบับเต็ม รวมถึงระยะเวลาที่เราเก็บข้อมูล อยู่ในหน้าความเป็นส่วนตัว

การรายงานบั๊ก

ถ้าตัวแปลงเองทำผิดพลาด ให้รายงานด้วยคำสั่งนี้

ทุกรายงานมีคนอ่าน การแก้ไขจะเข้าไปในบริการ จึงช่วยผู้ใช้ทุกคน