คู่มือ WordPress Gutenberg

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

คุ้นเคยกับ Gutenberg และกำลังมองหาปลั๊กอินที่เหมาะสมหรือไม่? นี่คือ 5 อันดับแรกของเรา

WordPress Gutenberg คืออะไร?

Gutenberg เป็นตัวแก้ไข WordPress ใหม่ ออกแบบมาเพื่อขยายและปรับปรุงฟังก์ชันการทำงานของตัวแก้ไข WordPress แบบคลาสสิก ชื่อ Gutenberg มาจาก Johannes Gutenberg ชายผู้รับผิดชอบการสร้างต้นฉบับของแท่นพิมพ์เมื่อหลายร้อยปีก่อน เช่นเดียวกับ Johannes Gutenberg ที่เปลี่ยนโฉมหน้าของสิ่งพิมพ์ ปลั๊กอิน Gutenberg มีเป้าหมายเพื่อเปลี่ยนโฉมหน้าของการเผยแพร่ดิจิทัลด้วย WordPress
การเปลี่ยนแปลงที่ใหญ่ที่สุดอย่างหนึ่งของ Gutenberg ที่มีต่อ WordPress คือตัวเลือกเลย์เอาต์ขั้นสูง ผู้ใช้ WordPress หลายคนรู้สึกหงุดหงิดกับข้อจำกัดของ WordPress WYSIWYG (สิ่งที่คุณเห็นคือสิ่งที่คุณได้รับ) เกี่ยวกับการจัดรูปแบบ Gutenberg ได้กล่าวถึงปัญหานี้เกี่ยวกับสิ่งที่ทีมพัฒนาเรียก ว่า บล็อก อ่านต่อเพื่อดูว่าบล็อกคืออะไรและทำงานอย่างไร

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

ต่อไปนี้คือคำแนะนำเกี่ยวกับวิธีการติดตั้งและเริ่มต้นใช้งาน WordPress Gutenberg เพื่อเตรียมพร้อมสำหรับการเปิดตัวเต็มรูปแบบ
เราขอแนะนำให้คุณ สร้างไซต์สำหรับนักพัฒนา เพื่อไม่ให้สภาพแวดล้อมการผลิตของคุณถูกรบกวนโดยปลั๊กอินใหม่ Gutenberg ยังไม่พร้อมสำหรับการใช้งานกับสภาพแวดล้อมการผลิต
หมายเหตุสำหรับนักพัฒนา
หากคุณเป็นนักพัฒนา (หรือมีบางสิ่งที่คุณต้องการให้ผู้สร้างของ Gutenberg เห็น) คุณสามารถมีส่วนร่วมในการอภิปรายได้โดยไปที่ Gutenberg Github คุณสามารถมีส่วนร่วมผ่าน ฟ อ รัมสนับสนุน WordPress Gutenberg หรือช่อง WordPress Slack

ไม่แน่ใจเกี่ยวกับอะไรในคู่มือนี้? ติดต่อทีมสนับสนุนของเรา

วิธีการติดตั้งและเปิดใช้งาน Gutenberg Editor

Gutenberg มาพร้อมกับการติดตั้ง WordPress 5.0 ทั้งหมด ในการติดตั้ง Gutenberg คุณต้องอัปเดตเวอร์ชัน WordPress เท่านั้น ทำได้จากข้อความเสริมบนแดชบอร์ดของแผงการดูแลระบบ หากไม่เห็นข้อความเสริมนี้ คุณสามารถตรวจสอบ แท็บ อัปเดต ในแผงด้านซ้ายมือได้เช่นกัน
เมื่อคุณตัดสินใจอัปเดต WordPress จะติดตั้งส่วนประกอบใหม่อย่างรวดเร็ว จากนั้นนำคุณไปยังหน้าจอพิเศษเพื่อแนะนำ Gutenberg หน้าจอนี้จะครอบคลุมคุณลักษณะที่ทรงพลังที่สุดของ Gutenberg

เมื่อติดตั้งแล้ว Gutenberg จะทำหน้าที่เป็นตัวแก้ไขหลักของคุณ ก่อนหน้านี้มันเป็นไปได้ที่จะติดตั้งตัวแก้ไขเป็นปลั๊กอินแล้วถอนการติดตั้งหากคุณไม่ชอบมัน ณ เวอร์ชัน 5.0 นั่นไม่ใช่ตัวเลือกอีกต่อไป อย่างไรก็ตาม…

