คู่มือขั้นสูงของคุณในการใช้ WordPress Gutenberg Editor ที่กำลังจะมีขึ้น

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

การเปลี่ยนแปลงครั้งใหญ่เช่นนี้อาจทำให้คุณได้ยินเสียงระฆังเตือนในหัว...

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

ในโพสต์นี้ คุณจะได้เรียนรู้คำตอบของคำถามเหล่านั้น และอีกมากมาย

นี่คือสุดยอดคู่มือ WordPress Gutenberg Editor สำหรับทุกคนที่สร้างเนื้อหาด้วย WordPress

คุณจะได้เรียนรู้:

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

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

Gutenberg Editor คืออะไรและทำไมคุณถึงควรใส่ใจ

Gutenberg Editor เป็นการจำลองใหม่ของโปรแกรมแก้ไขข้อความ WordPress ปัจจุบันที่คุณใช้สร้างบทความหรือหน้าด้วย WordPress

ฉันพูดว่าการ สร้างจินตนาการใหม่ มากกว่าการ ออกแบบใหม่ เพราะมันเป็นการสร้างสรรค์ประสบการณ์การตัดต่อ ขึ้นมา ใหม่อย่างแท้จริง ตั้งแต่เริ่มต้น

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

อะไรที่ทำให้ Gutenberg Editor เป็น "การสร้างจินตนาการใหม่ที่สมบูรณ์"?

ขั้นแรก มาเริ่มด้วยการทบทวนความหมายของ “ตัวแก้ไข WordPress” หากคุณไม่แน่ใจว่าฉันกำลังพูดถึงอะไร นี่คือ สิ่งที่ตัวแก้ไข WordPress TinyMCE ปัจจุบันดูเหมือน :

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

บรรณาธิการ Gutenberg แนะนำบางสิ่งที่เรียกว่า "บล็อก"

โปรแกรมแก้ไขข้อความ WordPress ปัจจุบันเป็นเหมือนเอกสาร Microsoft Word แบบยาว Gutenberg เปลี่ยนไดนามิกนั้นด้วยสิ่งที่เรียกว่า blocks

แทนที่จะเป็นฟิลด์แก้ไขเดียว แต่ละ "สิ่ง" ใน Gutenberg เป็น "บล็อก" ของตัวเอง หากคุณเคยเขียนโพสต์ด้วยสื่อ – เป็นแนวคิดเดียวกัน

ตัวอย่างเช่น:

• ข้อความแต่ละย่อหน้าเป็นบล็อกที่แยกจากกัน
• รูปภาพเป็นบล็อกของตัวเอง
• วิดีโอ YouTube เป็นบล็อกของตัวเอง
• …คุณได้รับความคิด

จากนั้นคุณรวบรวมเนื้อหาของคุณโดยใช้ชุดของบล็อก ตัวอย่างเช่น นี่คือลักษณะของเนื้อหาเดียวกันจากด้านบนใน Gutenberg มีสี่บล็อกที่แตกต่างกัน:

• บล็อกสามย่อหน้าแยกกัน
• บล็อกภาพเดียว

ความสำคัญของแนวทางแบบบล็อกนี้คือปลดล็อกความสามารถขั้นสูงสำหรับเนื้อหาและเลย์เอาต์

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

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

นี่คือเหตุผลที่ทีมหลักของ WordPress กำลังทำการเปลี่ยนแปลงนี้

ตลอดชีวิต WordPress ได้ใช้ตัวแก้ไขพื้นฐานเดียวกัน (TinyMCE) แม้ว่าการออกแบบอาจมีการเปลี่ยนแปลงที่นี่และที่นั่น ฟังก์ชันการทำงานหลักไม่เคยเปลี่ยนแปลง

แล้วทำไมตอนนี้ถึงเปลี่ยนไป? ถ้ามันใช้งานได้ในช่วง ~15 ปีที่ผ่านมาทำไมมันถึงทำงานต่อไปอีก 15 ปีข้างหน้าไม่ได้?

มีเหตุผลบางประการ

ก่อนอื่น ตัวแก้ไขปัจจุบันจำกัดผู้ใช้ทั่วไปมากเกินไปในยุคนี้ แม้ว่า WordPress จะทำให้คุณสามารถสร้างทุกอย่างที่คุณสามารถจินตนาการ ได้ แต่ก็จะทำได้ก็ต่อเมื่อคุณรู้จัก HTML/CSS บางอย่าง เท่านั้น

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

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

