Gutenberg (Block Editor) คืออะไร? คู่มือใช้งานฉบับจับมือทำ ให้หน้าเว็บสวยโปร

จำความรู้สึกตอนที่ WordPress อัปเดตเวอร์ชัน 5.0 ได้ไหมครับ? อยู่ดีๆ หน้าจอเขียนบทความที่คุ้นเคย (Classic Editor) ก็หายไป กลายเป็นหน้าจอขาวๆ โล่งๆ ที่มีปุ่มบวก (+) เต็มไปหมด หลายคนตกใจ สับสน และรีบไปโหลดปลั๊กอิน “Classic Editor” มาลงเพื่อเปลี่ยนกลับไปใช้แบบเดิมทันที

ถ้าคุณคือหนึ่งในนั้น… ผมขอให้คุณเปิดใจอีกครั้งครับ

เพราะ Gutenberg (Block Editor) ในปี 2024 ไม่ใช่เด็กน้อยที่มีแต่บั๊กเหมือนตอนเปิดตัวอีกแล้ว แต่มันกลายร่างเป็น “Page Builder” ที่ทรงพลัง เบาหวิว และ Google รักที่สุด วันนี้ผมจะพาคุณทิ้งเครื่องพิมพ์ดีดเก่าๆ แล้วหันมาเล่น “Lego” ที่จะทำให้เว็บคุณสวยระดับเอเจนซี่ทำ โดยไม่ต้องเขียนโค้ดครับ

Gutenberg คืออะไร? (ฉีกกฎการเขียนบทความแบบเดิม)

ในอดีต Classic Editor ทำงานเหมือน Microsoft Word ครับ คือพิมพ์เรียงบรรทัดลงมาเรื่อยๆ ถ้าอยากแทรกรูปซ้าย ขวา ตัวหนังสือล้อมกรอบ? …ยาก อยากทำปุ่มกดสวยๆ? …ต้องลงปลั๊กอินเพิ่ม อยากแบ่งหน้าเป็น 2 คอลัมน์? …ต้องเขียน HTML

Gutenberg เปลี่ยนแนวคิดใหม่ทั้งหมด โดยมองทุกอย่างในหน้าเว็บเป็น “Block” (ก้อน)

• ย่อหน้า = Block หนึ่งก้อน
• รูปภาพ = Block หนึ่งก้อน
• หัวข้อ = Block หนึ่งก้อน
• ปุ่มกด = Block หนึ่งก้อน

วิธีใช้ คุณแค่หยิบก้อนต่างๆ มาวางต่อกัน หรือซ้อนกันเหมือนต่อ Lego ทำให้คุณสามารถจัด Layout หน้าเว็บได้อิสระ จะเอา 3 คอลัมน์, จะเอาภาพพื้นหลังเต็มจอ (Cover), หรือจะทำปุ่ม Call-to-Action ก็ทำได้ทันทีในหน้าเขียนบทความ!

ทำไมต้องฝืนใช้? (ในเมื่อ Classic ก็ใช้ง่ายดี)

ผมเข้าใจครับว่าการเปลี่ยนนิสัยมันยาก แต่มี 3 เหตุผลที่คุณควรย้ายมาใช้ Block Editor เดี๋ยวนี้

1. Speed & SEO นี่คือเหตุผลสำคัญที่สุด! Gutenberg สร้างโค้ด HTML ที่สะอาดและเบากว่า Page Builder ทั่วไป (อย่าง Elementor หรือ Divi) มากๆ ส่งผลให้ Core Web Vitals (คะแนนความเร็วของ Google) พุ่งกระฉูด
2. What You See Is What You Get สิ่งที่คุณเห็นตอนจัดหน้า จะเหมือนกับหน้าเว็บจริงเกือบ 100% ไม่ต้องกด Preview บ่อยๆ เหมือนเมื่อก่อน
3. Future Proof WordPress ประกาศชัดเจนว่าอนาคตฟีเจอร์ใหม่ๆ จะลงให้ Gutenberg เท่านั้น Classic Editor กำลังจะกลายเป็นอดีตที่ถูกทิ้งร้าง