จะเกิดอะไรขึ้นถ้าฉันไม่ชอบ Gutenberg Editor?

Automattic ยังคงอนุญาตให้เข้าถึงตัวแก้ไข WordPress แบบคลาสสิกโดยการดาวน์โหลดปลั๊กอิน หากคุณสนใจ คุณสมบัติที่ยอดเยี่ยมที่มาพร้อมกับ WordPress 5.0 มากกว่า แต่ไม่ต้องการ Gutenberg คุณสามารถเปลี่ยนกลับไปใช้ตัวแก้ไขแบบคลาสสิกได้อย่างง่ายดายโดยดาวน์โหลดเป็นปลั๊กอิน
ในการดำเนินการนี้ ให้ไปที่ Plugins → Add New และค้นหาตัวแก้ไขแบบคลาสสิก ในขณะที่เขียนอยู่ขณะนี้อยู่ที่หน้าแรก ในขณะที่เขียน ตัวแก้ไขแบบคลาสสิกจะยังคงได้รับการสนับสนุนจาก Automattic จนถึงปี 2021

ภาพรวมของ WordPress Gutenberg

เมื่อคุณติดตั้งและเปิดใช้งาน Gutenberg แล้ว ก็ถึงเวลาดูว่าตัวแก้ไขใหม่มีลักษณะอย่างไร มีการเปลี่ยนแปลงหลายอย่างกับสิ่งที่คุณอาจคุ้นเคย จนถึงตอนนี้ เราพบว่าทั้งหมดนั้นใช้งานง่ายและใช้งานง่าย คุณสามารถดูการสาธิต WordPress ที่สมบูรณ์ของ Gutenberg ได้ที่ หัวข้อ Gutenberg ที่แถบด้านข้างทางซ้าย หรือคุณสามารถสร้างหน้าใหม่และเริ่มป้อนเนื้อหาของคุณเองได้
เมื่อคุณเลือกตัวเลือกใดตัวเลือกหนึ่งเหล่านี้แล้ว คุณจะได้รับการต้อนรับด้วยตัวแก้ไขใหม่ แถบด้านข้างทางขวาตอนนี้มีแท็บสองแท็บ แทนที่จะเป็นแท็บเดียว ลิงก์เหล่านี้ไปยังการตั้งค่าเอกสารของคุณ (หมวดหมู่ แท็ก รูปภาพเด่น ข้อความที่ตัดตอนมา และอื่นๆ) และการตั้งค่าบล็อกตามลำดับ สิ่งที่คุณเห็นในการตั้งค่าบล็อกจะเปลี่ยนไปตามประเภทของบล็อกที่คุณเลือก เราจะตรวจสอบเพิ่มเติมในภายหลัง

ในการเปรียบเทียบกับตัวแก้ไข WYSIWYG ของ WordPress ความแตกต่างที่ใหญ่ที่สุดอย่างหนึ่งที่คุณจะสังเกตเห็นคือจำนวนพื้นที่ที่ Gutenberg เสนอให้สำหรับการเขียนจริง สามารถขยายเพิ่มเติมได้โดยการซ่อนแถบด้านข้าง
การมุ่งเน้นที่การเขียนนี้ไม่ได้ทำให้ฟังก์ชันการทำงานหายไป ในขณะที่เราจะสำรวจในเชิงลึกมากขึ้นในภายหลัง ตัวแก้ไข WordPress Gutenberg ใหม่มีฟีเจอร์เจ๋ง ๆ หลายอย่างที่ไม่มีอยู่ในตัวแก้ไขปัจจุบัน หนึ่งที่ชัดเจนในทันทีคือ ส่วน สารบัญ ที่คุณจะพบใน แถบด้านข้าง ของ เอกสาร นี่คือเครื่องมือนำทางที่เรียบง่ายซึ่งออกแบบมาเพื่อช่วยคุณสำรวจเนื้อหาของคุณ นอกจากนี้ยังเป็นการดีที่จะรู้ว่าการแทรกสารบัญจะมีลักษณะอย่างไร เนื่องจากเนื้อหาแบบยาวเป็นวิธีที่ดีที่สุดในการเพิ่มประสิทธิภาพ SEO จึงกลายเป็นแนวทางปฏิบัติที่ดีที่สุดสำหรับผู้เขียนบล็อกอย่างรวดเร็ว

