บทช่วยสอน Gutenberg: วิธีใช้ตัวแก้ไขบล็อก WordPress ใหม่

Johannes Gutenberg ตั้งชื่อตามผู้ประดิษฐ์แท่นพิมพ์ ซึ่งเป็นตัวแก้ไขบล็อก WordPress Gutenberg ใหม่ ซึ่งเปิดตัวใน WordPress 5.0 เป็นตัวแก้ไขเริ่มต้นสำหรับ WordPress

ภารกิจนั้นง่ายมาก เพื่อสร้างประสบการณ์การเขียนและแก้ไขแบบใหม่ด้วย WordPress

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

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

ในอีกสักครู่ฉันจะแนะนำวิธีการใช้ตัวแก้ไขบล็อก Gutenberg

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

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

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

ฉันหวังว่าหลังจากอ่านบทความนี้แล้ว คุณจะสบายใจกับตัวแก้ไขบล็อกในภายหลัง

ทีละขั้นตอน: จะใช้ตัวแก้ไขบล็อก Gutenberg ได้อย่างไร?

เริ่มต้นด้วยการสร้างเพจหรือโพสต์ สิ่งที่คุณคุ้นเคยอยู่แล้ว

เมื่อคุณเพิ่มหน้าหรือโพสต์ใหม่ สิ่งแรกที่คุณควรสังเกตคือแถบเครื่องมือนี้

ทางด้านซ้าย เรามีแถบเครื่องมือ + เพิ่มบล็อก นี่เป็นหนึ่งในที่ที่คุณสามารถเพิ่มบล็อกให้กับเนื้อหาของคุณได้

คุณสามารถเพิ่มบล็อกได้โดยคลิกด้านล่างบล็อกสุดท้าย จากนั้นคลิกไอคอน + ที่ปรากฏขึ้น

อีกวิธีหนึ่งคือ โฮเวอร์ระหว่างบล็อค ไอคอน Add Blocks จะปรากฏขึ้น คลิกเพื่อเพิ่มบล็อก

ถัดไปคือปุ่มเลิกทำและทำซ้ำ

ไอคอนถัดไปบนแถบเครื่องมือด้านบนจะแสดงโครงสร้างเนื้อหาของคุณ

ถัดไปคือบล็อกการนำทาง

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

ทางขวา,

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

ไอคอนถัดไปจะสลับการแสดงการตั้งค่า จะแสดงหรือซ่อนบานหน้าต่างด้านขวา

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

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

ดังนั้นคุณสามารถทำอะไรกับเครื่องมือและตัวเลือกเพิ่มเติมได้บ้าง?

• คุณมีแถบเครื่องมือ – เข้าถึงเครื่องมือบล็อกและเอกสารทั้งหมดได้ในที่เดียว
• โหมดสปอตไลท์ ให้คุณโฟกัสไปที่บล็อกทีละครั้ง
• โหมดเต็มหน้าจอ ระเบิดโปรแกรมแก้ไขของคุณเพื่อประสบการณ์การแก้ไขที่ปราศจากสิ่งรบกวน
• สลับระหว่าง Visual Editor – สิ่งที่คุณเห็นตอนนี้ และ Code Editor – หากคุณต้องการเขียนโค้ดที่บล็อก Code และ HTML ไม่สามารถจัดการได้
• จัดการบล็อกที่นำกลับมาใช้ใหม่ได้
• แป้นพิมพ์ลัดและ
• คัดลอกเนื้อหาทั้งหมดบนตัวแก้ไข

บล็อกกูเทนเบิร์ก

จนถึงตอนนี้คุณยังคงเห็นบล็อก แต่มันคืออะไร?

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

Gutenberg แบ่งออกเป็น 6 หมวดหมู่ ได้แก่ บล็อกที่ใช้บ่อย บล็อกทั่วไป การจัดรูปแบบ องค์ประกอบเลย์เอาต์ วิดเจ็ต และการฝัง

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

ด้วยตัวแก้ไขใหม่ คุณจะใช้บล็อคที่ได้รับการจัดระเบียบเกี่ยวกับประเภทของเนื้อหา ในการเพิ่มเนื้อหาข้อความ จำเป็นต้องมีบล็อกข้อความ/ย่อหน้า, รูปภาพ – บล็อกรูปภาพ, Html, บล็อก HTML

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

การใช้เครื่องมือบล็อก

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

ไม่เหมือนกับตัวแก้ไขแบบคลาสสิกที่มีเครื่องมือทั้งหมดมองเห็นได้

หากต้องการเข้าถึงเครื่องมือเหล่านี้ ให้คลิกเนื้อหาในบล็อก เราจะใช้ย่อหน้า/เนื้อหาเนื่องจากเป็นวรรคที่คุณมักจะใช้

เมื่อคุณคลิกข้อความหรือเนื้อหาในบล็อก กล่องเครื่องมือจะเปิดขึ้นเหนือเนื้อหา

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

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

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

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

แปลงบล็อก Gutenberg

หากต้องการแปลงบล็อก ให้คลิกบล็อกตามที่คุณเห็นในบล็อกย่อหน้าด้านบน

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

การแปลงบล็อกย่อหน้าเพื่ออ้างอิงตอนนี้มีลักษณะดังนี้

ปุ่มตัวเลือกเพิ่มเติม

ปุ่มอื่น ๆ ที่ชุดเครื่องมือบล็อกมีคือไอคอน " ตัวเลือกเพิ่มเติม " - จุดแนวตั้งสามจุด คลิกบล็อกใดก็ได้เพื่อดู

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

การเปลี่ยนลิงก์ถาวรของโพสต์หรือหน้าด้วยตัวแก้ไขบล็อก Gutenberg

คลิกชื่อโพสต์หรือหน้า ด้านบนนั้น ลิงค์จะปรากฏขึ้น

คลิกปุ่มแก้ไข จากนั้นแก้ไขลิงก์ของคุณ จากนั้นคลิกบันทึก

การตั้งค่าเอกสารและบล็อกใน Gutenberg Block Editor

ทางด้านขวาของทุกโพสต์หรือหน้าของ Gutenberg เป็นบานหน้าต่างที่มีสองแท็บ

บานหน้าต่างเอกสารมีการตั้งค่าทั้งเอกสารสำหรับหน้าหรือโพสต์ รวมถึงสถานะและการมองเห็น ผู้เขียนบทความ แท็ก รูปภาพเด่น การสนทนา - เพื่ออนุญาตให้แสดงความคิดเห็น การตั้งค่าที่เกี่ยวข้องกับหมวดหมู่และปลั๊กอินสำหรับโพสต์และหรือหน้า

บานหน้าต่างบล็อกประกอบด้วยการตั้งค่าเฉพาะบล็อก

คลิกบล็อกในพื้นที่เนื้อหา จากนั้นในบานหน้าต่างด้านขวา ให้คลิกบานหน้าต่างบล็อก

บทสรุป

เราได้กล่าวถึงข้อมูลจำนวนหนึ่งเกี่ยวกับตัวแก้ไข Gutenberg Blocks

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

คุณกำลังใช้ตัวแก้ไขบล็อกใหม่หรือไม่? ประสบการณ์ของคุณกับมันคืออะไร?

คุณอาจต้องการแปลงบทความ WordPress ที่มีอยู่เป็นบล็อก Gutenberg หรือไม่