WordPress Block editor (Gutenberg) สอนวิธีใช้งานแบบละเอียด

WordPress Block Editor เป็นหนึ่งใน Editor ของ WordPress หรือที่เรารู้จักในนาม Gutenberg ที่ควรฝึกใช้ให้เป็น เพราะมันมีฟีเจอร์และ UX ที่ดีกว่า Classic Editor ตัวเก่า

แต่ด้วยรูปแบบการใช้งานของ Block Editor ที่เปลี่ยนไปจาก Classic Editor ตัวเก่ามาก ที่มองการจัดเนื้อหาเป็น บล็อคๆ (Block) อยากได้อะไรก็หยิบ Block มาใส่ เช่น Block : Paragraph, Image, Heading, List, Gallery, Cover, Video เป็นต้น

ตรงกลางของ Block Editor โล่งๆ และยกการตั้งค่าทั้งหมดไปวางด้านขวามือ และด้านบนแทน ทำให้คนส่วนใหญ่ยังไม่คุ้นชินกับมัน บางคนถึงกับยอมติดตั้งปลั๊กอิน Class Editor แทนที่จะใช้ Block Editor หรือ Gutenberg

Block Editor ทำให้รู้สึกเหมือนกำลังใช้พวก Page Builder อย่าง SiteOrigin, Elementor, WPBakery สามารถจัดวาง Layout พื้นฐานได้ทั้งหมด ตั้งแต่ การแยกแต่ละส่วนเป็น Block การจัดคอลัมน์ การปรับแต่งข้อความ สร้างปุ่มสวยๆ สร้าง Hero Banner ฯลฯ คือแทบไม่เขียน CSS เพิ่มเติมเหมือน Classic Editor

เรามารู้จัก WordPress Block Editor กันมากขึ้น มีฟีเจอร์อะไรน่าสนใจบ้าง และทำไมผมถึงเชียร์ให้ใช้

WordPress Block editor มีอะไรน่าสนใจบ้าง

Block editor (Gutenberg) คือ?

Block editor (Gutenberg)
Block editor (Gutenberg) คือ?

Block Editor (Gutenberg) คือ เป็น Editor ตัวใหม่ของ WordPress ที่จะแทนที่ Classic Editor เดิม ที่ใช้งานค่อนข้างยากในการปรับแต่งให้สวยงาม การมาของ Block Editor ใน WordPress 5.0 เป็นต้นไป ทำให้เป็น Editor ที่มีความเป็น Page Builder สามารถจัด Layout ปรับแต่งหัวข้อ สีข้อความ สร้างปุ่ม ได้ง่ายๆ

แต่ละส่วนจะถูกแบ่งเป็น Block อยากได้อะไร ก็หยิบบล็อคมาใส่ เหมือนกำลังต่อเลโก้ ซึ่งบล็อคพื้นฐานที่ติดมาตอนติดตั้งเวิร์ดเพรสครั้งแรก ก็เพียงพอแล้ว สำหรับการตกแต่งพื้นฐานทั่วไป

มันถูกออกแบบมาให้ใช้งานง่าย ยืดหยุ่นสูง ไม่ต้องเสียเวลาเรียนรู้นาน ทุกอย่างสามารถลาก-วาง ได้อิสระ จากที่ผมลองใช้มาสักพักค่อนข้างชอบมาก เพราะแทบไม่ต้องมานั่งเขียนโค้ด CSS, HTML เพื่อตกแต่งอีกต่อไป เพราะฟังก์ชันพื้นฐานทุกอย่าง ได้เตรียมให้เราหมดแล้ว

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

เวลาเราเขียนบทความ และถ้าลองกด Preview ตั้งไว้ แล้วลองเขียนบทความไปเรื่อยๆ สังเกตว่า ระบบจะแสดงให้ทันที หรือ Real-time โดยไม่ต้องรีเฟรซเลย

ใน WordPress 5.4 ที่พึ่งเปิดตัวล่าสุด ได้มีการปรับปรุง Block Editor ปรับปรุง UX ให้ดีขึ้น และโหลดไวขึ้นกว่าเดิม “โหลดเร็วขึ้น 14%” อ่านเพิ่มเติมเกี่ยวกับ WordPress .5.4