คู่มือใช้งานฉบับจับมือทำ 3 ฟีเจอร์ลับที่จะทำให้คุณเป็นโปร

หลายคนเกลียด Gutenberg เพราะ “หาปุ่มไม่เจอ” ผมจะบอกทางลัดให้ครับ

1. The Slash Command (/)  ทางลัดสู่ความไว

เลิกเอาเมาส์ไปกดปุ่มบวก (+) มุมซ้ายบนครับ มันช้า! วิธีโปร เวลาจะขึ้นบรรทัดใหม่ ให้พิมพ์เครื่องหมายทับ / แล้วตามด้วยชื่อ Block ที่ต้องการ

• อยากใส่รูป? พิมพ์ /image แล้ว Enter
• อยากใส่หัวข้อ? พิมพ์ /heading แล้ว Enter
• อยากใส่ปุ่ม? พิมพ์ /button แล้ว Enter
• อยากแบ่งคอลัมน์? พิมพ์ /columns แล้ว Enter

คล่องเมื่อไหร่ คุณจะเขียนบทความเร็วกว่าเดิม 2 เท่าครับ!

2. Reusable Blocks  สร้างครั้งเดียว ใช้ได้ตลอดชีพ

เคยไหมที่ต้องสร้างปุ่ม “สั่งซื้อสินค้า” หรือกล่อง “ผู้เขียน” ท้ายบทความซ้ำๆ ทุกครั้ง? วิธีโปร สร้าง Block นั้นให้สวยเสร็จ 1 ครั้ง -> คลิกที่จุดสามจุด (…) -> เลือก “Create Reusable Block” (หรือ Synced Pattern) ตั้งชื่อให้มัน ครั้งต่อไป แค่พิมพ์ / ตามด้วยชื่อที่คุณตั้งไว้ มันจะโผล่มาทั้งก้อนเลย! ประหยัดเวลาชีวิตสุดๆ

3. List View  แผนที่นำทางกันหลง

ปัญหาโลกแตกของมือใหม่คือ “จะกดเลือก Block แม่ แต่ดันไปกดโดน Block ลูก” หรือหาไม่เจอว่าก้อนนี้ซ่อนอยู่ที่ไหน วิธีโปร ให้กดที่ไอคอน “ขีดสามขีด” (Document Overview) ที่มุมซ้ายบนสุดของจอ มันจะกางโครงสร้างออกมาให้เห็นเลยว่า อะไรซ้อนอยู่ในอะไร จิ้มเลือกจากตรงนี้ แม่นยำ 100% ครับ

Block เจ๋งๆ ที่คุณควรรู้จัก (นอกจากแค่พิมพ์ Text)

• Cover Block ใส่ภาพพื้นหลังแล้วพิมพ์ตัวหนังสือทับได้ (เอาไว้ทำ Hero Banner หัวบทความสวยๆ)
• Media & Text แบ่งฝั่งซ้ายเป็นรูป ฝั่งขวาเป็นข้อความ (เหมาะกับทำโปรไฟล์ หรือรีวิวสินค้า)
• Table of Contents ปลั๊กอิน SEO หลายตัวเริ่มทำ Block สารบัญอัตโนมัติมาให้ใช้ในนี้แล้ว
• Buttons สร้างปุ่ม CTA สวยๆ ไล่เฉดสี ปรับความโค้งมนได้โดยไม่ต้องรู้ CSS

ก้าวข้ามความกลัว แล้วคุณจะหลงรัก

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

เริ่มวันนี้ ลองสร้างบทความใหม่ แล้วห้ามตัวเองไม่ให้ลงปลั๊กอิน Classic Editor ดูสัก 1 สัปดาห์ครับ รับรองว่าคุณจะไม่อยากกลับไปอีกเลย

แต่ช้าก่อน! ถึงแม้ Gutenberg จะเก่งแค่ไหน แต่บางครั้งเราก็ยังต้องการ “ฟังก์ชันพิเศษ” ที่ Block Editor ยังทำไม่ได้ หรือเป็นฟังก์ชันเฉพาะทางจากปลั๊กอินอื่น ในกรณีนี้ เรายังต้องพึ่งพา “เวทมนตร์เก่าแก่” ของ WordPress อยู่