Gutenberg logo

Gutenberg กับผลกระทบที่ยิ่งใหญ่ของ WordPress

นักพัฒนาเว็บไซต์ด้วย WordPress อาจจะเคยได้ยินเกี่ยวกับคำว่า Gutenberg กันมาบ้างนะครับว่าคืออะไร หากยังไม่ทราบก็จะขออธิบายกันให้เข้าใจกันสักนิดหน่อย

Gutenberg คืออะไร

Gutenberg เป็น Editor ตัวใหม่ของ WordPress ที่จะมาแทนที่ Editor ตัวเก่าที่เราใช้กันมานาน โดยชื่อโค๊ดได้มาจาก Johannes Gutenberg ซึ่งเป็นนักประดิษฐ์เครื่องพิมพ์หนังสือพิมพ์แบบเคลื่อนย้ายได้เมื่อ 500 ปีที่แล้วครับ ซึ่งตามแผนที่วางไว้คือ Editor นี้จะอยู่ในส่วนของ WordPress core และจะเริ่มใช้ใน WordPress เวอร์ชั่น 5.0 โดย Editor ตัวนี้จะใช้คอนเซปท์ของ Block มาจัดการ ซึ่งจะไม่เหมือนกับ Editor ตัวเก่าที่จะมีลักษณะเหมือนกับ Word Document ดูตัวอย่าง

 

เป้าหมายของผู้พัฒนา คือจะเป็น Block Editor ที่สามารถเพิ่มเนื้อหาได้หลายหลายอย่างสนุกและง่าย ต้องการลดงานในการเขียนเนื้อหาของผู้เขียนที่พัฒนาเว็บไซต์ด้วยตนเองไม่ว่าจะเป็นในส่วนของ Shortcodes และ HTML ซึ่งจะทำให้ผู้ใช้งาน WordPress สามารถใช้งานได้ง่ายขึ้น

ณ ปัจจุบัน Editor ดังกล่าวอยู่ในเฟส Beta ทาง WordPress ให้เราทำการติดตั้งผ่านปลั๊กอินเพื่อทำการทดสอบระบบก่อนเริ่มใช้จริง ปัจจุบัน Gutenberg ถูกดาวน์โหลดไปมากกว่า 48,000 ครั้ง และมีผู้ติดตั้งใช้งานอยู่มากกว่า 3,000 เครื่อง โดยได้คะแนนเพียง 2.5 จาก 5 ดาว

สาเหตุหนึ่งที่ทำให้ได้คะแนนน้อย เนื่องจากว่า ผู้พัฒนาเว็บไซต์ส่วนใหญ่ต้องการที่จะให้ อยู่ในรูปแบบของปลั๊กอินมากกว่าที่จะอยู่ใน WordPress core  ซึ่งทางผู้พัฒนาก็อยู่ในระหว่างการเก็บข้อมูลทั้งข้อดีและข้อเสียของทุกความคิดเห็น โดย Matt Mullenweg (ผู้ก่อตั้ง) ตั้งใจว่าจะเก็บข้อมูลโดยให้มีผู้ใช้งานสูงถึง 100,000 คนก่อนเพื่อที่จะดูข้อผิดพลาดในการใช้งานของ Editor ตัวนี้

 

Gutenberg กับผลกระทบที่ยิ่งใหญ่ของ WordPress 1

 

วิธีการติดตั้ง

อย่างที่ทราบกันแล้วว่า Editor อยู่ในขั้นตอนการพัฒนา ตอนนี้อยู่ในเวอร์ชั่นที่ 1.7 ดังนั้นเราจึงสามารถที่จะดาวน์โหลดได้จากหน้าปลั๊กอินของเราหรือจากหน้าเว็บ WordPress.org หลังจากนั้นให้ทำการ Activate ปลั๊กอินเหมือนกับปลั๊กอินทั่วๆ ไป

Gutenberg plugin
Add Plugin

 

วิธีการใช้งาน