ทำไมต้องใช้ WordPress Block editor

ถ้าใครยังใช้ Classic Editor อยู่ แนะนำให้หยุดใช้ และมาทำความรู้จักโลกใบใหม่ ที่มีอนาคตสดใสกว่าเดิม ผมการันตีได้เลยว่า ถ้าลองฝึกใช้ให้เป็น คุณจะไม่มีวันย้อนกลับไปใช้ Classic ตัวเดิมแน่นอน แม้กระทั่งพวก Page Builder อย่าง Elementor, SiteOrigin, WPBakery คุณอาจจะลืมไปเลยก็ได้

เรามาดูกันว่า มันมีอะไรดี

  • No coding : แทบไม่ต้องเขียนโค้ดอีกต่อไป ใช้วิธี Drag & Drop ในการปรับแต่งทุกอย่าง มันสามารถทำ ในสิ่งที่ Classic Editor ทำไม่ได้
  • UX / UI : การออกหน้าตาของ Block Editor ค่อนข้างคลีนมากๆ มีการจัดระเบียบปุ่มต่างได้ดีมาก ทำให้ใช้ง่ายมากขึ้น
  • Layout : เราสามารถจัดวาง Layout แบ่งคอลัมน์ได้อิสระ โดยไม่ต้องเขียนโค้ แต่ต้องติดตั้งปลั๊กอินเสริมอย่าง Kadence Blocks หรือ Grids ทำให้การจัดหน้าเพจง่ายขึ้นเยอะเลย
  • SEO Schema : เราสามารถสร้าง FAQs และ How-to ให้บทความเราแสดงใน Google ในรูปแบบของคำถาม และ ฮาว-ทู (ให้โดดเด่นกว่าคู่แข่ง) ซึ่งถ้าเราติดตั้งปลั๊กอิน Yoast SEO มันจะแถม Structured data block 2 ตัวคือ FAQs และ How-to ให้เราเรียบร้อย *ปกติถ้าเราจะทำ SEO Schema ลักษณะนี้ ต้องเขียนโค้ดเอง
  • Block พื้นฐานครบ : เช่น Heading, Paragraph, List, Image, Gallery, Quote, Video และอื่นๆ อีกหลายตัวที่เอื้อให้เราปรับแต่งได้ง่าย เราสามารถเปลี่ยนสีข้อความ สร้างปุ่ม โดยไม่ต้องเขียนโค้ดแม้แต่บรรทัดเดียว
  • Table : จาก Classic editor ตัวเก่า เราไม่สามารถสร้างตารางได้ ต้องติดตั้งปลั๊กอินเสริมเข้าไป หรือไม่ก็เขียนโค้ดเอา แต่ตอนนี้สามารถสร้างตารางได้ด้วยปลายนิ้ว
  • Re-usable blocks : บล็อคที่เราคิดว่าใช้บ่อยๆ เราสามารถเซ็ตเป็น Re-usable blocks ได้ เพื่อนำกลับมาใช้ซ้ำในรูปแบบเดิมได้

ยังมีฟีเจอร์ที่น่าสนใจอีกเยอะ ไม่มีวิธีอื่นครับ นอกจากลองด้วยตัวเอง ผมการันตีว่า เพื่อนๆ จะชอบมัน

รู้จัก Block ต่างๆ ของ Block editor

Block ทั้งหมดมีอะไรบ้าง

Common Blocks

  • Paragraph
  • Image
  • Heading
  • Gallery
  • List
  • Quote
  • Audio
  • Cover
  • File
  • Video

Formatting

  • Code
  • Classic
  • Custom HTML
  • Preformatted
  • Pullquote
  • Table
  • Verse

Layout Elements

  • Page Break
  • Buttons
  • Columns
  • Spacer
  • Group
  • Media & Text
  • More
  • Separator

Widgets

  • Shortcode
  • Archives
  • Calendar
  • Categories
  • Latest Comments
  • Latest Posts
  • RSS
  • Search
  • Social Icons
  • Tag Cloud

