ใช้ Gutenberg Block Editor อย่างมีประสิทธิภาพ

Categories

Gutenberg Block Editor คืออะไร

Gutenberg Block Editor เป็นตัวแก้ไข (Editor) ของ WordPress ที่ได้รับการออกแบบใหม่โดยเน้นการใช้งานง่าย ผ่านระบบ “Blocks” หรือบล็อกต่างๆ ที่สามารถลากไปวาง (Drag and Drop) ได้ทันที โดยไม่ต้องเขียน Code แต่อย่างใด บล็อกต่างๆ นี้รวมถึง ข้อความ รูปภาพ วิดีโอ บัตรสินค้า ตารางข้อมูล และอีกมากมาย ซึ่งช่วยให้ผู้สร้างบทความของทั้ง WordPress สามารถสร้างเนื้อหาได้อย่างมีประสิทธิภาพ

ข้อดีของการใช้ Gutenberg Block Editor

  • ใช้งานง่าย — ไม่ต้องเขียน HTML หรือ CSS ลากบล็อกไปวางแล้วเสร็จ
  • มองเห็นผลแบบ Real-Time — สิ่งที่คุณแก้ไข จะแสดงผลได้ทันที (What You See Is What You Get – WYSIWYG)
  • มีบล็อกเพียบพร้อมใช้ — เลือกใช้บล็อกที่ต้องการโดยไม่ต้องทำเอง
  • ความเป็นไปได้ไม่มีที่สิ้นสุด — สามารถติดตั้ง Plugin สำหรับเพิ่มบล็อกใหม่ได้ เช่น Advanced Custom Fields (ACF), Elementor, Divi, หรืออื่นๆ
  • ต่อเข้าได้กับ Theme Block-Based — Theme สมัยใหม่ที่เขียนด้วย Block Theme สามารถใช้งาน Gutenberg ได้อย่างเต็มประสิทธิภาพ

วิธีใช้ Gutenberg Block Editor อย่างมีประสิทธิภาพ

1. เรียนรู้บล็อกพื้นฐาน

เมื่อเปิด WordPress Editor ครั้งแรก คุณจะเห็นเครื่องมือต่างๆ อยู่ด้านบน ที่สำคัญที่สุดคือ ปุ่ม “+” ซึ่งสำหรับเพิ่มบล็อกใหม่ ลองกดปุ่มนี้เพื่อเพิ่มบล็อก “Paragraph” (ข้อความ) ลงในบทความของคุณ

2. ใช้ Keyboard Shortcuts เพื่อความรวดเร็ว

เมื่อคุณต้องการความเร็ว ให้ใช้ Keyboard Shortcuts แทนการคลิกด้วยเมาส์:

  • Ctrl + Alt + T (หรือ Cmd + Alt + T บน Mac) — เพิ่มบล็อก Title
  • Ctrl + Alt + P (หรือ Cmd + Alt + P บน Mac) — เพิ่มบล็อก Paragraph
  • Slash Commands (/) — พิมพ์ “/” เพื่อเรียกรายการบล็อก เช่น “/image”, “/table”, “/list” เป็นต้น
  • Ctrl + Z (หรือ Cmd + Z บน Mac) — ยกเลิกการเปลี่ยนแปลง (Undo)
  • Ctrl + Shift + Z (หรือ Cmd + Shift + Z บน Mac) — ทำซ้ำการเปลี่ยนแปลง (Redo)

3. จัดระเบียบเนื้อหาด้วยบล็อก Grouping

เมื่อเนื้อหาของคุณมีจำนวนมาก ให้ใช้บล็อก “Group” เพื่อจัดกลุ่มบล็อกต่างๆ เข้าด้วยกัน และตั้งค่ารูปแบบให้สม่ำเสมอทั้งหมด

4. ใช้บล็อก Column เพื่อสร้างเลย์เอาต์หลายคอลัมน์

เมื่อต้องการให้บทความของคุณมีมากกว่าหนึ่งคอลัมน์ ให้ใช้บล็อก “Columns” เพื่อแบ่งพื้นที่เป็นหลายส่วน

5. เพิ่มรูปภาพและวิดีโออย่างฉลาด

บล็อก Image และ Video ของ Gutenberg รองรับการตั้งค่า Caption, Alt Text, และ Link สำคัญมากที่จะตั้งค่า Alt Text ของรูปภาพเพื่อให้ SEO ดีขึ้นและเข้าถึงได้สำหรับผู้ใช้ Screen Reader

6. ลองใช้ Advanced Blocks สำหรับนักสร้างเนื้อหา

นอกเหนือจากบล็อกพื้นฐาน Gutenberg ยังมี Advanced Blocks เช่น:

  • Code Block — สำหรับแทรก Code snippet
  • Quote Block — สำหรับไฮไลต์ข้อความสำคัญ
  • List Block — สำหรับสร้างรายการ
  • Table Block — สำหรับสร้างตารางข้อมูล
  • File Block — สำหรับเพิ่มความสามารถให้ผู้อ่านดาวน์โหลดไฟล์

7. ตั้งค่าคุณสมบัติบล็อกในแผง (Sidebar)

ทางด้านขวาของ Gutenberg Editor คุณจะเห็นแผง (Sidebar) ที่มีตัวเลือกต่างๆ สำหรับตั้งค่าบล็อก เช่น สี ขนาดตัวอักษร padding และอื่นๆ ลองคลิกแต่ละบล็อกและดูตัวเลือกที่มี

8. ใช้บล็อก Reusable สำหรับเนื้อหาที่ซ้ำกัน

หากคุณสร้างบล็อก (หรือกลุ่มบล็อก) ที่ใช้ซ้ำหลายครั้ง ให้สร้าง “Reusable Block” เพื่อให้บันทึกไว้ เมื่อไหร่ที่ต้องใช้ก็สามารถเรียกใช้ได้ทันที

9. ใช้ Plugin ที่เสริม Gutenberg

เพื่อเพิ่มความสามารถของ Gutenberg ลองติดตั้ง Plugin เช่น:

  • Advanced Custom Fields (ACF) — เพื่อสร้างฟิลด์แบบกำหนดเอง
  • Stackable — เพื่อเพิ่มบล็อกจำนวนมาก
  • CoBlocks — เพื่อเพิ่มบล็อกระดับสูง
  • GenerateBlocks — เพื่อสร้างเลย์เอาต์ที่มีความสามารถสูง

เคล็ดลับสำหรับสร้างบทความที่ดี

  • ใช้หัวข้อเพื่อแบ่งหัวข้อ — เพื่อให้บทความมีโครงสร้างที่ชัดเจน
  • แทรกรูปภาพที่สื่อสารได้ดี — รูปภาพที่มีคุณภาพช่วยดึงดูดผู้อ่าน
  • เขียนย่อหน้าที่สั้น — ทำให้เนื้อหาอ่านง่ายขึ้น
  • ตรวจสอบแบบร่างก่อนเผยแพร่ — ดูว่าบทความของคุณมีลักษณะเป็นอย่างไรก่อน
  • เก็บไฟล์เสริมอย่างรอบคอบ — อย่าลืมบันทึกบทความอย่างสม่ำเสมอโดยใช้ Ctrl + S