เมื่อเราทำการ Activate ปลั๊กอิน จะปรากฏเมนูทางด้านซ้ายขึ้นมา ประกอบไปด้วยเมนูย่อย 3 เมนู ได้แก่ Demo, Feedback และ Documentation โดย Demo ที่ให้มานั้นจะเป็นบทความ (Post) ตัวหนึ่่งที่ใช้ Editor ตัวใหม่นี้สร้างขึ้นมาซึ่งจะปรากฏอยู่ในหน้า Post ในบทความ Welcome to Gutenberg Editor หากเราต้องการจะดูตัวอย่างที่ผู้พัฒนาได้สร้างขึ้นมาก็ลองกด Preview หรือ Publish ดูนะครับ

Gutenberg menu
Menu

 

ผู้พัฒนาปลั๊กอินนี้ได้ทำการสร้างลิงก์เพื่อทำการปรับเปลี่ยนระหว่าง 2 editors ตัวใหม่และตัวเก่า สำหรับผู้พัฒนาเว็บไซต์ที่ไม่ต้องการใช้เครื่องมือตัวใหม่นี้ โดยจะเห็นลิงก์ Classic Editor ปรากฏอยู่ด้านล่างของรายการบทความ

Classic editor in Gutenberg
Classic editor

 

เมื่อเราเปิดมาในบทความของเราจะพบว่า หน้า Editor เก่าของเราเปลี่ยนไป มีความทันสมัยมากขึ้น หน้านี้จะประกอบไปด้วยสามส่วนหลักๆ ได้แก่ หนึ่งคือแถบด้านบนซึ่งเป็นแถบของเครื่องมือ การบันทึกและการตั้งค่า ส่วนที่สองคือตรงที่เขียนเนื้อหานั้นจะมีเนื้อหาเก่าที่เป็น Hello World ปรากฏอยู่ และส่วนสุดท้ายได้แก่แถบด้านขวามือหรือ Sidebar จะแสดงข้อมูลเหมือนเดิมคือ การกำหนดค่าให้แสดงผล ตั้งวันที่แสดงผล เลือก Post Format การกำหนดให้เป็นอยู่ตำแหน่งบทความบนสุด (Sticky post) ให้เลือก Categories & Tags และอื่นๆ

Gutenberg page builder
Page builder

 

หากเราคลิ๊กมาดูที่หัวข้อ (Title) จะปรากฏเพอร์มาลิงก์ (Permalink) ของเราขึ้นมา เราสามารถทำการปรับเปลี่ยนเพอร์มาลิงก์ได้ตามต้องการ และเมื่อทำการกดเข้าไปดูในส่วนของเนื้อหาจะมี TinyMCE แบบ Editor ตัวเก่าแสดงขึ้นมาบนกล่องข้อความแบบเดียวกันกับหัวข้อของเรา

Title in Gutenberg
Edit permalink

 

คราวนี้เรามาดูสิ่งที่เพิ่มขึ้นมานะครับ ปลั๊กอินนี้จะใช้วิธีการสร้าง block ขึ้นมาโดยเมื่อเรากดปุ่ม + ในวงกลมจะมีบล็อกหรือเครื่องมือจำนวนมากมายหลายแบบให้เราเลือก ไม่ว่าจะเป็นในส่วนของ Shortcode, Video, Text, Paragraph หรือ Slider ซึ่งเราสามารถที่จะนำมาใช้งานได้ในทันที

Block editor in Gutenberg
Block editor

 

ยกตัวอย่างเช่น เมื่อทำการกดเลือกกล่องวิดีโอจะปรากฏให้เห็นกล่องที่อัพโหลดวิดีโอแสดงขึ้นมาในช่องเนื้อหาให้เราสามารถอัพโหลดได้ทันที

Video in Gutenberg
Video

 

หรือหากเราเลือก Column ก็จะมีช่อง Column ปรากฏขึ้นมา ทางด้านขวาของเราจะเห็นแถบด้านข้างที่เป็นสไลเดอร์ซึ่งเราสามารถตั้งค่ากำหนดได้ว่า Columns ที่เราต้องการกี่คอลัมน์

