Gutenberg คืออะไร? วิธีใช้ Block Editor ของ WordPress เบื้องต้น

Gutenberg คือชื่อที่คนมักใช้เรียกตัวแก้ไขแบบบล็อกของ WordPress ซึ่งช่วยให้สร้างบทความและหน้าเว็บจากส่วนประกอบต่าง ๆ เช่น ย่อหน้า หัวข้อ รูปภาพ และปุ่ม แต่ละส่วนเรียกว่า “บล็อก” ผู้ใช้สามารถเพิ่ม จัดรูปแบบ และย้ายบล็อกได้โดยไม่ต้องเขียนโค้ด

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

❶ Gutenberg หรือ Block Editor คืออะไร?

Block Editor เป็นตัวแก้ไขเนื้อหาที่ติดตั้งมากับ WordPress สำหรับสร้างและจัดรูปแบบ Posts กับ Pages ผู้ใช้เลือกบล็อกที่ต้องการ แล้วเพิ่มเนื้อหาในแต่ละบล็อกได้โดยตรง

ตัวอย่างบล็อกพื้นฐาน ได้แก่:

• Paragraph สำหรับย่อหน้า
• Heading สำหรับหัวข้อ
• Image สำหรับรูปภาพ
• List สำหรับรายการ
• Quote สำหรับข้อความอ้างอิง
• Buttons สำหรับปุ่ม
• Columns สำหรับจัดเนื้อหาเป็นคอลัมน์

❷ วิธีเพิ่มบล็อกใน WordPress

เพิ่มบล็อกจากปุ่มเครื่องหมายบวก

1. เปิดบทความหรือหน้าเว็บที่ต้องการแก้ไข
2. คลิกปุ่ม + ในตัวแก้ไข
3. ค้นหาชื่อบล็อก เช่น Heading หรือ Image
4. คลิกบล็อกที่ต้องการ
5. พิมพ์ข้อความหรือเพิ่มเนื้อหาลงในบล็อก

เพิ่มบล็อกด้วยเครื่องหมายทับ

คลิกในพื้นที่ว่างของเนื้อหา พิมพ์ / แล้วตามด้วยชื่อบล็อก เช่น /heading หรือ /image จากนั้นเลือกบล็อกที่ต้องการจากรายการ

❸ วิธีเขียนบทความด้วยบล็อก

เริ่มจากใส่ชื่อเรื่อง แล้วเขียนเนื้อหาด้วยบล็อกย่อหน้า เพิ่มหัวข้อเพื่อแบ่งประเด็น และแทรกรูปภาพหรือรายการเมื่อช่วยให้ผู้อ่านเข้าใจง่ายขึ้น

ใช้หัวข้อให้เป็นลำดับ

เลือกบล็อก Heading แล้วกำหนดระดับหัวข้อให้เหมาะสม ใช้หัวข้อหลักแบ่งประเด็นใหญ่ และใช้หัวข้อย่อยสำหรับรายละเอียดที่อยู่ภายใต้ประเด็นนั้น ไม่ควรเลือกหัวข้อเพียงเพื่อเปลี่ยนขนาดตัวอักษร

เพิ่มรูปภาพ

เพิ่ม Image block แล้วเลือกอัปโหลดรูปจากคอมพิวเตอร์หรือเลือกไฟล์จากคลังสื่อ ก่อนเผยแพร่ให้ตรวจว่าภาพชัดและแสดงผลเหมาะสมกับหน้าเว็บ

ทำรายการหรือเพิ่มปุ่ม

ใช้ List block สำหรับขั้นตอนหรือรายการข้อมูล และใช้ Buttons block เมื่อต้องการให้ผู้อ่านกดไปยังหน้าอื่น เช่น หน้าติดต่อหรือหน้าบริการ

❹ วิธีแก้ไขและย้ายบล็อก

คลิกบล็อกที่ต้องการแก้ไข จากนั้นพิมพ์ข้อความใหม่หรือใช้แถบเครื่องมือของบล็อกเพื่อจัดรูปแบบ ตัวเลือกในแถบเครื่องมือจะแตกต่างกันตามชนิดของบล็อก

หากต้องการย้ายบล็อก ให้ใช้ปุ่มลูกศรหรือเมนูของบล็อก หรือเปิด List View เพื่อดูโครงสร้างเนื้อหาและเลือกบล็อกที่ต้องการได้ง่ายขึ้น

❺ ตั้งค่าเนื้อหาจากแถบด้านข้าง

คลิกไอคอนตั้งค่าบริเวณมุมบนของตัวแก้ไข เพื่อเปิดหรือปิดแถบด้านข้าง โดยทั่วไปจะมีการตั้งค่าของทั้งบทความและบล็อกที่เลือก