Embeds

  • Embed
  • Twitter
  • YouTube
  • Facebook
  • Instagram
  • WordPress
  • SoundCloud
  • Spotify
  • Flickr
  • Vimeo
  • TikTok
  • Slideshare
  • และอื่นๆ อีกเยอะเลย

วิธี Add Block

ครั้งแรกที่เราสร้างเพจ หรือ โพส ใหม่ๆ ระบบจะสร้าง Block ให้เราอัตโนมัติ ประเภท Paragraph แต่ถ้าเราอยากจะเพิ่ม Block ใหม่ตามที่ต้องการ สามารถ กดไอคอนบวก 3 จุด ได้แก่ ด้านบนซ้าย ด้านล่างของบล็อคแต่ละบล็อค และด้านขวามือ

วิธี Add Block ใหม่
วิธี Add Block ใหม่

หลังจากที่คลิก Add Block จะมีป็อปอัพแสดงบล็อคทั้งหมดที่มีอยู่ สามารถกดค้นหาตามชื่อ หรือ ไม่ก็คลิกแต่ละแท็บที่ต้องการได้เลย

วิธี Add Block
วิธี Add Block

วิธีลบ Block

วิธี Delete Block
วิธี Delete Block

การลบ Block ที่เคยเพิ่มเข้าไป สามารถคลิกที่ จุดสามจุด ด้านขวาสุด แล้วคลิก Remove Block

การตั้งค่า Block

แต่ละบล็อคมีการตั้งค่าของตัวเอง ตัวอย่างเช่น บล็อค Paragraph

แท็บตั้งค่าด้านบนของบล็อค เราสามารถกดเปลี่ยนบล็อค จัดกลางซ้ายขวา ตัวหนา ตัวเอียง ใส่ลิงค์ และจุดสามจุดด้านขวาสุด จะเป็นแท็บตั้งค่าบล็อค

แท็บตั้งค่าด้านขวาของบล็อค จะเป็นการตั้งค่าคุณสมบัติเพิ่มเติม เช่น ขนาดฟ้อนต์, สีตัวอักษร, พื้นหลังตัวอักษร เป็นต้น

ไอคอนชี้ขึ้น-ลง ด้านซ้ายของบล็อค เราสามารถดึงบล็อคขึ้นลงได้อย่างอิสระ สลับตำแหน่งบน-ล่างกับบล็อคอื่นๆ

การตั้งค่า Block Editor
การตั้งค่า Block Editor

รู้จัก Reusable Blocks

Block ที่เราใช้บ่อยๆ เราสามารถบันทึกเป็น Template ไว้ใช้ครั้งถัดไปได้ โดยไม่ต้องเริ่มใหม่หมด ฟังค์ชันนี้น่าจะมีประโยชน์สำหรับเหล่านักเขียน หรือ บล็อคเกอร์ ที่ต้องทำอะไรซ้ำๆ เวลาเขียนบทความ เช่น สร้างปุ่ม Call to action หรือ ชุดข้อความบางอย่างที่ต้องใช้บ่อยๆ

วิธีสร้าง Reusable Blocks ไปที่ จุดสามจุด มุมขวาสุดของแต่ละบล็อค แล้วคลิก “Add to Reusable Blocks

วิธีสร้าง Reusable Blocks
วิธีสร้าง Reusable Blocks

ตั้งชื่อให้กับ Reusable block ที่เรากำลังสร้าง แนะนำให้ตั้งชื่อที่เข้าใจง่ายๆ และกดปุ่ม Save

วิธีบันทึกและตั้งชื่อให้กับ Reusable Blocks
วิธีบันทึกและตั้งชื่อให้กับ Reusable Blocks

แค่นี้ Reusable block ของเราถูกบันทึกเรียบร้อยแล้ว

ตอนนี้เราสามารถใช้ Block ที่เราบันทึกไว้กับโพสหรือเพจอื่นๆ ได้แล้ว

วิธีเรียกใช้ แค่คลิกปุ่ม Add Block แล้วหาแท็บที่ชื่อ “Reusable” ด้านล่างสุด มันก็จะแสดงบล็อคที่เราบันทึก สามารถคลิกใช้ได้เลย หรือ ถ้าหาไม่เจอ สามารถพิมพ์ค้นหาตามชื่อได้

