เข้าสู่ระบบและสมัครคอร์สนี้เพื่อดูเนื้อหา

เข้าสู่ระบบ 
⚠️ กฎเหล็กที่สำคัญที่สุด:ห้ามคัดลอกโค้ดตั้งแต่แท็ก <!DOCTYPE html> หรือ <html> ไปวางลงใน WordPress เด็ดขาด!

เพราะ WordPress มีโครงสร้างธีม (Theme) ของตัวเองคุมอยู่แล้ว หากวางแท็กโครงสร้างซ้ำซ้อน หน้าเว็บจะแสดงผลผิดเพี้ยน หรือพังทันที เราต้อง
“แยกเอาเฉพาะเนื้อหาข้างใน” ไปวางเท่านั้น

ขั้นตอนการแยกชิ้นส่วนโค้ดและติดตั้ง

Step 1: แยกชิ้นส่วนโค้ดออกเป็น 3 ส่วน

เปิดไฟล์โค้ดจาก Gemini Canvas แล้วคัดแยกออกเป็น 3 ก้อนดังนี้:

  1. ส่วน CSS (สไตล์): คัดลอกเฉพาะข้อความที่อยู่ระหว่างแท็ก <style> ถึง </style> (ไม่ต้องเอาตัวแท็ก style มา)
  2. ส่วน HTML (เนื้อหา): คัดลอกเฉพาะเนื้อหาที่อยู่ระหว่างแท็ก <body> ถึง </body> (ไม่ต้องเอาแท็ก <body> และ </body> มา)
  3. ส่วน JavaScript (การทำงาน): คัดลอกเฉพาะข้อความที่อยู่ระหว่างแท็ก <script> ถึง </script> (ไม่ต้องเอาตัวแท็ก script มา)

Step 2: สร้างหน้าใหม่ใน WordPress

  1. เข้าสู่ระบบหลังบ้าน WordPress ([yourwebsite.com/wp-admin](https://yourwebsite.com/wp-admin))
  2. ไปที่เมนู Pages (หน้า) > Add New Page (เขียนหน้าใหม่)
  3. ตั้งชื่อหน้าเว็บ เช่น “ฟอร์มติดต่อเรา”

Step 3: วางโค้ดลงใน Custom HTML Block

  1. ในพื้นที่พิมพ์เนื้อหา ให้กดเครื่องหมาย + (Add Block)
  2. พิมพ์ค้นหาคำว่า Custom HTML แล้วคลิกเลือกบล็อกนั้น
  3. นำโค้ดมาวางเรียงลำดับในกล่องข้อความดังนี้:
HTML
<style>
  /* วางโค้ดส่วน CSS ตรงนี้ */
</style>

<!-- วางโค้ดส่วน HTML (เนื้อหา) ตรงนี้ -->

<script>
  // วางโค้ดส่วน JavaScript ตรงนี้
</script>

Step 4: ตรวจสอบและบันทึก

  1. กดปุ่ม Preview (ดูตัวอย่าง) ด้านบนเพื่อตรวจสอบดีไซน์และการแสดงผล
  2. หากเรียบร้อย ให้กดปุ่ม Publish (เผยแพร่) หน้าเว็บจะพร้อมใช้งานทันที
💡 เทคนิคทำให้หน้าแก้ไขเป็นระเบียบ:
หากโค้ด CSS มีความยาวมาก คุณสามารถนำเฉพาะโค้ด CSS ไปใส่ไว้ที่เมนู Appearance (รูปแบบเว็บ) > Customize (ปรับแต่ง) > Additional CSS (CSS เพิ่มเติม) ของ WordPress ได้ วิธีนี้จะช่วยให้หน้าแก้ไขบล็อกไม่รกรุงรัง
คอร์ส: สร้างเว็บไซต์ด้วย Gemini Canvas