Gutenberg สามารถรวมอินเทอร์เฟซต่าง ๆ ทั้งหมดไว้ในระบบบล็อกได้

ประการที่สาม Gutenberg แนะนำเทคโนโลยีที่ทันสมัยให้กับ WordPress โดยเฉพาะ React สิ่งนี้ไม่เพียงแต่ช่วยตัวแก้ไขเท่านั้น แต่ยังช่วยให้นักพัฒนาบุคคลที่สามสามารถทำงานร่วมกับเทคโนโลยีสมัยใหม่เหล่านั้นได้

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

ข้อดีและข้อเสียของการย้ายไปยัง Gutenberg Editor ใหม่

ดังนั้น… Gutenberg จะเป็นสิ่งที่ดีสำหรับคุณหรือไม่?

จริงๆ แล้ว ชุมชน WordPress กลายเป็นปัญหาที่สร้างความแตกแยกได้ค่อนข้างมาก โดยมีการโต้เถียงกันอย่างกระตือรือร้นจากทั้งสองฝ่าย

ด้านหนึ่งคุณมีคนพูดถึงประโยชน์ของ Gutenberg:

• ความเป็นไปได้มากขึ้นสำหรับเนื้อหา - Gutenberg เพิ่มบล็อกที่สร้างไว้ล่วงหน้าสำหรับปุ่ม คำพูดดึง ฯลฯ ซึ่งช่วยให้คุณควบคุมเนื้อหาของคุณได้มากขึ้นโดยไม่ต้องใช้ CSS ที่กำหนดเอง นอกจากนี้ ปลั๊กอินของบริษัทอื่นยังสามารถเพิ่มบล็อกเนื้อหาของตนเองได้ ซึ่งช่วยให้คุณมีความยืดหยุ่นมากยิ่งขึ้น
• ความเป็นไปได้ที่มากขึ้นสำหรับเลย์เอาต์ – นอกเหนือจากความเป็นไปได้ของเนื้อหาใหม่ คุณยังได้รับตัวเลือกเลย์เอาต์ใหม่ เช่น ความสามารถในการรวมคอลัมน์หรือตัวคั่นโดยไม่ต้องใช้โค้ดที่กำหนดเอง
• ประสบการณ์ที่เป็นหนึ่ง เดียว – แทนที่จะต้องใช้รหัสย่อเพื่อแทรกเนื้อหาจากปลั๊กอินของบุคคลที่สาม ปลั๊กอินเหล่านั้นจะสามารถสร้างบล็อกของตนเองได้ ซึ่งจะสร้างประสบการณ์การแก้ไขที่เรียบง่ายและเป็นหนึ่งเดียวกันมากขึ้น
• เหมาะกับมือถือ – Gutenberg ใช้งานได้ดีบนมือถือเป็นค่าเริ่มต้น ซึ่งช่วยให้คุณสร้างหรือแก้ไขเนื้อหาจากอุปกรณ์ใดก็ได้

แต่ในอีกด้านหนึ่ง คุณมีคนชี้ให้เห็นปัญหาใหญ่บางอย่างเกี่ยวกับโครงการที่มีความทะเยอทะยานเช่นนี้:

• ความเข้ากันได้ย้อนหลัง – ~32% ของอินเทอร์เน็ตทั้งหมด ใช้ตัวแก้ไข WordPress ปัจจุบัน ซึ่งทำให้ยากต่อการเปลี่ยนไปใช้ประสบการณ์การแก้ไขแบบใหม่ทั้งหมด โดยพื้นฐานแล้ว มีหลายกรณีที่มีขอบมากมายที่มีเนื้อหาเก่าทั้งหมดที่เป็นการยากที่จะรับรองการเปลี่ยนแปลงที่ราบรื่น
• ยากสำหรับนักพัฒนา – ผู้ พัฒนา ธีมและปลั๊กอินจะต้องสร้างความเข้ากันได้ของ Gutenberg ลงในปลั๊กอินและธีมของพวกเขา และส่วนขยายที่เก่ากว่าอาจทำงานได้ไม่สมบูรณ์แบบเสมอไป มีปลั๊กอินที่เก่ากว่าหลายหมื่นตัวที่อาจประสบปัญหาความเข้ากันได้
• การให้ความรู้แก่ผู้ใช้ – ในขณะที่ผู้ใช้ ใหม่ อาจชอบ Gutenberg ผู้ใช้เก่าจะต้องเรียนรู้เวิร์กโฟลว์ใหม่ ซึ่งยากเป็นพิเศษสำหรับนักพัฒนาที่สร้างไซต์สำหรับลูกค้าที่ไม่ใช่ด้านเทคนิค