การแทรก การย้าย และการลบบล็อค

หากต้องการแทรกบล็อก ให้เลื่อนเคอร์เซอร์ของเมาส์ไปทางด้านซ้ายมือของตัวแก้ไข แล้วคลิกปุ่ม + จากที่นี่ คุณจะพบกับชุดตัวเลือกสำหรับสิ่งที่จะแทรก ภายใต้ Blocks คุณจะพบส่วนหัวของ Common Blocks , Formatting , Layout Elements และ Widgets คุณยังจะพบตัวเลือกการฝังที่ใช้งานง่ายหลายตัวเลือกใน แท็บ การ ฝัง คลิกบล็อกที่คุณเลือกเพื่อเพิ่มลงในโพสต์
หากคุณต้องการเพิ่มการบล็อกระหว่างสองช่วงตึกที่มีอยู่ ให้คลิกที่บล็อกหน้าตำแหน่งที่คุณต้องการแล้วกดกลับ จากนั้นทำตามขั้นตอนด้านบน
เมื่อคุณแทรกบล็อกลงในโพสต์ของคุณแล้ว คุณสามารถย้ายบล็อกนั้นได้โดยลากและวาง หรือคลิกที่บล็อกแล้วใช้ลูกศรที่อยู่ทางด้านซ้าย หากคุณแทรกบล็อกโดยไม่ได้ตั้งใจหรือต้องการลบบล็อก คุณสามารถทำได้โดยกดปุ่มลบบนแป้นพิมพ์

บล็อกการแก้ไข

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

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

การใช้คอลัมน์และตาราง

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

เมื่อคุณแทรกคอลัมน์แล้ว Gutenberg จะแยกแถวออกเป็นสองช่วงตึกโดยอัตโนมัติ ประเภทบล็อกเหล่านี้สามารถแก้ไขได้ทีละรายการโดยใช้สัญลักษณ์ + ของตนเองเพื่อเปลี่ยนประเภท ทำให้การจัดตำแหน่งการฝังง่ายขึ้นมากในการจัดการ

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

การเพิ่มการฝัง

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

อีกครั้ง คุณมีตัวเลือกการจัดตำแหน่งและการจัดรูปแบบมาตรฐาน ตลอดจนตัวเลือกในการลิงก์ไปยัง URL ที่ไม่ซ้ำกัน คุณยังคงเพิ่มคลาส CSS เพิ่มเติมในการฝังได้ ซึ่งทำได้ง่ายๆ จากแถบด้านข้าง

การใช้ตัวแก้ไขโค้ด Gutenberg

แม้ว่าบล็อกจะเป็นส่วนเสริมที่ยอดเยี่ยมสำหรับ WordPress (เราคิดว่า) บล็อกเหล่านี้ไม่เพียงแค่ช่วยในเลย์เอาต์ภาพของบทความ WordPress เท่านั้น เมื่อคลิกจุดสามจุดที่ด้านบนขวาของตัวแก้ไข (หรือกด Ctrl+Shift+Alt+M) คุณจะสามารถเปิดตัวแก้ไขโค้ดได้

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

• วรรค
• ภาพ
• หัวเรื่องย่อย
• คอลัมน์
• เสียง
• วีดีโอ
• แกลเลอรี่
• รายการ
• อ้าง

คุณสามารถแทรกบล็อกของคุณเองผ่านตัวแก้ไขโค้ดโดยพิมพ์โค้ดด้านล่างและแทนที่ [type] ด้วยหนึ่งในรายการที่ระบุไว้ด้านบน

ฟังก์ชั่นการดูแลระบบอื่นๆ

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

สิ่งที่เราชอบ

