ใช้ Gutenberg Block Editor สำหรับมือใหม่

Gutenberg คืออะไร ต่างจาก Classic Editor

Gutenberg คือ Block Editor ที่เป็นค่ามาตรฐานของ WordPress ตั้งแต่เวอร์ชัน 5.0 แทน Classic Editor แบบกล่องข้อความเดียว แนวคิดคือทุกอย่างในหน้าเป็น "Block" — ย่อหน้า, หัวข้อ, รูป, ปุ่ม, ตาราง — ที่ลาก/จัดเรียง/ปรับแต่งแยกกันได้ ทำให้จัดหน้าสวยโดยไม่ต้องเขียน HTML

หน้าตาและการเพิ่ม Block

1. เข้า Posts → Add New จะเห็นพื้นที่เขียนว่างๆ พร้อมข้อความ "Type / to choose a block"
2. กดปุ่ม "+" มุมซ้ายบนหรือในบรรทัด เพื่อเลือก Block
3. พิมพ์ / ตามด้วยชื่อ Block เช่น /image, /heading เพื่อเพิ่มเร็วๆ
4. คลิกที่ Block แล้วใช้ Toolbar ด้านบนและ Settings ด้านขวาปรับแต่ง

Block ที่ใช้บ่อยที่สุด

• Paragraph — ย่อหน้าข้อความพื้นฐาน
• Heading — หัวข้อ H2/H3/H4 สำคัญต่อโครงสร้างและ SEO
• Image / Gallery — รูปเดี่ยวหรือแกลเลอรี รองรับ Caption และ Alt Text
• List — รายการแบบ Bullet หรือเลขลำดับ
• Quote / Pullquote — ยกคำพูดเด่น
• Button — ปุ่ม Call-to-Action ลิงก์ไปหน้าอื่น
• Columns — แบ่งหน้าเป็นหลายคอลัมน์
• Table — ตารางข้อมูล
• Cover — รูปพื้นหลังพร้อมข้อความซ้อน

จัด Layout ด้วย Columns และ Group

ใช้ Block "Columns" แบ่งเนื้อหาเคียงกัน เช่น รูปซ้าย-ข้อความขวา และใช้ "Group" รวมหลาย Block เป็นกลุ่มเดียวเพื่อกำหนดสีพื้นหลังหรือระยะห่างพร้อมกัน บนมือถือ Columns จะ Stack เป็นแนวตั้งอัตโนมัติ ทำให้ Responsive โดยไม่ต้องตั้งเอง

Reusable Block และ Patterns — ประหยัดเวลา

ถ้ามีบล็อกที่ใช้ซ้ำบ่อย เช่น กล่อง CTA ท้ายบทความ ให้บันทึกเป็น "Synced Pattern" (เดิมชื่อ Reusable Block) แก้ที่เดียวจะอัปเดตทุกที่ที่ใช้ ส่วน "Patterns" คือชุด Block สำเร็จรูป (Hero, Pricing, Gallery) ที่แทรกแล้วแก้ข้อความได้เลย

# วิธีบันทึก Synced Pattern
1. เลือก Block (หรือหลาย Block ด้วย Group)
2. คลิกเมนู ⋮ (Options) บน Toolbar
3. เลือก "Create pattern / Reusable block"
4. ตั้งชื่อ แล้วเลือก "Synced" เพื่อให้แก้ที่เดียวอัปเดตทุกที่

เคล็ดลับเขียนเนื้อหาให้ SEO ดี

• ใส่ Alt Text ทุกรูปใน Settings ของ Image Block
• แบ่งเนื้อหาด้วย Heading เป็นช่วงๆ ให้สแกนอ่านง่าย
• ใช้ List แทนย่อหน้ายาวเมื่อเป็นรายการ
• เพิ่มลิงก์ภายใน (Internal Link) ไปบทความที่เกี่ยวข้อง
• ดู Document Outline (ไอคอน ⓘ ด้านบน) เพื่อตรวจโครงสร้างหัวข้อ

ตรวจสอบว่าบทความแสดงผลถูกต้อง

# 1. ดูตัวอย่างก่อนเผยแพร่
กดปุ่ม "Preview" → เลือก Desktop / Tablet / Mobile
ตรวจว่า Columns Stack ถูกต้องบนมือถือ

# 2. ตรวจโครงสร้างหัวข้อ
คลิกไอคอน Document Overview (ⓘ) ด้านบนซ้าย
→ ดูว่า H2/H3 เรียงลำดับสมเหตุสมผล

# 3. ตรวจหลัง Publish
เปิดหน้าจริงในเบราว์เซอร์ → ตรวจรูปโหลดครบ, ปุ่มลิงก์ถูก, ไม่มี Block พัง

แก้ปัญหาที่พบบ่อย

คิดถึง Classic Editor อยากกลับไปใช้แบบเดิม

ติดตั้งปลั๊กอิน "Classic Editor" (ของ WordPress ทางการ) จะกลับไปใช้ Editor แบบเดิมได้ แต่แนะนำให้ลองคุ้นกับ Gutenberg ก่อน เพราะเป็นทิศทางหลักของ WordPress ในอนาคต

Block พังหรือขึ้น "This block contains unexpected content"

มักเกิดจากแก้ HTML ใน Code Editor ผิด หรือ Block ของปลั๊กอินที่ถูกปิดไป กดปุ่ม "Attempt Block Recovery" ถ้าไม่ได้ ให้แปลงเป็น HTML Block เพื่อกู้เนื้อหา

วางข้อความจาก Word แล้วฟอร์แมตเพี้ยน

Word แฝงโค้ดจัดรูปแบบมาด้วย ให้วางด้วย Paste as Plain Text (Ctrl+Shift+V) แล้วค่อยจัดฟอร์แมตใน Gutenberg ใหม่

Editor โหลดช้าหรือค้างเมื่อบทความยาว

บทความที่มี Block จำนวนมากกินทรัพยากรเบราว์เซอร์ ลองปิดปลั๊กอิน Block เสริมที่ไม่จำเป็น เพิ่ม memory_limit ฝั่ง PHP และแบ่งบทความยาวมากๆ เป็นหลายหน้า

คำถามที่พบบ่อย

Q: Gutenberg แทน Page Builder อย่าง Elementor ได้ไหม?

A: สำหรับบทความและหน้าทั่วไป Gutenberg เพียงพอและเบากว่า แต่ถ้าต้องการออกแบบ Landing Page ซับซ้อนแบบลากวาง Elementor ยังยืดหยุ่นกว่า อ่านเพิ่มที่ ใช้ Elementor สร้างหน้าเว็บ

Q: Block ของปลั๊กอินปลอดภัยไหม?

A: ปลอดภัยถ้ามาจากปลั๊กอินที่น่าเชื่อถือและอัปเดตสม่ำเสมอ เลือกชุด Block ยอดนิยม (เช่น Kadence, GenerateBlocks) และอย่าติดตั้งหลายชุดพร้อมกันเพราะทำให้ Editor หนัก

Q: เนื้อหาที่เขียนด้วย Classic จะเสียไหมเมื่อเปลี่ยนมา Gutenberg?

A: ไม่เสีย เนื้อหาเดิมจะอยู่ใน "Classic Block" เดียว คุณเลือก "Convert to Blocks" เพื่อแยกเป็น Block ย่อยได้ภายหลังเมื่อพร้อม