WordPress Gutenberg Editor เป็นสิ่งที่ดีหรือไม่ดี?

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

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

บรรณาธิการ Gutenberg จะเปิดตัวเมื่อใด

คำตอบสั้นๆ คือ – เราไม่ทราบวันที่แน่นอน Gutenberg จะเปิดตัวโดยเป็นส่วนหนึ่งของ WordPress 5.0 แต่ยังไม่มีคำที่เป็นทางการในวันที่เผยแพร่ WordPress 5.0 ที่แน่นอน

ตอนนี้เรามีความคิดคร่าวๆแล้ว จากการประชุมเปิดตัว WordPress 5.0 ล่าสุด วันที่ คาดการณ์ไว้ จะเร็วที่สุดเท่าที่ 19 พฤศจิกายน 2018 หรือช้าสุดคือ วันที่ 22 มกราคม 2019

นี่คือคำตอบที่ยาวกว่า:

ขณะนี้ Gutenberg Editor มีอยู่แล้วเป็นปลั๊กอิน ระหว่างสถานะเบต้า หากคุณต้องการ คุณสามารถติดตั้งปลั๊กอินและเริ่มใช้งานบนไซต์ของคุณได้แล้ววันนี้ ( แม้ว่าจะอยู่ในรุ่นเบต้า ดังนั้นฉันจะไม่แนะนำ )

เมื่อเบต้าและการทดสอบเสร็จสิ้น ทีมงาน WordPress จะรวม Gutenberg Editor เข้ากับซอฟต์แวร์ WordPress หลักใน WordPress 5.0 จากนั้น เมื่อคุณอัปเดตไซต์ WordPress เป็น WordPress 5.0 แล้ว Gutenberg Editor จะแทนที่ตัวแก้ไข TinyMCE ปัจจุบันโดยอัตโนมัติ

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

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

ไม่ต้องกังวล – Gutenberg สร้างขึ้นเพื่อให้เข้ากันได้แบบย้อนหลัง

ตามที่เป็นอยู่ในขณะนี้ Gutenberg นำเนื้อหาเก่าทั้งหมดของคุณมาไว้ในบล็อก คลาสสิก เดียว ตัวอย่างเช่น นี่คือสิ่งที่ตัวอย่าง TinyMCE จากด้านบนดูเหมือนเมื่อฉันติดตั้ง Gutenberg:

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

เมื่อคุณแปลงเนื้อหาเก่าของคุณให้เป็นบล็อค มันจะทำงานเหมือนกับโพสต์ Gutenberg Editor อื่นๆ

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

ตัวแก้ไข Gutenberg จะทำงานกับธีม WordPress ทั้งหมดหรือไม่

ใช่! อีกครั้ง เนื่องจาก Gutenberg จะเป็นตัวแก้ไขเริ่มต้น มันจึงจำเป็นต้องทำงานร่วมกับธีม WordPress ใดๆ ก็ตาม

จากที่กล่าวมา มีบางสิ่งที่นักพัฒนาสามารถทำได้เพื่อเพิ่มความสามารถพิเศษให้กับ Gutenberg ดังนั้นคุณจะเริ่มเห็นว่า "เข้ากันได้กับ Gutenberg" ปรากฏขึ้นบนสื่อการตลาดของธีมต่างๆ ในไม่ช้านี้

นี่คือสิ่งที่ทำให้ชุดรูปแบบเข้ากันได้กับ Gutenberg:

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

คุณต้องใช้ Gutenberg Editor เมื่อเปิดตัว WordPress 5.0 หรือไม่?

ไม่! แม้ว่า Gutenberg จะเป็นตัวแก้ไขเริ่มต้นใน WordPress 5.0 แต่คุณไม่จำเป็นต้องใช้มันจริงๆ