ตัวแก้ไขทำให้การสร้างเนื้อหาที่ดูดีเป็นเรื่องง่าย
จริงอยู่ที่ตัวแก้ไข Gutenberg ทำให้การรวมเนื้อหาที่สวยงามและทันสมัยเข้าด้วยกันเป็นเรื่องง่ายอย่างเหลือเชื่อ เราพอใจมากกับวิธีที่ตัวแก้ไขใช้บล็อก และตัวเลือกการฝังหมายความว่าเราไม่ได้ติดอยู่กับโค้ดที่เสียหาย น่าสนใจที่จะเห็นว่าบล็อกใดที่ชุมชนสร้างขึ้นเมื่อ WordPress 5.0 เปิดตัว
มันตอบสนองและทำงานบนมือถือ
สิ่งนี้มีความสำคัญมากขึ้นในช่วงไม่กี่ปีที่ผ่านมา โดยเฉพาะอย่างยิ่งสำหรับผู้ที่เดินทางบล็อก ความสามารถในการอัปเดตและแก้ไขเนื้อหาอย่างรวดเร็วระหว่างปลายทางนั้นดีมากและเป็นคุณสมบัติที่เราชอบมาก
พื้นที่สีขาวมากขึ้นหมายถึงบรรณาธิการที่ฟุ้งซ่านน้อยลง
เราเป็นแฟนตัวยงของการยกเครื่อง UI ของตัวแก้ไขและการเพิ่มขึ้นของพื้นที่สีขาว โดยเฉพาะอย่างยิ่งเมื่อพูดถึงตัวแก้ไขโค้ด เรายังเป็นแฟนตัวยงของการเว้นวรรคอัตโนมัติระหว่างบล็อกต่างๆ สำหรับอินเทอร์เฟซโค้ด

สิ่งที่เราไม่ชอบ

ขณะนี้ Gutenberg ไม่มี Markdown Support
แม้ว่าฟีเจอร์การจัดรูปแบบของ Markdown ทั้งหมดจะเข้าถึงได้ผ่านอินเทอร์เฟซภาพของ Gutenberg แต่เราก็ยังรู้สึกเศร้าเล็กน้อยที่เห็นว่าทุกอย่างผ่านพ้นไป หวังว่าทีมงาน Gutenberg จะดำเนินการตามเวลาที่ Gutenberg เข้าสู่การผลิต
SEO อาจมีปัญหาบ้าง
ขณะนี้เราเห็นการสนับสนุนการตั้งค่า SEO และข้อดีของ WordPress ที่ชัดเจนยังคงมีอยู่ อย่างไรก็ตาม ดูเหมือนว่า Gutenberg จะขาดคุณสมบัติ SEO บางอย่างที่คุณสามารถดูได้จากตัวแก้ไขปัจจุบัน ขณะนี้ คุณสามารถ เพิ่มเมตาบ็อกซ์ในโพสต์ของคุณ ได้ แต่เรายังสงสัยว่าการออกแบบบล็อกอาจส่งผลต่อวิธีที่เครื่องมือค้นหารับรู้โพสต์ของคุณอย่างไร
บางอย่างใช้ไม่ได้ผล
นี่เป็นปัญหาเสมอในการเปลี่ยนวิธีการทำงานของ WordPress ปัจจุบันมีปลั๊กอินและธีมมากกว่า 55,000 รายการ อาจเป็นปัญหาที่ใหญ่กว่าที่คาดไว้ นักพัฒนาบางคนถึงกับบอกว่า มันไม่ได้อยู่ใน WordPress

ความคิดสุดท้ายเกี่ยวกับ Gutenberg

WordPress Gutenberg นั้นยอดเยี่ยม มันเป็นอย่างแท้จริง การเปิดตัวเต็มรูปแบบด้วย WordPress 5.0 ได้ประกาศในยุคใหม่สำหรับการพัฒนาเว็บและการเข้าถึง UI นั้นได้รับการขัดเกลาและใช้งานง่าย ในขณะที่โครงสร้างบล็อกทำให้การไปยังหน้าต่างๆ เป็นเรื่องง่าย มีปัญหาบางประการเกี่ยวกับอัตราการนำไปใช้ และปลั๊กอินและธีมบางส่วนยังคงใช้งานไม่ได้เมื่อใช้กับ 5.0
ดังที่กล่าวไว้ เป็นที่ทราบกันดีอยู่แล้วว่าจะต้องมีการปรับเปลี่ยนบางอย่างในชุมชน WordPress การอัปเดตปลั๊กอินและธีมยังคงดำเนินการอยู่สำหรับผู้ใช้บางคน และผู้ใช้ที่มีประสบการณ์พบว่าตนเองไม่พึงพอใจกับการเปลี่ยนแปลงขั้นตอนที่รุนแรง
เราจะต้องดูว่ามันเป็นอย่างไร แต่เรารอคอยที่จะได้เห็น Gutenberg เริ่มเข้าควบคุมสภาพแวดล้อมการผลิต WordPress ทั่วโลก