หากเราชี้เมาส์ไปที่บล็อคที่เราบันทึก มันจะแสดงตัวอย่างหน้าตาของบล็อคนั้นๆ ด้านขวามือ ก็สะดวกดี กรณีที่เราไม่แน่ใจว่ามันมีหน้าตาอย่างไร

วิธีใช้ Reusable Blocks
วิธีใช้ Reusable Blocks

เราสามารถดูลิสของ Reusable Block ที่เราเคยบันทึกไว้ที่ลิงค์ “Manage all reusable blocks

ในหน้านี้เป็นหน้าจัดการบล็อคที่เราบันทึกทั้งหมด สามารถคลิกแก้ไขแต่ละบล็อค หรือ จะลบที่ไม่ต้องการใช้ หรือ แม้แต่ Export / Import ผ่าน JSON ก็ได้ เพื่อไปติดตั้งและใช้งานในเว็บไซต์อื่นๆ ที่ใช้ Block Editor ด้วยกันได้

Manage all reusable blocks
Manage all reusable blocks

วิธีใช้ 10 Block ที่ใช้บ่อย

1. Paragraph Block

Paragraph Block
Paragraph Block

Paragraph Block สำหรับเขียนข้อความธรรมดา สามารถจัดข้อความซ้าย-กลาง-ขวา ตัวหนา ตัวเอียง ใส่ลิงค์ แก้ไขสีข้อความ ขนาดตัวหนังสือ สามารถตั้งค่าได้ที่แทบด้านบนของบล็อค และ ด้านขวามือ

2. Heading Block

Heading Block
Heading Block

Heading Block สำหรับเขียนหัวข้อต่างๆ ตั้งแต่ H1-H6 ( ตามหลัก HTML Code ) ใหญ่สุด – เล็กสุด เรียงตามลำดับ สามารถจัดข้อความซ้าย-กลาง-ขวา ตัวหนา ตัวเอียง ใส่ลิงค์ แก้ไขสีข้อความ ขนาดตัวหนังสือ ได้เหมือนพารากราฟบล็อค แต่สิ่งที่มีเพิ่มเติมคือ สามารถปรับ Level H1-H6 และสามารถใส่ anchor สำหรับเชื่อมโยงลิงค์ต่างๆ

3. List Block

List Block
List Block

List Block สร้างลิสรายการ เป็นข้อๆ สำหรับสรุปหัวข้อของบทความ ลิสบล็อคตัวนี้ไม่ต้องตั้งค่าอะไรมาก แค่กดสร้างลิสบล็อค แล้วเลือกว่าจะเอาแบบ bullet หรือ 1,23

4. Image Block

Image Block
Image Block

Image Block สำหรับแสดงรูปภาพตามที่ต้องการ สามารถเลือกได้ว่า จะอัพโหลดผ่านคอมพิวเตอร์โดยตรง หรือ จะเลือกรูปภาพจาก Media Library หรือ อัพโหลดจาก URL แถบตั้งค่าด้านบน สามารถตั้งค่า จัดกลาง-ซ้าย-ขวา ส่วนตั้งค่าด้านขวามือ สามารถเลือกรูปแบบที่จะแสดง เช่น วงกลม สามารถเลือก Size ของรูป ไม่ก็กำหนดขนาดตามที่ต้องการได้เลย

5. Gallery Block

Gallery Block
Gallery Block

Gallery Block สำหรับสร้างแกลอรี่รูปภาพ ปีเจอร์น่าสนใจของบล็อคแกลอรี่คือ มันสามารถ จัดลำดับรูปภาพ จัดซ้าย-กลาง-ขวา

6. Quote Block

Quote Block สำหรับเขียนคำพูด คำไฮไลค์ คำประกาศอะไรก็ได้ ซึ่งสามารถเขียน ชื่อคนได้ ตั้งค่าด้านขวามือ สามารถเลือกรูปแบบได้ 2 แบบ

7. Cover Block

Cover Block
Cover Block