หากคุณต้องการใช้ตัวแก้ไข WordPress ปัจจุบันต่อไป มี ปลั๊กอิน Classic Editor ที่ เป็นทางการ ที่จะซ่อนร่องรอยของ Gutenberg และคืนค่าประสบการณ์การแก้ไขปัจจุบัน

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

บทช่วยสอน WordPress Gutenberg – คุณจะใช้ตัวแก้ไขใหม่ได้อย่างไร

โอเค ตอนนี้คุณจบหลักสูตรการชน Gutenberg 101 แล้ว ไปลงมือปฏิบัติกับ Gutenberg Editor กัน

เป้าหมายของหัวข้อนี้คือเพื่อให้คุณทำความคุ้นเคยกับ Gutenberg Editor เพื่อที่คุณจะได้เริ่มใช้งานได้ทันทีเมื่อเปิดตัว

ในการเริ่มต้น ต่อไปนี้คือภาพกราฟิกที่จะช่วยให้คุณเข้าใจองค์ประกอบหลักของอินเทอร์เฟซ Gutenberg Editor:

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

จากนั้น เมื่อคุณไปเพิ่มบล็อกใหม่ คุณจะเห็นหน้าต่างป๊อปอัปนี้พร้อมรายการบล็อกที่มีอยู่ทั้งหมด คุณสามารถ:

1. ใช้แท็บหีบเพลงเพื่อเรียกดูบล็อคที่มีอยู่ทั้งหมด
2. ค้นหาโดยตรงสำหรับบล็อกที่คุณต้องการ

วิธีสร้างบล็อกโพสต์อย่างง่ายด้วย Gutenberg Editor

ในส่วนนี้ คุณจะได้เรียนรู้วิธีดำเนินการประเภทเดียวกับ ที่คุณสามารถทำได้ในโปรแกรมแก้ไข WordPress ปัจจุบัน

โดยพื้นฐานแล้ว คุณจะได้เรียนรู้วิธีปรับเวิร์กโฟลว์ที่มีอยู่ให้เข้ากับ Gutenberg Editor จากนั้น ในส่วนถัดไป ฉันจะแสดงวิธีใช้ประโยชน์จากฟังก์ชันใหม่ของ Gutenberg Editor

การเพิ่มหรือจัดรูปแบบเนื้อหาข้อความพื้นฐาน

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

เมื่อคุณคลิกเข้าไปในบล็อค คุณจะเห็นแถบเครื่องมือการจัดรูปแบบปรากฏขึ้นโดยที่คุณสามารถ:

• เปลี่ยนการจัดตำแหน่ง
• เพิ่มตัวหนาและตัวเอียง
• ใส่ลิงค์
• เป็นต้น

โดยทั่วไป สิ่งนี้จะทำหน้าที่เหมือนกับแถบเครื่องมือในตัวแก้ไขปัจจุบัน:

ต่อไป ฉันจะแสดงให้คุณเห็นทางเลือกที่เรียบร้อยสำหรับแนวทางเริ่มต้นนี้

นอกเหนือจากตัวเลือกการจัดรูปแบบในแถบเครื่องมือแล้ว คุณยังได้รับตัวเลือกบางอย่างในแถบด้านข้างทางขวาซึ่งช่วยให้คุณ:

• ควบคุมขนาดและสีของข้อความ
• เพิ่มดรอปแคป

ง่ายพอแล้วใช่มั้ย?

การสร้างหัวเรื่อง (H1, H2 เป็นต้น)

คุณมีตัวเลือกต่างๆ สองสามอย่างสำหรับการสร้างหัวเรื่อง

ขั้นแรก คุณสามารถใช้ไอคอน + เพื่อแทรกบล็อก หัวเรื่อง ใหม่:

เมื่อคุณแทรกบล็อกส่วน หัว แล้ว คุณสามารถพิมพ์เพื่อเพิ่มข้อความและใช้แถบด้านข้างหรือแถบเครื่องมือเพื่อควบคุมว่าจะใช้ส่วนหัวใด (เช่น H2 กับ H3):

นอกจากนี้ คุณยังสามารถ:

