WordPress Gutenberg คืออะไร? หากคุณเป็นผู้ใช้งาน WordPress ก็น่าจะคุ้นเคยกับ Editor แบบเดิมที่คุ้นตากันอย่าง TinyMCE แต่ในปัจจุบัน WordPress ได้มีการเปลี่ยนแปลงครั้งใหญ่ โดยการเปิดตัว Gutenberg Editor ซึ่งเป็นการปฏิวัติวิธีการสร้างและจัดการเนื้อหาบน WordPress ไปอย่างสิ้นเชิง
Gutenberg ไม่ได้เป็นเพียงแค่ Editor รูปแบบใหม่ แต่เป็นระบบ Block-based ที่ทรงพลัง เปิดโอกาสให้คุณสร้างสรรค์ Layout ที่สวยงามและซับซ้อนได้ง่ายดายยิ่งขึ้น โดยไม่ต้องพึ่งพา Code หรือ Plugin เสริมมากนัก มาทำความรู้จักกับ Gutenberg ให้ลึกซึ้งยิ่งขึ้น เพื่อปลดล็อกศักยภาพใหม่ในการสร้างเว็บไซต์ของคุณกัน!
WordPress Gutenberg คืออะไร?
WordPress Gutenberg คือ ตัวช่วยแก้ไขเนื้อหาแบบใหม่สำหรับ WordPress ที่นำมาใช้แทนที่ TinyMCE Editor แบบเดิมตั้งแต่ WordPress เวอร์ชัน 5.0 Gutenberg โดยมีหลักการทำงานของ “Blocks” ซึ่งเป็นส่วนประกอบย่อย ๆ ที่ใช้ในการสร้างเนื้อหา อาทิ กล่องข้อความ รูปภาพ วิดีโอ แกลเลอรี ปุ่ม หรือแม้แต่ Widget ต่าง ๆ
ทำให้สามารถเพิ่ม จัดเรียง และปรับแต่ง Blocks ได้อย่างอิสระผ่าน Interface ที่ใช้งานง่ายแบบ Drag and Drop ช่วยให้การสร้างหน้าเว็บและบทความมีความยืดหยุ่นกว่าที่เคย
ความสามารถเด่นของ Gutenberg คืออะไร?
Gutenberg มาพร้อมกับความสามารถที่น่าสนใจมากมาย ซึ่งช่วยให้การสร้างเนื้อหาบน WordPress เป็นเรื่องง่ายและมีประสิทธิภาพยิ่งขึ้น เช่น
ระบบ Block-Based ที่ใช้งานง่าย มีการแบ่งเนื้อหาออกเป็น Blocks ทำให้คุณสามารถจัดการแต่ละส่วนได้อย่างอิสระ เพียงแค่เพิ่ม จัดเรียง และปรับแต่ง Blocks ต่าง ๆ ผ่าน Interface ที่เป็นภาพ
การแสดงผลแบบ WYSIWYG (What You See Is What You Get) ที่ใกล้เคียงกับหน้าเว็บจริง ทำให้ง่ายต่อการจัดวางและออกแบบ Layout
Gutenberg เปิดโอกาสให้คุณสร้าง Layout ที่ซับซ้อนและสวยงามได้โดยไม่ต้องมีความรู้เรื่อง Code มากนัก โดยคุณสามารถปรับขนาด คอลัมน์ และตำแหน่งของ Blocks ได้อย่างอิสระ
คุณสามารถบันทึก Blocks ที่ใช้งานบ่อย ๆ เพื่อนำกลับมาใช้ใหม่ในหน้าหรือโพสต์อื่น ๆ ได้ ช่วยประหยัดเวลาในการสร้างเนื้อหาซ้ำ ๆ
สามารถสร้าง Blocks เองได้ เพื่อเพิ่มฟังก์ชันการทำงานที่หลากหลายให้กับ Gutenberg ได้อย่างง่ายดาย
ข้อดีของ Gutenberg มีอะไรบ้าง?
การเปลี่ยนมาใช้ Gutenberg Editor มีข้อดีหลายประการที่ส่งผลดีต่อประสบการณ์การสร้างเว็บไซต์ของคุณ ไม่ว่าจะเป็น
มี Interface ที่ใช้งานง่ายแบบ Drag and Drop ทำให้ผู้เริ่มต้นก็สามารถสร้างเนื้อหาที่สวยงามได้โดยไม่ต้องเรียนรู้ Code
ระบบ Blocks และ Reusable Blocks จะช่วยลดเวลาในการสร้างและจัดการเนื้อหาซ้ำ ๆ
คุณสามารถสร้าง Layout ที่ซับซ้อนและเป็นเอกลักษณ์ได้ง่ายกว่า Editor แบบเดิม
Gutenberg มี Blocks พื้นฐานที่ครอบคลุมการใช้งานหลากหลาย ทำให้คุณอาจไม่จำเป็นต้องติดตั้ง Plugins เพิ่มเติมสำหรับบางฟังก์ชัน
Gutenberg เป็นทิศทางหลักของการพัฒนา WordPress ในอนาคต ดังนั้นการทำความคุ้นเคยกับ Gutenberg ตั้งแต่เนิ่น ๆ จะเป็นประโยชน์ในระยะยาวสำหรับการจัดการเว็บไซต์ของคุณ
การทำงานแบบ Blocks ช่วยให้คุณจัดการเนื้อหาเป็นส่วน ๆ ได้ง่ายขึ้น และเห็นภาพรวมของหน้าเว็บได้ชัดเจน
Gutenberg เหมาะสำหรับใครบ้าง?
Gutenberg ถูกออกแบบมาเพื่อตอบโจทย์ผู้ใช้งาน WordPress ในหลากหลายระดับดังนี้
ผู้ที่เพิ่งเริ่มต้นใช้งาน WordPress ด้วย Interface ที่ใช้งานง่าย สามารถสร้างเนื้อหาที่สวยงามและจัดระเบียบได้โดยไม่ต้องมีความรู้ด้านเทคนิค
บล็อกเกอร์ โดย Gutenberg จะช่วยสร้างบทความที่น่าสนใจและมี Layout ที่หลากหลายเป็นเรื่องง่ายขึ้น
นักพัฒนาเว็บไซต์ เพราะ Gutenberg เปิดโอกาสให้นักพัฒนาสร้าง Blocks ที่กำหนดเองและพัฒนา Themes ที่รองรับ Full Site Editing ได้อย่างเต็มที่
ผู้ที่ต้องการความยืดหยุ่นในการออกแบบ ต้องการมี Layout ที่ซับซ้อนและแตกต่างจาก Theme ทั่วไป Gutenberg จะเป็นเครื่องมือตัวช่วย ที่ทำให้การปรับแต่งเว็บไซต์ของคุณมีประสิทธิภาพยิ่งขึ้น
ผู้ที่ต้องการลดการใช้ Plugins เสริม เนื่องจาก Gutenberg มี Blocks พื้นฐานที่ครอบคลุมการใช้งานหลากหลาย จึงช่วยลดจำนวน Plugins ที่ต้องติดตั้งและจัดการได้
ข้อเสียของ Gutenberg มีอะไรบ้าง?
แม้ว่า Gutenberg จะมีข้อดีมากมาย แต่ก็มีข้อเสียบางประการที่ควรพิจารณา
สำหรับผู้ที่เคยชินกับการใช้งาน TinyMCE Editor แบบเดิมอาจต้องใช้เวลาในการปรับตัวให้เข้ากับ Interface และวิธีการทำงานแบบ Blocks
Themes และ Plugins บางตัวที่ยังไม่ได้ถูกออกแบบมาให้รองรับ Gutenberg อย่างเต็มที่ อาจทำงานไม่ราบรื่นหรือมีการแสดงผลผิดพลาดได้
ในบางกรณี การใช้ Blocks จำนวนมากอาจส่งผลต่อประสิทธิภาพของ Editor โดยเฉพาะบนเว็บไซต์ที่มีเนื้อหาเยอะ
แม้ว่า Gutenberg จะมีการพัฒนาอย่างต่อเนื่อง แต่บางฟังก์ชันที่ผู้ใช้อาจคุ้นเคยจาก Editor แบบเดิมหรือ Plugins เสริมอาจยังไม่มีให้ใช้งาน หรือยังอยู่ในช่วงพัฒนา
แม้ว่า Gutenberg จะใช้งานง่าย แต่การทำความเข้าใจหลักการทำงานของ Blocks และการใช้ประโยชน์จากฟังก์ชันต่าง ๆ อย่างเต็มที่ก็ยังต้องใช้เวลาในการเรียนรู้
Gutenberg editor ต่างจาก Classic editor อย่างไรบ้าง?
Gutenberg Editor และ Classic Editor เป็นตัวแก้ไขเนื้อหาที่ใช้งานกับ WordPress ได้เหมือนกัน แต่ก็มีวิธีการทำงานและคุณสมบัติที่แตกต่างกัน ดังตารางนี้
คุณสมบัติ Gutenberg Editor Classic Editor หลักการทำงาน ใช้ระบบ “Blocks” แต่ละ Block แทนเนื้อหาแต่ละส่วน (ข้อความ, รูปภาพ, วิดีโอ, ฯลฯ) ใช้หน้าต่างแก้ไขข้อความแบบ WYSIWYG คล้ายโปรแกรม Word การแสดงผล แสดงผลแบบ WYSIWYG ที่ใกล้เคียงกับหน้าเว็บจริงขณะแก้ไข แสดงผลใน Editor อาจแตกต่างจากหน้าเว็บจริง ต้องกด “Preview” เพื่อดูผลลัพธ์ การจัด Layout มีความยืดหยุ่นสูง สามารถจัด Layout ที่ซับซ้อนด้วย Columns และ Group Blocks ได้ง่าย การจัด Layout ที่ซับซ้อนต้องใช้ Shortcodes หรือ Code HTML/CSS การเพิ่มสื่อ เพิ่มรูปภาพ วิดีโอ และสื่ออื่นๆ ผ่าน Blocks โดยตรง เพิ่มสื่อผ่านปุ่ม Media Library และจัดวางใน Editor Reusable Content มีระบบ “Reusable Blocks” สำหรับบันทึกและนำ Blocks กลับมาใช้ใหม่ได้ง่าย ไม่มีฟังก์ชัน Reusable Content ในตัว Full Site Editing เป็นรากฐานสำคัญสำหรับ Full Site Editing ในอนาคต ไม่รองรับการแก้ไขส่วนต่างๆ ของเว็บไซต์นอกเหนือจากเนื้อหาโดยตรง ความซับซ้อน อาจมี Learning Curve สำหรับผู้ที่คุ้นเคยกับ Classic Editor มาก่อน ใช้งานง่ายและคุ้นเคยสำหรับผู้ที่เคยใช้ WordPress รุ่นเก่า การปรับแต่ง ปรับแต่ง Blocks แต่ละประเภทได้หลากหลายผ่าน Inspector Panel ทางด้านข้าง การปรับแต่งจำกัดอยู่กับตัวเลือกใน Toolbar และต้องใช้ CSS เพิ่มเติมสำหรับการปรับแต่งขั้นสูง Plugins มี Block-based Plugins ที่เพิ่มฟังก์ชันการทำงานใหม่ๆ ให้กับ Editor พึ่งพา Plugins เสริมจำนวนมากสำหรับฟังก์ชันที่ซับซ้อน อนาคต เป็น Editor หลักและมีการพัฒนาอย่างต่อเนื่อง ปัจจุบันเป็น Plugin เสริม และจะได้รับการสนับสนุนไปจนถึงปี 2024 (หรือนานกว่านั้นหากจำเป็น)
วิธีใช้ Gutenberg ของ WordPress
Gutenberg Editor ใช้งานง่ายและเน้นการสร้างเนื้อหาด้วย Blocks โดยมีทริคและวิธีการใช้ขั้นพื้นฐานต่าง ๆ ดังนี้
1.วิธีการเพิ่มบล็อกใหม่
การเริ่มต้นสร้างเนื้อหาใน Gutenberg คือ การเพิ่ม Blocks ใหม่ ซึ่งมีวิธีการเพิ่ม Block ได้หลายวิธี เช่น
คลิกที่ปุ่ม “+” (Insert Block) ได้หลายตำแหน่งใน Editor
ที่มุมบนซ้ายของหน้าจอ
เมื่อเลื่อนเมาส์ไปเหนือหรือใต้ Block ที่มีอยู่
ภายในพื้นที่ว่างของ Editor เมื่อยังไม่มี Block ใด ๆ เมื่อคลิกที่ปุ่ม “+” จะปรากฏ Library ของ Blocks ต่าง ๆ ให้คุณเลือกใช้งาน คุณสามารถเลื่อนดู หรือพิมพ์คำค้นหาเพื่อหา Block ที่ต้องการได้
พิมพ์ “/” (Slash Command) ใน Block ที่ว่างเปล่า ตามด้วยชื่อของ Block ที่ต้องการ เช่น /paragraph สำหรับ Block ข้อความ หรือ /image สำหรับ Block รูปภาพ จากนั้นกด Enter เพื่อเพิ่ม Block นั้นอย่างรวดเร็ว
ขณะที่คุณกำลังพิมพ์ข้อความใน Paragraph Block แล้วกด Enter จะสร้าง Paragraph Block ใหม่ขึ้นโดยอัตโนมัติ
2. วิธีจัดเรียงบล็อกให้สวย
Gutenberg เป็นเครื่องมือที่ช่วยให้คุณจัดเรียง Blocks ได้อย่างง่ายดาย ด้วยการ
ลากและวาง (Drag and Drop) เพียงแค่คลิกที่ไอคอนลูกศรขึ้นลง (Move) ที่ด้านบนของ Block (เมื่อ Block นั้นถูกเลือก) จากนั้นลาก Block ไปยังตำแหน่งที่คุณต้องการ แล้วปล่อยเมาส์
เมื่อเลือก Block แล้ว คุณจะเห็นปุ่มลูกศรขึ้นและลงที่ Toolbar ด้านบนของ Block ใช้ปุ่มเหล่านี้เพื่อเลื่อน Block ขึ้นหรือลงทีละตำแหน่ง
ที่มุมบนซ้ายของ Editor จะมีไอคอน “List View” ที่เมื่อคลิกแล้วจะแสดงรายการโครงสร้างของหน้าหรือโพสต์ โดยคุณสามารถคลิกและลาก Blocks ใน List View เพื่อจัดเรียงตำแหน่งได้อย่างง่ายดาย
3. วิธีการปรับแต่งบล็อก
Blocks แต่ละประเภทจะมีตัวเลือกการปรับแต่งที่แตกต่างกัน
ที่บน Toolbar ด้านบนของ Block จะมีตัวเลือกพื้นฐานสำหรับการปรับแต่ง Block นั้น ๆ เช่น การจัดแนวข้อความ (ซ้าย กลาง ขวา), การทำตัวหนา ตัวเอียง สำหรับ Paragraph Block หรือการเปลี่ยนรูปแบบของปุ่มสำหรับ Button Block
ที่ Inspector Panel ด้านข้าง คุณจะพบตัวเลือกการปรับแต่งที่ละเอียดมากขึ้นสำหรับ Block ที่เลือก เช่น การเปลี่ยนสีพื้นหลัง ขนาดตัวอักษร ระยะขอบ ระยะห่าง หรือการตั้งค่าเฉพาะสำหรับ Block นั้น ๆ (เช่น การเลือกรูปภาพสำหรับ Image Block หรือการใส่ URL สำหรับ Button Block)
4. วิธีจัดกลุ่มบล็อกหลายบล็อก
การจัดกลุ่ม Blocks จะช่วยให้คุณจัดการและปรับแต่ง Blocks หลาย ๆ อันพร้อมกันได้ง่ายขึ้น
เลือก Blocks ที่ต้องการ โดยกดปุ่ม Shift ค้างไว้แล้วคลิกที่ Blocks ที่ต้องการเลือก โดยใช้ Mouse ลากคลุมพื้นที่ที่ Blocks เหล่านั้นอยู่
เมื่อเลือก Blocks แล้ว จะมี Toolbar ปรากฏขึ้น ให้คลิกที่ไอคอน “…” (Show more options) จากนั้นเลือก Group แล้ว Blocks ที่เลือกจะถูกรวมอยู่ใน Group Block ใหม่
เมื่อเลือก Group Block คุณจะสามารถปรับแต่งพื้นหลัง สี หรือการจัดวางของ Blocks ทั้งหมด ที่ได้จัดอยู่ใน Group เดียวกันได้พร้อมกันเลย
5. วิธีเพิ่มหัวเรื่อง (H1,,H3 อื่น ๆ ) และข้อความ
การสร้างโครงสร้างเนื้อหาที่ชัดเจนเป็นสิ่งสำคัญสำหรับ SEO และการอ่าน โดยมีวิธีการเพิ่มข้อความดังนี้
เพิ่มหัวข้อเรื่อง
คลิกที่ปุ่ม “+” เพื่อเพิ่ม Block ใหม่
ค้นหาและเลือก Block “Heading”
พิมพ์ข้อความหัวเรื่องของคุณ
Toolbar ด้านบนหรือ Inspector Panel ด้านข้าง จะสามารถเลือกระดับของหัวเรื่องได้ (H1 ถึง H6 โดย H1 เป็นหัวเรื่องหลักของหน้า)
เพิ่มข้อความ
คลิกที่ปุ่ม “+” เพื่อเพิ่ม Block ใหม่
ค้นหาและเลือก Block “Paragraph”
เริ่มพิมพ์ข้อความของคุณ โดยคุณสามารถใช้ Toolbar ด้านบนเพื่อจัดรูปแบบข้อความเบื้องต้น เช่น ตัวหนา ตัวเอียง หรือใส่ลิงก์ได้
6. วิธีฝังสื่อ
Gutenberg ทำให้การฝังสื่อต่าง ๆ จากภายนอกเป็นเรื่องง่ายกว่าเคย โดยมีวิธีการดังนี้
การฝังวิดีโอจาก YouTube หรือ Vimeo
คลิกที่ปุ่ม “+” เพื่อเพิ่ม Block ใหม่
ค้นหาและเลือก Block “YouTube” หรือ “Vimeo”
วาง URL ของวิดีโอลงในช่องที่ปรากฏ แล้วคลิก “Embed”
การฝังโพสต์จากโซเชียลมีเดีย (เช่น Twitter, Facebook, Instagram)
คลิกที่ปุ่ม “+” เพื่อเพิ่ม Block ใหม่
ค้นหาและเลือก Block ของแพลตฟอร์มที่คุณต้องการฝัง (เช่น “Twitter”, “Facebook”, “Instagram”)
วาง URL ของโพสต์ลงในช่องที่ปรากฏ แล้วคลิก “Embed”
การฝังสื่ออื่นๆ (เช่น Spotify, SoundCloud) Gutenberg มี Block “Embed” ทั่วไป คุณสามารถเลือก Block นี้และวาง URL ของสื่อที่ต้องการฝัง หาก WordPress รองรับการฝังจากแหล่งนั้น ๆ ก็จะแสดงผลอย่างถูกต้อง
7. วิธีเพิ่มรูปภาพและสื่อต่าง ๆ
Gutenberg มี Blocks เฉพาะสำหรับการจัดการรูปภาพและสื่ออื่น ๆ
การเพิ่มรูปภาพ
คลิกที่ปุ่ม “+” เพื่อเพิ่ม Block ใหม่
ค้นหาและเลือก Block “Image”
คุณจะมีตัวเลือกในการอัปโหลดรูปภาพใหม่, เลือกจาก Media Library ที่มีอยู่, หรือแทรกจาก URL
เมื่อเลือกรูปภาพแล้ว คุณสามารถปรับขนาด จัดตำแหน่ง ใส่คำอธิบายภาพ และเพิ่มลิงก์ได้ใน Toolbar ด้านบนและ Inspector Panel ด้านข้างได้
การเพิ่มแกลเลอรีรูปภาพ:
คลิกที่ปุ่ม “+” เพื่อเพิ่ม Block ใหม่
ค้นหาและเลือก Block “Gallery”
เลือกรูปภาพหลายรูปจาก Media Library หรืออัปโหลดใหม่
คุณสามารถปรับจำนวนคอลัมน์ ขนาดรูปภาพ และตัวเลือกอื่น ๆ ใน Inspector Panel ด้านข้าง
การเพิ่มวิดีโอ (อัปโหลดเอง)
คลิกที่ปุ่ม “+” เพื่อเพิ่ม Block ใหม่
ค้นหาและเลือก Block “Video”
คุณสามารถอัปโหลดไฟล์วิดีโอจากคอมพิวเตอร์ของคุณ หรือเลือกวิดีโอจาก Media Library
คุณสามารถเปิด/ปิดการควบคุม, ตั้งค่าการเล่นอัตโนมัติ, และอื่นๆ ได้ใน Inspector Panel ด้านข้าง
การเพิ่มไฟล์เสียง
คลิกที่ปุ่ม “+” เพื่อเพิ่ม Block ใหม่
ค้นหาและเลือก Block “Audio”
8. วิธีการสร้างรูปแบบ
Patterns คือ กลุ่มของ Blocks ที่ได้รับการจัดเรียงและตั้งค่าไว้ล่วงหน้า ซึ่งช่วยให้คุณสร้าง Layout ที่ซับซ้อนได้อย่างรวดเร็ว โดยมีวิธีการใช้งาน ดังนี้
การเข้าถึง Patterns
เมื่อคุณคลิกที่ปุ่ม “+” เพื่อเพิ่ม Block ใหม่ จะมีแท็บ “Patterns” ปรากฏขึ้นข้าง ๆ แท็บ “Blocks”
ในแท็บ “Patterns” คุณจะเห็น Patterns ที่ WordPress มีให้ และ Patterns ที่ Theme หรือ Plugins ของคุณอาจเพิ่มเข้ามา
การใช้งาน Patterns
ให้เลือก Pattern ที่คุณต้องการใช้งาน
จากนั้น Pattern นั้นจะถูกแทรกเข้าไปใน Editor ของคุณ ซึ่งคุณสามารถปรับแต่งเนื้อหาและ Block ต่าง ๆ ใน Pattern ได้ตามต้องการ
การสร้าง Reusable Patterns (Patterns ที่นำกลับมาใช้ใหม่ได้)
สร้างกลุ่มของ Blocks ที่คุณต้องการบันทึกเป็น Pattern
เลือก Blocks ทั้งหมดที่คุณต้องการรวมไว้ใน Pattern
คลิกที่ไอคอน “…” (Show more options) ที่ Toolbar ของ Block ใด Block หนึ่งที่อยู่ในกลุ่ม
เลือก “Create pattern / reusable block” (หากเป็น WordPress รุ่นใหม่ จะมีตัวเลือก “Create pattern”)
ตั้งชื่อให้กับ Pattern ของคุณ และเลือก “Create” (หรือ “Reusable pattern” หากต้องการนำกลับมาใช้ใหม่ได้ทั่วทั้งเว็บไซต์)
เมื่อสร้างเสร็จแล้ว Patterns จะปรากฏในแท็บ “Patterns” และ “Reusable” (หากเลือกสร้างเป็น Reusable pattern) เมื่อคุณต้องการใช้งานอีกครั้ง
9. วิธีการใช้มุมมองรายการบล็อก
มุมมองรายการบล็อกช่วยให้คุณเห็นโครงสร้างทั้งหมดของเนื้อหาของคุณในรูปแบบ Outline ทำให้ง่ายต่อการนำทาง เลือก และจัดการ Blocks ที่ซับซ้อน
การเปิดใช้งาน List View ให้คลิกที่ไอคอน “List View” ที่มุมบนซ้ายของ Editor
การใช้งาน List View
List View จะแสดง Blocks ทั้งหมดในหน้าหรือโพสต์ของคุณในรูปแบบลำดับชั้น คุณสามารถคลิกที่ชื่อ Block ใน List View เพื่อเลือก Block นั้นใน Editor
คุณสามารถลากและวาง Blocks ใน List View เพื่อจัดเรียงตำแหน่งใหม่ได้อย่างแม่นยำ โดยเฉพาะอย่างยิ่งเมื่อจัดการกับ Layout ที่ซับซ้อน
คุณสามารถดูโครงสร้างของ Groups และ Columns ได้อย่างชัดเจน ทำให้ง่ายต่อการเลือก Block ที่ต้องการภายในโครงสร้างนั้น
10. วิธีใช้แป้นลัดของ Gutenberg
การใช้แป้นลัดช่วยให้คุณทำงานใน Gutenberg ได้รวดเร็วและมีประสิทธิภาพยิ่งขึ้น
กดแสดงรายการแป้นลัด โดยกด Shift + Alt + H (บน Windows) หรือ Control + Option + H (บน Mac) เพื่อแสดงรายการแป้นลัดทั้งหมดที่มี
แป้นลัดที่พบบ่อย
/ ตามด้วยชื่อ Block เพื่อเพิ่ม Block อย่างรวดเร็ว (เช่น /paragraph, /image)
Ctrl + Z (Windows) หรือ Cmd + Z (Mac) เพื่อเลิกทำ (Undo)
Ctrl + Shift + Z (Windows) หรือ Cmd + Shift + Z (Mac) เพื่อทำซ้ำ (Redo)
Ctrl + B (Windows) หรือ Cmd + B (Mac) เพื่อทำตัวหนา
Ctrl + I (Windows) หรือ Cmd + I (Mac) เพื่อทำตัวเอียง
Ctrl + K (Windows) หรือ Cmd + K (Mac) เพื่อแทรก/แก้ไขลิงก์
Alt + Shift + H เพื่อเปลี่ยนเป็น Heading 1
Alt + Shift + 2 ถึง 6 เพื่อเปลี่ยนเป็น Heading 2 ถึง 6
Alt + Shift + U เพื่อสร้างรายการแบบไม่มีลำดับ
Alt + Shift + O เพื่อสร้างรายการแบบมีลำดับ
Alt + Shift + ,เพื่อลดการเยื้อง
Alt + Shift + .เพื่อเพิ่มการเยื้อง
Ctrl + S (Windows) หรือ Cmd + S (Mac) พื่อบันทึกฉบับร่าง
Ctrl + Shift + S (Windows) หรือ Cmd + Shift + S (Mac) เพื่อบันทึกเป็นแบบร่าง
Ctrl + Enter (Windows) หรือ Cmd + Enter (Mac) เพื่อเผยแพร่หรืออัปเดต
11. วิธีการปรับแต่งบล็อกด้วยการแก้ไขไซต์เต็มรูปแบบ
การแก้ไขไซต์เต็มรูปแบบ (FSE) เป็นคุณสมบัติใหม่ที่พัฒนาต่อยอดจาก Gutenberg ซึ่งช่วยให้คุณสามารถปรับแต่งทุกส่วนของเว็บไซต์ของคุณได้โดยใช้ระบบ Blocks ภายใน Editor เดียว (คุณสมบัตินี้อาจยังไม่พร้อมใช้งานเต็มรูปแบบใน WordPress ทุกเวอร์ชัน และต้องใช้ Theme ที่รองรับ FSE เท่านั้น) ซึ่งมีวิธีการปรับแต่งได้ดังนี้
หาก Theme ของคุณรองรับ FSE คุณจะสามารถเข้าถึง Site Editor ได้จากเมนู “Appearance” -> “Editor” ใน WordPress Dashboard
ใน Site Editor คุณจะเห็นโครงสร้างของเว็บไซต์ของคุณในรูปแบบ Blocks รวมถึง Header, Footer, Sidebar และ Content Area
คุณสามารถเพิ่ม ลบ จัดเรียง และปรับแต่ง Blocks ในส่วนต่างๆ ของเว็บไซต์ได้เหมือนกับการแก้ไขโพสต์หรือหน้า
FSE จะช่วยให้คุณสามารถแก้ไข Templates ของหน้าต่าง ๆ (เช่น หน้าแรก หน้า Archive หน้า Single Post) ได้โดยใช้ Blocks
คุณยังสามารถปรับแต่ง Global Styles เช่น สี รูปแบบตัวอักษร และอื่น ๆ ที่มีผลต่อทั้งเว็บไซต์ได้จาก Site Editor
12. วิธีปิดใช้งานตัวแก้ไขบล็อกของ WordPress (Gutenberg)
หากคุณต้องการกลับไปใช้ Classic Editor แบบเดิม คุณสามารถทำได้โดยการติดตั้ง Plugin
ติดตั้ง Plugin “Classic Editor”
ไปที่ “Plugins” -> “Add New” ใน WordPress Dashboard
ค้นหา “Classic Editor”
ติดตั้งและเปิดใช้งาน Plugin “Classic Editor”
การตั้งค่า Classic Editor
หลังจากเปิดใช้งาน Plugin แล้ว ไปที่ “Settings” -> “Writing”
คุณจะมีตัวเลือกในการตั้งค่า Default Editor สำหรับผู้ใช้ทั้งหมด และตัวเลือกให้ผู้ใช้สามารถสลับระหว่าง Editor ได้
ให้เลือก “Classic Editor” เป็น Default Editor หากคุณต้องการใช้งาน Classic Editor เป็นหลัก
13. วิธีใช้พาเล็ตคำสั่ง
พาเล็ตคำสั่งเป็นเครื่องมือที่ช่วยให้คุณเข้าถึงคำสั่งต่าง ๆ ใน Gutenberg ได้อย่างรวดเร็วโดยใช้แป้นพิมพ์
การเปิดใช้งาน Command Palette ให้กด Ctrl + Shift + P (บน Windows/Linux) หรือ Cmd + Shift + P (บน Mac) เพื่อเปิด Command Palette
การใช้งาน Command Palette เมื่อ Command Palette เปิดขึ้น ให้พิมพ์คำสั่งที่คุณต้องการ เช่น “เพิ่มรูปภาพ”, “เปลี่ยนเป็นหัวเรื่อง”, “จัดกลุ่ม” จากนั้นรายการคำสั่งที่เกี่ยวข้องจะปรากฏขึ้น ให้ใช้ลูกศรขึ้นลงเพื่อเลือกคำสั่งที่ต้องการ แล้วกด Enter เพื่อเรียกใช้งาน
คำถามที่พบบ่อย
Gutenberg ดีกว่า Elementor จริงไหม?
การเปรียบเทียบว่า Gutenberg ดีกว่า Elementor หรือไม่นั้น ขึ้นอยู่กับความต้องการและทักษะของผู้ใช้งาน ซึ่งทั้งสองมีจุดเด่นและข้อจำกัดที่แตกต่างกัน
Gutenberg เป็นตัวแก้ไขหลักที่มาพร้อมกับ WordPress ฟรี ใช้งานง่ายสำหรับสร้างเนื้อหาทั่วไปและมีพื้นฐานการจัด Layout ที่ดี ทำงานได้รวดเร็วและมีประสิทธิภาพ เหมาะสำหรับผู้เริ่มต้นและผู้ที่ต้องการความเรียบง่าย
Elementor เป็น Plugin Page Builder ที่มีทั้งเวอร์ชันฟรีและ Pro (เสียเงิน) มีฟังก์ชันการออกแบบที่ซับซ้อนและหลากหลายกว่า มี Template และ Widget สำเร็จรูปมากมาย ใช้งานแบบ Drag and Drop ได้ ทำให้สร้าง Layout ที่สวยงามและเป็นเอกลักษณ์ได้ง่าย เหมาะสำหรับผู้ที่ต้องการควบคุมการออกแบบในทุกรายละเอียดและสร้างเว็บไซต์ที่มีความซับซ้อนสูง
หากคุณต้องการเครื่องมือฟรี ใช้งานง่าย รวดเร็ว และเน้นการสร้างเนื้อหาเป็นหลัก Gutenberg ถือเป็นตัวเลือกที่ดีสำหรับคุณ แต่ถ้าหากคุณต้องการความยืดหยุ่นในการออกแบบขั้นสูง มี Template สำเร็จรูป และไม่ติดขัดเรื่องงบประมาณ Elementor อาจเป็นตัวเลือกที่เหมาะสมกว่านั่นเอง
ความแตกต่างระหว่างบล็อคกับวิดเจ็ต คืออะไร?
เดิมทีบล็อก (Blocks) ใน Gutenberg ใช้สำหรับสร้างเนื้อหาภายในหน้าหรือโพสต์ ส่วนวิดเจ็ต (Widgets) ใช้สำหรับเพิ่มเนื้อหาและฟังก์ชันในพื้นที่เฉพาะของ Theme เช่น Sidebar, Footer หรือ Header
แต่ตั้งแต่ WordPress 5.8 เป็นต้นมา ความแตกต่างระหว่าง Blocks และ Widgets ได้ลดลงอย่างมาก เพราะ
พื้นที่ Widgets ก็รองรับการใช้งาน Blocks แล้ว นั่นหมายความว่าคุณสามารถเพิ่ม Blocks ต่างๆ (เช่น Paragraph, Image, Button) ลงในพื้นที่ Widgets ได้โดยตรง
สำหรับ Widgets แบบเดิมที่ยังไม่ได้แปลงเป็น Blocks จะยังคงสามารถใช้งานได้ผ่าน Block ที่ชื่อว่า “Legacy Widget”
สรุป ในปัจจุบันนี้ Widgets ก็คือ Blocks รูปแบบหนึ่ง ที่สามารถนำไปใช้งานในพื้นที่ที่ Theme กำหนดไว้สำหรับ Widgets ได้ ทำให้การจัดการเนื้อหาในทุกส่วนของเว็บไซต์มีความสอดคล้องกันมากขึ้น
Gutenberg ใช้งานฟรีไหม?
Gutenberg ใช้งานฟรี โดยเป็นส่วนหนึ่งของ WordPress Core ซึ่งหมายความว่าเมื่อคุณติดตั้ง WordPress เวอร์ชัน 5.0 ขึ้นไป คุณจะสามารถใช้งาน Gutenberg Editor ได้โดยไม่มีค่าใช้จ่ายเพิ่มเติม
Gutenberg ดีต่อ SEO ไหม?
Gutenberg ดีต่อ SEO เนื่องจาก
มีโครงสร้าง HTML ที่สะอาด มีความหมายและเป็นระเบียบ ซึ่งช่วยให้ Search Engines เข้าใจเนื้อหาของคุณได้ง่ายขึ้น
เว็บไซต์ที่สร้างด้วย Gutenberg มักจะมีขนาดไฟล์ที่เล็กกว่าและโหลดเร็วกว่าเมื่อเทียบกับ Page Builders บางตัว ซึ่งเป็นปัจจัยสำคัญต่อ SEO
Gutenberg ทำงานได้อย่างราบรื่นกับ Plugins SEO ยอดนิยม เช่น Yoast SEO และ Rank Math ทำให้คุณสามารถปรับแต่ง Meta Title, Description, Keywords และอื่น ๆ ได้ง่าย
Gutenberg ออกแบบมาเพื่อเน้นการสร้างเนื้อหาที่มีคุณภาพและเป็นระเบียบ ซึ่งเป็นหัวใจสำคัญของ SEO
อย่างไรก็ตามการที่ Gutenberg จะดีต่อ SEO หรือไม่นั้น ขึ้นอยู่กับการใช้งานของคุณด้วย หากคุณสร้างเนื้อหาที่มีคุณภาพ ใช้ Heading Tags อย่างถูกต้อง ใส่ Alt Text ให้รูปภาพ และปรับแต่ง SEO ด้วย Plugins อย่างเหมาะสม เว็บไซต์ที่สร้างด้วย Gutenberg ก็จะยิ่งช่วยเสริมให้คุณทำ SEO WordPress ได้อย่างดีเยี่ยม
สรุป
WordPress Gutenberg คือ ตัวแก้ไขเนื้อหาแบบ Block-Based ที่ปฏิวัติวิธีการสร้างและจัดการคอนเทนต์บน WordPress ด้วยการแบ่งเนื้อหาออกเป็น Blocks ทำให้ผู้ใช้สามารถจัดเรียง ปรับแต่ง และสร้างสรรค์ Layout ที่สวยงามได้อย่างง่ายดาย ไม่ว่าจะเป็นการเพิ่มข้อความ รูปภาพ วิดีโอ หรือสื่ออื่น ๆ
อีกทั้ง Gutenberg ยังมอบความยืดหยุ่นในการสร้างเว็บไซต์มากกว่า Editor แบบเดิม แม้ว่าในช่วงแรกอาจต้องมีการปรับตัว แต่เมื่อคุ้นเคยแล้ว Gutenberg จะช่วยให้การสร้างเนื้อหาเป็นเรื่องที่รวดเร็ว มีประสิทธิภาพ และสนุกสนานยิ่งขึ้น ดังนั้นการทำความเข้าใจหลักการทำงานของ Blocks การใช้เครื่องมือปรับแต่งต่าง ๆ และการใช้ประโยชน์จาก Features ที่มี จะช่วยให้คุณปลดล็อกศักยภาพใหม่ ๆ ในการสร้างเว็บไซต์ของคุณได้อย่างเต็มที่
DotPlusPlus พร้อมเป็นเพื่อนคู่คิดและช่วยพัฒนาเว็บไซต์ของคุณให้มีประสิทธิภาพ รวดเร็ว และตอบโจทย์ทุกความต้องการของคุณ หากคุณกำลังมองหาผู้เชี่ยวชาญในการสร้างหรือปรับปรุงเว็บไซต์ WordPress ให้สวยงาม ใช้งานง่าย และมีประสิทธิภาพ ติดต่อ DotPlusPlus เพื่อเริ่มต้นสร้างสรรค์เว็บไซต์ของคุณได้แล้ววันนี้!
สอบถามข้อมูลเพิ่มเติม สายด่วน : 095-953-7524 Dot Plus Plus บริการรับทำเว็บไซต์ WordPress @DotPlusPlus dotplusplus.design@gmail.com
อ้างอิง https://www.hostinger.com/tutorials/gutenberg-wordpress https://wpastra.com/guides-and-tutorials/wordpress-gutenberg-guide/