Cover Block สำหรับสร้าง Hero Banner สามารถเลือกได้ทั้งพื้นหลังเป็นรูปภาพ หรือ สี การไล่สีพื้นหลัง ตั้งเป็นพื้นหลังแบบกว้างสุด แบบบล็อค ปรับขนาดและตำแหน่งของรูปภาพได้อย่างอิสระ และยังสามารถพิมพ์ข้อความตรงกลางแบนเนอร์ได้ด้วย *ซึ่งโดยปกติแล้วฟังก์ชันพวกนี้จำเป็นต้องลงปลั๊กอินเพิ่ม

8. Button Block

Button Block
Button Block

Button Block สำหรับสร้างปุ่มติดต่อ ปุ่มสั่งซื้อ โดยสามารถปรับแต่งปุ่มได้อย่างอิสระ ใช้งานง่าย โดยมีความสามารถหลักๆ ดังนี้

  • Style : เลือกรูปแบบปุ่ม แบบ Fill กับ แบบ Outline
  • Background & Text color : ปรับสีข้อความ และสีพื้นหลัง โดยสีพื้นหลัง สามารถปรับให้เป็นแบบไล่สี หรือ Gradient
  • Border settings : สามารถปรับความโค้งมนของกรอบได้
  • เพิ่มปุ่มที่ 2 ด้านขวามือ ในแถวเดียวกัน โดยที่ไม่ต้องจัดคอลัมน์เองเลย
  • Link Settings : การตั้งค่าลิงค์ สามารถตั้งเป็นแบบเปิดหน้าใหม่ หรือ New Tab และใส่ลิงค์ตามที่ต้องการ

9. Table Block

Table Block
Table Block

Table Block สำหรับสร้างตาราง ซึ่งแต่ก่อนการที่เราจะสร้างตารางสักหนึ่งตารางใน WordPress จำเป็นต้องเขียนโค้ด HTML ไม่ก็ ลงปลั๊กอินสำหรับสร้างตารางโดยเฉพาะ ค่อนข้างยุ่งยาก

แต่ใน Block Editor รุ่นล่าสุด เราสามารสร้างตาราง โดยการกำหนด Column และ Row ระบบก็จะสร้างตารางให้เราอัตโนมัติ และทีเด็ดคือ สามารถแก้ไขผ่าน Block โดยไม่ต้องเขียนโค้ดเลย เรามาดูการตั้งค่าตารางด้านขวามือ

Table Block
Table Block

เราสามารถเลือกรูปแบบตารางได้ 2 แบบ คือ แบบ Default ที่มีเส้นกรอบเหมือนปกติทั่วไป และแบบ Stripes ที่ดูทันสมัยมากขึ้น สามารถเซ็ตความกว้าง, หัวตาราง, ท้ายตาราง, และสีพื้นหลังของตาราง

9. Columns Block

Columns Block
Columns Block

Columns Block โดยปกติแล้วการจะแบ่งคอลัมน์ ต้องอาศัยความสามารถของ Page Builder ต่างๆ หรือไม่ก็เขียน CSS เอา ทำให้ยุ่งยากสำหรับคนที่ไม่ได้รู้เทคนิคมาก แต่ตอนนี้ เราสามารถแบ่งคอลัมน์ สำหรับการจัดหน้า WordPres ได้ง่ายๆ และยังสามารถกำหนดความกว้างของแต่ละช่องได้อิสระ

10. Embed Block

Embed Block
Embed Block

Embed Block ทำให้เราสามารถแทรก หรือดึงข้อมูลจากภายนอกได้ง่ายขึ้นเยอะเลย เช่น Youtube, Twitter, Facebook, IG, SoundCloud, Spotify เป็นต้น ไม่ต้องมองหาปลั๊กอินตัวช่วยอีกต่อไป

การบันทึก และ การตั้งค่าหลัก

การตั้งค่า Block Editor
การตั้งค่า Block Editor
  • ไอคอนแรก : สำหรับเพิ่ม Block
  • ไอคอนที่ 2-3 : สำหรับ ย้อนกลับ-ทำซ้ำ
  • ไอคอนที่ 4 : Document Outline หรือ Table of content สำหรับหน้าที่เราแก้ไขอยู่
  • ไอคอนที่ 5 : เป็น Block Navigation
  • Save Draft : สำหรับบันทึกฉบับร่าง
  • Preview : ดูตัวอย่าง
  • Publish : เผยแพร่ หรือ บันทึกทำให้ออนไลน์
  • การตั้งค่า : สำหรับซ่อนและแสดงแถบตั้งค่าหลัก ด้านขวามือ
  • สุดท้าย : เป็นแท็บสำหรับการตั้งค่าพื้นฐานของ Block Editor