• เปลี่ยนบล็อกย่อหน้าปกติให้เป็นบล็อกส่วนหัวโดยใช้ปุ่ม เปลี่ยนประเภทบล็อก
• ใช้ markdown เพื่อสร้างหัวเรื่องของคุณ (เช่น “## This is a heading 2”)

นี่คือ GIF เพื่อแสดงสองวิธีนี้:

การแทรกรูปภาพ วิดีโอ หรือเนื้อหาสื่ออื่นๆ

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

แล้วการแทรกเนื้อหาสื่อล่ะ

ในการแทรกเนื้อหาสื่อ คุณสามารถใช้ไอคอน + เดียวกันนั้นเพื่อแทรกบล็อก

หากต้องการแทรกเนื้อหาสื่อ ด้านล่าง เนื้อหาที่มีอยู่ ให้ใช้ไอคอน + ที่ มุมบนซ้าย

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

เมื่อคุณเปิดป๊อปอัป แทรกบล็อค คุณสามารถเลือกจาก:

• รูปภาพ – แทรกรูปภาพจากไลบรารีสื่อ WordPress หรือ URL ภายนอก
• วิดีโอ – ฝังวิดีโอจากไลบรารีสื่อ WordPress หรือ URL ภายนอก
• การฝัง – บล็อกแยกกันเพื่อช่วยให้คุณฝังเนื้อหาจาก YouTube, Vimeo, Spotify, SoundCloud, Instagram และแหล่งอื่นๆ มากมาย

ตัวอย่างเช่น การแทรกรูปภาพจากไลบรารีสื่อ WordPress มีลักษณะดังนี้:

และนี่คือวิธีที่คุณสามารถฝังวิดีโอ YouTube:

การแทรกรหัสย่อจากปลั๊กอินอื่น

หากคุณเป็นเหมือนผู้ใช้ WordPress ส่วนใหญ่ คุณอาจมีปลั๊กอินบางตัวที่คุณรวมไว้ในบทความหรือเนื้อหาของหน้าโดยใช้รหัสย่อ

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

การจัดเรียงเนื้อหาใหม่ (คุณมีสองตัวเลือก)

โอเค ง่ายพอจนถึงตอนนี้… แต่ถ้าคุณต้องการเปลี่ยนลำดับของบล็อกล่ะ

คุณมีสองทางเลือกในการทำเช่นนั้น

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

ประการที่สอง คุณสามารถใช้ลูกศรขึ้นหรือลงเพื่อเลื่อนบล็อกขึ้นหรือลงหนึ่งตำแหน่ง:

*หากต้องการเปิดใช้งานการลากและวาง ให้วางเมาส์ไว้เหนือจุด 6 จุดระหว่างลูกศรขึ้นและลง

การทำงานกับข้อมูลเบื้องหลัง (หมวดหมู่, URL Slug ฯลฯ)

ตกลง ดังนั้นข้างต้นควรครอบคลุมถึงวิธีการเพิ่มเนื้อหาบล็อกพื้นฐาน แต่ส่วนเบื้องหลังอื่นๆ ของการเตรียมโพสต์สำหรับตีพิมพ์ล่ะ

สำหรับการดำเนินการส่วนใหญ่ คุณสามารถใช้แท็บ เอกสาร ของแถบด้านข้างได้ นี่คือที่ที่คุณจะ:

• เลือกวันที่เผยแพร่/กำหนดเวลาโพสต์ล่วงหน้า
• เลือกผู้เขียน
• เพิ่มหมวดหมู่และแท็ก
• เลือกภาพเด่นของคุณ
• ใส่ข้อความที่ตัดตอนมาของคุณ

นอกจากนี้ คุณสามารถใช้ปุ่มด้านบนแถบด้านข้างเพื่อ:

• ดูตัวอย่างโพสต์ของคุณ
• บันทึกแบบร่าง ( Gutenberg จะบันทึกแบบร่างของคุณโดยอัตโนมัติ ดังนั้นโดยปกติคุณไม่จำเป็นต้องดำเนินการนี้ด้วยตนเอง )
• เผยแพร่โพสต์ของคุณ

สิ่งเดียวที่ยุ่งยากคือการตั้งกระทู้หรือ URL ของหน้า หากต้องการแก้ไข ให้คลิกที่ชื่อ จากนั้น คุณจะสามารถแก้ไขกระสุนได้:

สิ่งที่เกี่ยวกับปลั๊กอินเช่น Yoast SEO? พวกเขาจะทำงานอย่างไร?

มีโอกาสดีที่คุณมีปลั๊กอินแบ็กเอนด์อื่นๆ ที่คุณต้องกำหนดค่าสำหรับเนื้อหาแต่ละส่วน

มีสองวิธีที่คุณจะโต้ตอบกับปลั๊กอินเหล่านี้

ก่อนอื่น นักพัฒนาจำนวนมากกำลังทำงานเกี่ยวกับความเข้ากันได้ของ Gutenberg โดยตรงอยู่แล้ว ตัวอย่างเช่น Yoast SEO รองรับ Gutenberg แล้ว และคุณจะกำหนดการตั้งค่า Yoast SEO ได้จากแถบด้านข้างของ เอกสาร เดียวกัน:

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

เคล็ดลับ 6 ข้อในการทำงานอย่างมีประสิทธิผลยิ่งขึ้นกับ Gutenberg

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

1. บล็อกการแทรกอย่างรวดเร็วโดยการพิมพ์ "/" เพื่อประหยัดเวลาได้มาก

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

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

แทนที่จะคลิกไอคอน + เพียงแค่:

• กด Enter เพื่อสร้างบล็อกใหม่
• พิมพ์ “/”
• เริ่มพิมพ์ชื่อบล็อค

ขณะที่คุณพิมพ์ Gutenberg จะแนะนำบล็อกที่ตรงกันโดยอัตโนมัติ จากนั้นเพียงกด Enter เพื่อแทรกบล็อกที่คุณต้องการ

นี่คือการดำเนินการ:

มันเร็วกว่ามากใช่ไหม?

2. เรียนรู้แป้นพิมพ์ลัดเพื่อการแก้ไขที่รวดเร็วขึ้น

Gutenberg มาพร้อมกับแป้นพิมพ์ลัดที่ช่วยให้คุณทำงานได้เร็วขึ้น

คุณสามารถแสดงรายการแป้นพิมพ์ลัดเหล่านี้ได้โดยคลิก CTRL + Alt + H (Windows) หรือ CMD + Alt + H (Mac):

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

• Ctrl + S – บันทึกร่างจดหมายของคุณ
• Ctrl + Z – เลิกทำ หรือ Ctrl + Y – ทำซ้ำ
• Ctrl + Alt + Backspace - ลบบล็อกที่เลือก ( สะดวกจริงๆ )
• Ctrl + Shift + D - ทำซ้ำบล็อกที่เลือก
• Ctrl + Alt + T – แทรกบล็อกใหม่ ก่อน บล็อก ที่ เลือก
• Ctrl + Alt + Y – แทรกบล็อกใหม่ หลัง บล็อกที่เลือก

คุณยังสามารถใช้ปุ่มลัดส่วนกลางส่วนใหญ่ได้ เช่น Ctrl + B สำหรับตัวหนาหรือ Ctrl + V เพื่อวาง

3. ลากรูปภาพจากเดสก์ท็อปของคุณไปยังเนื้อหา Gutenberg ของคุณ

หากคุณต้องการใส่รูปภาพจำนวนมาก นี่เป็นอีกหนึ่งเคล็ดลับที่ดี

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

WordPress จะอัปโหลดไปยังไลบรารีสื่อของคุณโดยอัตโนมัติและแทรกไว้ที่นั่น มีเพียงสิ่งเดียวที่ต้องใส่ใจ – ตรวจสอบให้แน่ใจว่าคุณเห็นเส้นสีน้ำเงินเมื่อคุณลากรูปภาพ มิฉะนั้นจะไม่ทำงาน:

4. เพิ่มแถบเครื่องมือแก้ไขคงที่

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

หากคุณไม่ชอบสิ่งนั้น คุณสามารถเปิดตัวเลือก Unified Toolbar เพื่อรับแถบเครื่องมือที่แสดงอยู่เสมอที่ด้านบนสุดของอินเทอร์เฟซ Gutenberg:

5. ใช้ไวยากรณ์ Markdown สำหรับส่วนหัว รายการ ฯลฯ

ถ้าคุณชอบใช้ markdown คุณจะสามารถรวมไวยากรณ์ markdown ไว้ใน Gutenberg ได้

ตัวอย่างเช่น:

• ## - สร้าง H2 ( คุณเห็นสิ่งนี้แล้ว - มันเปลี่ยนเป็นบล็อกส่วนหัว )
• * – เริ่มรายการแบบไม่เรียงลำดับ
• 1. – เริ่มรายการสั่งซื้อ
• > – สร้างใบเสนอราคาบล็อก ( แปลงเป็นบล็อกใบเสนอราคา )

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

6. แก้ไข HTML โดยตรงหากจำเป็น

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

ใช้ประโยชน์จากฟังก์ชันใหม่ของ Gutenberg – คอลัมน์ ปุ่ม และอื่นๆ อีกมากมาย!

เอาล่ะ เราได้กล่าวถึง:

• วิธีใช้ Gutenberg เพื่อสร้างโพสต์บล็อกพื้นฐาน
• เคล็ดลับบางประการเพื่อเพิ่มความเร็วในการทำงานกับ Gutenberg

ตอนนี้ มาดูสิ่ง ใหม่ๆ เจ๋งๆ ที่คุณสามารถทำได้กับ Gutenberg กัน นี่คือคุณสมบัติที่น่าตื่นเต้นที่จะช่วยอธิบายว่าทำไมทีม WordPress จึงตัดสินใจก้าวไปข้างหน้ากับ Gutenberg

ปุ่มแทรก – ไม่จำเป็นต้องใช้ HTML

ด้วยตัวแก้ไขเก่า วิธีเดียวในการสร้างปุ่มคือเพิ่มคลาส CSS ด้วยตนเองหรือใช้ปลั๊กอินของบุคคลที่สาม

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

สร้างเค้าโครงหลายคอลัมน์

ด้วยตัวแก้ไขแบบเก่า ไม่มีทางที่จะสร้างเลย์เอาต์แบบหลายคอลัมน์ได้โดยไม่ต้องใช้ HTML ที่กำหนดเองหรือปลั๊กอินของบุคคลที่สาม

ด้วย Gutenberg คุณเพียงแค่เพิ่มบล็อก คอลัมน์ จากนั้น คุณสามารถเพิ่มบล็อกอื่นๆ ภายใน คอลัมน์ต่างๆ ได้:

สร้างภาพที่ยืดเต็มความกว้าง

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

สร้างเทมเพลตบล็อกที่นำกลับมาใช้ใหม่ได้

หากคุณพบว่าตัวเองใช้บล็อกร่วมกันเป็นประจำ คุณสามารถประหยัดเวลาได้ด้วยการสร้างกลุ่มบล็อกที่นำกลับมาใช้ใหม่ได้

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

คุณจะตั้งชื่อมัน จากนั้น คุณจะสามารถแทรกทั้งเทมเพลตได้เหมือนกับที่คุณทำกับบล็อกอื่นๆ:

คุณสามารถเพิ่มบล็อกและฟังก์ชันการทำงานเพิ่มเติมด้วยปลั๊กอินของบุคคลที่สาม

นี่คือจุดที่ Gutenberg เริ่มเย็นลง:

ปลั๊กอินของบริษัทอื่นสามารถเพิ่มบล็อก ของตัวเอง ซึ่งคุณสามารถใช้ในการออกแบบ Gutenberg ของคุณได้

มีสองวิธีที่สิ่งนี้จะเป็นประโยชน์กับคุณ:

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

ตัวอย่างเช่น ตรวจสอบ ปลั๊กอิน Stackable ฟรี เมื่อคุณติดตั้งและเปิดใช้งานแล้ว คุณจะได้รับบล็อก Stackable ชุดใหม่ใน Gutenberg:

จากนั้นคุณสามารถใช้บล็อกเหล่านั้นเพื่อทำสิ่งที่น่าสนใจ เช่น การแทรกตารางราคาหรือคำรับรอง:

นี่เป็นเพียงจุดเริ่มต้นสำหรับ WordPress Gutenberg Editor

และนั่นแหล่ะ! หากคุณมาไกลถึงขนาดนี้ คุณควรเป็นกูรูของ Gutenberg ที่พร้อมจะเริ่มต้นใช้งานทันทีที่ WordPress 5.0 เปิดตัว

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

Gutenberg ไม่เพียงแต่จะส่งผลต่อวิธีการสร้างเนื้อหาของคุณ ในตอนนี้ แต่ยังจะมีบทบาทสำคัญใน WordPress ในอนาคตอีกด้วย

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

ดังนั้น…มาเป็นเพื่อนที่ดีกับ Gutenberg เพราะคุณจะได้เจอมันอีกมากในอีกไม่กี่ปีข้างหน้านี้!