Column in Gutenberg
Column

 

และหากเราต้องการแก้ไขในส่วนใดเราก็สามารถตั้งค่าได้ทั้งหมด เช่น สีพื้นหลัง (Background color) สีตัวอักษร (Text color) ขนาดของตาราง เป็นต้น นอกจากนั้นแล้วใน Page builder นี้ เราสามารถที่จะเพิ่มในส่วนของ Custom CSS สำหรับแต่ละหน้าได้ด้วย

นี่แค่ตัวอย่างส่วนหนึ่งของ Gutenberg นะครับ หากใครสนใจก็สามารถไปดาวน์โหลดได้จากที่นี่

 

ผลกระทบที่เกิดขึ้น

แน่นอนว่าเรื่องนี้เป็นเรื่องที่ใหญ่มากเลยทีเดียวครับหากปลั๊กอินตัวนี้ไปอยู่ใน WordPress Core เนื่องจากว่ามีผู้ผลิตปลั๊กอินจำนวนหนึ่งอาจจะต้องหยุดพัฒนาไปเลย เช่น กลุ่ม Page Builder หรือ TinyMCE ต่างๆ เช่น Visual Composer, Elementor, TinyMCE Advanced ผลกระทบที่ว่านี้ ตอนนี้เริ่มเกิดกับ Page Builder บางตัวแล้วครับ ชื่อว่า Tailor Page Builder ที่มีผู้ใช้งานประมาณ 3,000 คน ตามลิงก์ข่าวนี้ครับ

สำหรับในกลุ่มปลั๊กอินที่ใช้ Metabox นั้น ทางผู้พัฒนาแจ้งว่ายังคงพัฒนาในส่วนของ Metabox ต่อไป แต่ก็ยังใช้เฉพาะในส่วนของ Custom Fields เท่านั้น ดังนั้นผู้ใช้ Yoast SEO ที่ใช้ Metabox อาจจะต้องรออีกสักระยะหนึ่งแต่ก็คงเบาใจได้ในระดับหนึ่ง

และนอกจากนี้ทางผู้พัฒนายังวางแผนว่าในอนาคต เราจะสามารถลากเครื่องมือใช้งานแต่ละตัวลงไปใน Editor ได้ ซึ่งจะทำให้เราสามารถใช้งานได้ง่ายขึ้นอีกด้วย

 

หวังว่าทุกท่านคงจะรู้จักเจ้าตัวนี้มากขึ้นไม่มากก็น้อยแล้วนะครับ ก็รอติดตามกันต่อไปว่าสุดท้ายแล้ว Editor ตัวนี้จะอยู่ใน WordPress Core ได้หรือไม่อย่างไร แล้วคุณละมีความคิดเห็นอย่างไรครับ ???

ถ้าผู้อ่านชอบบทความนี้ก็ฝากกดไลท์และแชร์เพจ WordPress by Themevilles เพื่อเป็นกำลังใจกันเยอะๆด้วยนะครับ

 

คอร์สออนไลน์เสริมพลังเว็บไซต์ด้วย WordPress Plugins ราคาพิเศษ !

Gutenberg กับผลกระทบที่ยิ่งใหญ่ของ WordPress 2

บทความนี้มีประโยชน์สำหรับคุณหรือไม่?

ให้คะแนนบทความนี้

คะแนนเฉลี่ย / 5. จำนวนโหวต:

As you found this post useful...

Follow us on social media!

นายปิ๊ก


ผู้ก่อตั้งเว็บไซต์ Themevilles.com เป็นอาจารย์สอน WordPress และ WooCommerce ในเว็บคอร์สออนไลน์ Skilllane และรับทำเว็บไซต์ ทำการตลาดออนไลน์ เช่น SEO, Facebook และ LINE


Shares
สมัครสมาชิกเพื่อรับข้อมูลข่าวสาร
Get the latest content first.
Read about Privacy Policy.