การตั้งค่า Block Editor
การตั้งค่า Block Editor

การตั้งค่าในของ Document หรือ การตังค่าหลักเวลาแก้ไข Page หรือ Post เรามาดูกันว่า มันสามารถเซ็ตอะไรได้บ้าง

  • Status & visibility : ตั้งสิทธิ์การมองเห็น การตั้งเวลาในการเผยแพร่
  • Permalink : เป็น URL Slug หรือ url ที่อยู่ถัดจากชื่อโดเมน เช่น wpblood.com/…
  • Categories : หมวดหมู่ของบทความ
  • Tags : แท็ก สำหรับบทความ
  • Featured image : ภาพหน้าปกของบทความ
  • Excerpt : คำเกริ่นนำของบทความ
  • Discussion : เปิด-ปิดระบบคอมเมนต์

ฟีเจอร์ลับ ที่น่าสนใจของ Block editor

Add Block อย่างเร็วด้วยการพิมพ์ /

Add Block อย่างเร็วด้วยการพิมพ์ /
Add Block อย่างเร็วด้วยการพิมพ์ /

ปกติเราต้องกดคลิกไอคอน + เวลาจะเพิ่มบล็อคใช่ไหมครับ แต่มีทริควิธีเพิ่มบล็อคอย่างไว คือ พิมพ์ / ในช่องพารากราฟ แล้วพิมพ์ชื่อ Block ที่ต้องการใช้

สลับโหมดเป็น “Source code”

สลับโหมดเป็น "Source code"
สลับโหมดเป็น “Source code”

สำหรับใครที่ต้องการแก้ไข Code โดยตรง ให้แสดงผลในแบบที่ต้องการ สามารถสลับโหมดจาก Visual Editor เป็น Code Editor ได้

  • คลิก จุดสามจุด ด้านบนขวาสุด
  • คลิก “Code Editor

เปิด-ปิด Fullscreen Mode (โหมดเต็มจอ)

เปิด-ปิด Fullscreen Mode (โหมดเต็มจอ)
เปิด-ปิด Fullscreen Mode (โหมดเต็มจอ)

ถ้าพึ่งติดตั้ง WordPress ใหม่ๆ ระบบจะตั้งให้ Block Editor ให้อยู่ในโหมด Fullscreen แต่สามารถปิดโหมดนี้ได้ โดย

  • คลิก จุดสามจุด ด้านบนขวาสุด
  • คลิก “Fullscreen mode

ประหยัดเวลาด้วย Keyboard Shortcusts

ประหยัดเวลาด้วย Keyboard Shortcusts
ประหยัดเวลาด้วย Keyboard Shortcusts

Keyboard Shortcuts ช่วยให้ประหยัดเวลาการทำงานมากขึ้น โดยเฉพาะคนที่ทำงานกับการเขียนข่าว เขียนบทความบ่อยๆ การเรียนรู้ Shortcuts ทำให้เซฟเวลาได้ และอาจจะช่วยเพิ่ม Productivity ได้ด้วยเช่นกัน ลองเล่นดูครับ

วิธีแปลงโพสเก่าจาก Classic Editor เป็น Block Editor

วิธีแปลงโพสเก่าจาก Classic Editor เป็น Block Editor
แปลง Classic Editor เป็น Block Editor

สำหรับเว็บไซต์ WordPress ที่ถูกสร้างมานาน ด้วย Classic Editor ตัวเก่า ไม่ต้องห่วงครับ เราสามารถ Convert ได้ง่ายๆ โดยการคลิกขวาที่ จุดสามจุด แล้วคลิก “Convert to Blocks

อนาคตของ Block Editor จะไปในทิศทางไหน?