การตั้งค่าบทความอาจมี:

• หมวดหมู่และแท็ก
• Slug หรือ URL
• รูปภาพเด่น
• สถานะและเวลาการเผยแพร่
• การตั้งค่าการแสดงผลบางอย่าง

ตัวเลือกที่แสดงขึ้นอยู่กับชนิดเนื้อหา ธีม และปลั๊กอินที่ใช้งาน

❻ Gutenberg ต่างจาก Site Editor อย่างไร?

Block Editor ใช้แก้ไขเนื้อหาของบทความหรือหน้าเว็บ ส่วน Site Editor ใช้ปรับแต่งส่วนต่าง ๆ ของเว็บไซต์ เช่น ส่วนหัว ส่วนท้าย เทมเพลต และรูปแบบโดยรวม โดย Site Editor ใช้ได้เมื่อเว็บไซต์เปิดใช้ธีมแบบบล็อก

หากต้องการเปลี่ยนเฉพาะข้อความหรือรูปภาพในบทความ ให้ใช้ Block Editor หากต้องการแก้รูปแบบทั้งเว็บไซต์ ให้ตรวจว่าธีมรองรับ Site Editor หรือไม่

❼ ตรวจบทความและบันทึกงาน

ก่อนเผยแพร่ ใช้ตัวเลือก Preview เพื่อดูหน้าตาบทความจริง ตรวจหัวข้อ รูปภาพ ลิงก์ และการแสดงผลบนอุปกรณ์ต่าง ๆ

เมื่อยังเขียนไม่เสร็จ ให้บันทึกเป็นฉบับร่าง เมื่อพร้อมแล้วจึงเผยแพร่หรือกำหนดเวลาเผยแพร่ ComSiam แนะนำให้ตรวจลำดับหัวข้อและดูตัวอย่างบทความก่อนกดเผยแพร่ทุกครั้ง

❽ ปัญหาที่มือใหม่มักเจอ

เพิ่มข้อความแล้วกลายเป็นบล็อกผิดชนิด

เลือกบล็อกที่ถูกต้องจากปุ่ม + หรือพิมพ์ / แล้วค้นหาชื่อบล็อก หากสร้างบล็อกผิด สามารถเปลี่ยนชนิดจากแถบเครื่องมือหรือเพิ่มบล็อกใหม่ได้

มองไม่เห็นแถบตั้งค่า

คลิกไอคอนตั้งค่าที่มุมบนของตัวแก้ไขเพื่อเปิดแถบด้านข้าง หากยังไม่พบ ให้ตรวจเมนู Preferences หรือการตั้งค่าหน้าจอ

บล็อกจัดวางไม่ตรงที่ต้องการ

เปิด List View เพื่อตรวจลำดับบล็อก แล้วใช้ลูกศรหรือเครื่องมือย้ายจัดตำแหน่งใหม่ ก่อนเผยแพร่ให้ดู Preview อีกครั้ง

❾ คำถามที่พบบ่อยเกี่ยวกับ Gutenberg

Gutenberg ต้องติดตั้งเป็นปลั๊กอินไหม?

Block Editor เป็นตัวแก้ไขที่มาพร้อม WordPress อยู่แล้ว โดยทั่วไปไม่ต้องติดตั้งปลั๊กอินเพิ่มเพื่อใช้บล็อกพื้นฐาน

ใช้ Gutenberg ต้องเขียนโค้ดไหม?

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

ใช้ Gutenberg บนมือถือได้ไหม?

สามารถเปิดหลังบ้านผ่านเบราว์เซอร์บนมือถือได้ แต่การจัดหน้าและแก้ไขเนื้อหาจำนวนมากมักสะดวกกว่าบนคอมพิวเตอร์

❿ สรุปวิธีใช้ Block Editor

Gutenberg หรือ Block Editor ใช้สร้าง Posts และ Pages ด้วยบล็อก เช่น ย่อหน้า หัวข้อ รูปภาพ รายการ และปุ่ม เพิ่มบล็อกได้จากเครื่องหมายบวกหรือพิมพ์ / จากนั้นแก้ไข ย้าย และตั้งค่าผ่านแถบเครื่องมือกับแถบด้านข้าง

เมื่อเข้าใจหน้าที่ของบล็อกพื้นฐานแล้ว คุณจะจัดเนื้อหาได้เป็นส่วนและแก้ไขได้ง่ายขึ้น ComSiam แนะนำให้เริ่มจากบล็อกย่อหน้า หัวข้อ รูปภาพ และรายการ ก่อนทดลองใช้บล็อกจัดวางที่ซับซ้อนขึ้น