เวอร์ชั่นถัดๆ ไป เป็นการพัฒนา Block Editor หรือ Gutenberg ให้ทำงานได้ดีขึ้นเรื่อยๆ ในทุกด้าน ไม่ว่าจะเป็นการแก้ไขปัญหาเดิม การเพิ่มฟีเจอร์ลูกเล่นใหม่ๆ การปรับ UX หรือ ประสบการณ์การใช้งานให้เข้าถึงได้ง่ายขึ้น การปรับ Speed ให้ไว้ขึ้น

โดยภาพรวมแล้ว WordPress Block Editor ค่อยๆ กลายร่างเป็น Page Builder เต็วตัว แปลว่าอนาคตเมื่อมันมีฟีเจอร์ครบเครื่องกว่านี้ เราอาจจะไม่ต้องติดตั้งปลั๊กอินจัดหน้าอย่าง Elementor, WPBakery หรือ อื่นๆ

เป้าหมายคือ การสร้างให้ WordPress ใช้งานง่ายขึ้น คนที่ไม่มีพื้นฐานด้านเว็บไซต์ ก็สามารถใช้งานได้สบายๆ การใช้ระบบ Block เป็นพื้นฐานในการพัฒนาในทุกด้าน เช่น Theme, Plugin หรือ การแก้ไข Page และ Post ก็จะใช้พื้นฐานเดียวกัน ถ้าเรารู้หลักการของ Block Editor แล้วหมายความว่า เราสามารถแก้ไขได้ทั้งเว็บไซต์เลย

ผมถึงเชียร์ให้ใช้มากๆ ครับ เพราะอนาคตสดใสแน่นอน อาจจะเสียเวลาศึกษาช่วงแรกนานหน่อย แต่พอรู้หลักการแล้ว รับรองว่าจะชอบมันแน่นอนครับ

ติดตั้ง Block เพิ่มเติม

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

1. Kadence Blocks

Kadence Blocks
Kadence Blocks

ดาว์นโหลดปลั๊กอิน

2. Advanced Gutenberg

Advanced Gutenberg
Advanced Gutenberg

ดาว์นโหลดปลั๊กอิน

3. Stackable

Stackable
Stackable

ดาว์นโหลดปลั๊กอิน

FAQs

1. WordPress Block Editor คืออะไร?

Block Editor (Gutenberg) คือ เป็น Editor ตัวใหม่ของ WordPress ที่จะแทนที่ Classic Editor เดิม ที่ใช้งานค่อนข้างยากในการปรับแต่งให้สวยงาม การมาของ Block Editor ใน WordPress 5.0 เป็นต้นไป ทำให้เป็น Editor ที่มีความเป็น Page Builder สามารถจัด Layout ปรับแต่งหัวข้อ สีข้อความ สร้างปุ่ม ได้ง่ายๆ

2. Block Editor กับ Gutenberg ต่างกันอย่างไร?

Gutenberg เป็นปลั๊กอินแยกออกมา ซึ่งมีฟังก์ชันมากกว่า Block Editor แต่อาจจะมีบัคในบางจุด
Block Editor เป็น editor ตัวพื้นฐานที่ติดมากับ WordPress รุ่นใหม่ พื้นฐานมาจาก Gutenberg เช่นเดียวกัน แต่ค่อนข้างเสถียรกว่า

3. Post และ Page เก่าที่สร้างด้วย Classic Editor ยังใช้ได้อยู่ไหม?

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

สรุป

จากการทดลองใช้ WordPress Block Editor มาสักพักใหญ่ๆ ช่วงแรกอาจจะงงๆ หน่อย เพราะมันเปลี่ยนไปจาก Classic Editor ตัวเก่าแบบเปลี่ยนไปเลย แต่ลองเรียนรู้ไปสักพัก ปรากฏว่าใช้ง่ายกว่าเดิมเยอะเลยแฮห! ยิ่งใช้ยิ่งชอบ มีฟีเจอร์แทบจะเหมือน Page Builder เลย มีการจัดกรุ๊ปเมนูการตั้งค่าต่างๆ ได้ดีทีเดียว

ใครที่ยังไม่เคยลอง แนะนำรีบลองเลยครับ สามารถลองเช่นตัว Demo ได้เลยครับ ตัวอย่าง Block Editor (Gutenberg)