WordPress Block Editor: วิธีการทำงานอย่างมีประสิทธิภาพใน Gutenberg?

Gutenberg เวอร์ชันปี 2022 ไม่ได้เป็นเพียงผู้สืบทอดของ Classic Editor อีกต่อไป เครื่องมือแก้ไขบล็อกของ WordPress เป็นกระบวนทัศน์ใหม่ในการสร้างเว็บไซต์ WP ที่มีเป้าหมายเพื่อปฏิวัติประสบการณ์การโพสต์ทั้งหมด – เหมือนกับที่ Gutenberg ทำกับการพิมพ์หนังสือ

มันคุ้มค่ากับการโฆษณาหรือไม่? อย่างแน่นอน! มาดู หลักการสำคัญๆ ของ Gutenberg กัน:

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

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

GUTENBERG ปรับปรุง UX อย่างไร

เราต้องการเน้นคุณสมบัติเพิ่มเติมที่ผู้ใช้ WP ทั่วไปอาจไม่ชัดเจน แต่สร้างความแตกต่างอย่างมากในแง่ของประสบการณ์ผู้ใช้:

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

นี่คือวิธีใช้ตัวแก้ไขบล็อก WordPress เพื่อสร้างโพสต์และเพจ

อย่างไรก็ตาม โพสต์นี้มีเนื้อหาครอบคลุม Lifehacks ของ Gutenberg และสอนวิธีการทำงานของบล็อกเนื้อหา WordPress อย่างมีประสิทธิภาพมากขึ้น อ่านเพิ่มเติม หากคุณต้องการขยายฟังก์ชันการทำงานมาตรฐานและทำให้ประสบการณ์การแก้ไขของคุณราบรื่นขึ้น

WordPress Gutenberg Editor ทำงานอย่างไร

เมื่อเปลี่ยนเป็น Gutenberg แถบด้านข้าง WP มาตรฐานจะถูกแทนที่ด้วยโหมดเต็มหน้าจอ

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

• โปรแกรมแก้ไขภาพ – อยู่ทางด้านซ้ายและกินพื้นที่ส่วนใหญ่ของหน้าจอ เนื้อหาการแก้ไขที่นี่เกือบจะเหมือนกับว่าจะมีลักษณะอย่างไรบนเว็บไซต์
• แผงด้านบน – มีฟังก์ชันทั่วไป: เพิ่มบล็อกใหม่ เลิกทำหรือทำซ้ำการกระทำก่อนหน้า สลับเป็นฉบับร่าง เปิดการแสดงตัวอย่าง และเผยแพร่
• แผงด้านข้าง – อยู่ด้านขวาและมีตัวเลือกขั้นสูง มี 2 ​​แท็บ: หน้า (การตั้งค่าการเผยแพร่) & บล็อก (การตั้งค่าสำหรับบล็อกที่เลือก)

ตัวเลือกการปรับแต่งที่มีประโยชน์ใน Gutenberg

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

เลิกทำการกระทำก่อนหน้า

มีปุ่มลูกศรสองปุ่มที่ด้านบนซ้ายของโปรแกรมแก้ไข Gutenberg ลูกศรซ้ายยกเลิกการกระทำก่อนหน้า ลูกศรขวาทำซ้ำการกระทำที่เพิ่งเลิกทำ

บันทึกความคืบหน้า

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

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

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

คืนค่าการเปลี่ยนแปลงก่อนหน้า

Gutenberg มีส่วนที่มีการแก้ไขในแถบด้านข้างใต้แท็บสถานะ & การเปิดเผยบนแท็บหน้าหลัก/โพสต์

คลิก “การแก้ไข” แล้วคุณจะเห็นสองคอลัมน์เปรียบเทียบเวอร์ชันก่อนหน้าและเวอร์ชันปัจจุบัน การเปลี่ยนแปลงที่ถูกลบ (ซ้าย) จะถูกเน้นด้วยสีแดง และเนื้อหาที่เพิ่ม (ขวา) จะถูกเน้นด้วยสีเขียว

ใช้ปุ่ม "กู้คืนการแก้ไขนี้" ที่มุมขวาบนของหน้า

โหมดดูตัวอย่าง

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

ซ่อนจากการเข้าถึงสาธารณะ

ปรับโหมดการมองเห็นในส่วนสถานะและการมองเห็นของแถบด้านข้าง Gutenberg มี 3 ระดับการเข้าถึงให้เลือก:

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

กำหนดเวลาโพสต์

ในส่วนสถานะและการเปิดเผยเดียวกัน ให้ใช้ตัวเลือกเผยแพร่เพื่อเลือกวันและเวลาที่คุณต้องการเผยแพร่โพสต์/เพจ

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

เปลี่ยน URL

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

กำหนดหมวดหมู่

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

กำหนดแท็ก

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

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

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

ปรับแต่งข้อความที่ตัดตอนมา

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

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

เปิด/ปิดความคิดเห็น

สุดท้าย ใช้ส่วนการสนทนาของแถบด้านข้าง Gutenberg เพื่อแสดงความคิดเห็น นอกจากนี้ คุณอาจอนุญาตให้ใช้ Pingbacks & Trackbacks แต่เราขอแนะนำให้ปิดตัวเลือกนี้

วิธีการทำงานกับ WordPress Gutenberg Blocks?

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

การเพิ่มบล็อกใหม่

• วิธีที่ #1: คลิกปุ่ม + ที่ด้านซ้ายของแถบด้านบน Gutenberg เลือกบล็อกที่ต้องการในหน้าต่างป๊อปอัปแล้วคลิก
• วิธีที่ #2: ค้นหาปุ่ม + ใต้บล็อกสุดท้าย เลือกบล็อกที่ต้องการในหน้าต่างป๊อปอัป
• วิธีที่ #3: เลื่อนเคอร์เซอร์ระหว่างสองบล็อกที่มีอยู่ แล้วคลิกปุ่ม + ตรงกลาง คุณสามารถเพิ่มบล็อกใหม่ระหว่างสองบล็อกใดก็ได้

การจัดรูปแบบขั้นพื้นฐานและขั้นสูง

เลือกบล็อกที่แทรกแล้วคุณจะเห็นแผงการตั้งค่าป๊อปอัปเหนือบล็อก สิ่งเหล่านี้เป็นการจัดรูปแบบพื้นฐานและแต่ละบล็อกจะมีการตั้งค่าของตัวเอง

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

บล็อกตำแหน่งและการจัดตำแหน่ง

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

ตอนนี้ เลือกบล็อกตรงกลางแผงด้านบนเพื่อเปลี่ยนการจัดตำแหน่ง

คัดลอก ทำซ้ำ หรือลบ

นอกจากตัวเลือกการจัดรูปแบบแล้ว แผงป๊อปอัปยังมีตัวเลือกในการคัดลอก ทำซ้ำ และลบบล็อก

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

รูปแบบ Gutenberg

เคยได้ยินรูปแบบสำเร็จรูปสำหรับ Gutenberg หรือไม่? โปรแกรมแก้ไขข้อความ WP จัดเตรียมส่วนที่มีรูปแบบมาตรฐานที่ใช้กับธีมใดก็ได้ แต่คุณสามารถใช้รูปแบบบล็อก WordPress ที่ไม่ซ้ำใครซึ่งสร้างโดยนักพัฒนาธีม

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

สร้างส่วนด้วยตนเอง

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

หากต้องการเลือกจำนวนคอลัมน์ ให้เพิ่มบล็อกคอลัมน์ก่อน จากนั้นเลือกจำนวนและเค้าโครง

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

ใช้ "บล็อกที่ใช้ซ้ำได้"

เป็นไปได้ที่จะบันทึกส่วนทั้งหมดเพื่อใช้ซ้ำในโพสต์หรือเพจต่างๆ สิ่งเหล่านี้เรียกว่าบล็อก WordPress ที่นำกลับมาใช้ใหม่ได้

สิ่งที่คุณต้องทำคือสร้างส่วนตามที่คุณต้องการ คลิกจุดสามจุดในเมนูป๊อปอัพ แล้วเลือก “เพิ่มไปยังบล็อกที่ใช้ซ้ำได้” ตั้งชื่อส่วน แล้วคลิก "บันทึก"

หากต้องการเพิ่มส่วนที่บันทึกไว้ในหน้า ให้กดปุ่ม + แล้วไปที่แท็บ "ใช้ซ้ำได้" วางบล็อกที่บันทึกไว้ในไม่กี่คลิกเท่านั้น!

Lifehacks เพิ่มเติมสำหรับ Gutenberg เพื่อทราบเกี่ยวกับ

1. ใช้ “/” เพื่อเพิ่มบล็อกใหม่อย่างรวดเร็ว และคุณไม่จำเป็นต้องเปิดแผงบล็อกทุกครั้งแล้วเลื่อนเพื่อค้นหาบล็อกที่คุณต้องการอีกต่อไป เพียงพิมพ์ “/” จากบรรทัดใหม่แล้วเริ่มพิมพ์ชื่อบล็อก
2. ตรึงแถบเครื่องมือด้านบน – และแถบป๊อปอัพจะไม่ซ้อนทับเนื้อหาในบล็อกด้านบนอีกต่อไป
3. ใช้ตัวแก้ไขโค้ดเพื่อแก้ไขเนื้อหา HTML – และคุณจะสามารถแก้ไขแอตทริบิวต์ WordPress HTML ของบล็อกนี้ ระบุคลาส CSS ของคุณเอง หรือเขียนโค้ดแบบฝังสำหรับบล็อก เลือกบล็อก คลิกจุดสามจุด แล้วเลือกตัวเลือก “แก้ไขเป็น HTML”
4. ค้นหาบล็อกที่ต้องการอย่างรวดเร็วในสารบัญ หากโพสต์ของคุณประกอบด้วยบล็อกจำนวนมากจนยากแก่การค้นหาบล็อกที่ต้องการ ให้คลิกปุ่มที่มีแถบแนวนอนสามแถบที่ด้านบนซ้าย คุณจะเห็นรายการบล็อกที่ใช้ทั้งหมดบนหน้านี้
5. ลากและวางรูปภาพโดยตรงจากคอมพิวเตอร์ของคุณ และจะไม่ต้องดำเนินการเพิ่มเติมกับบล็อก "รูปภาพ" อีกต่อไป
6. ใช้ปุ่มลัด – และการทำงานกับตัวแก้ไขบล็อค WordPress จะง่ายขึ้นมาก ดูรายการปุ่มลัดทั้งหมดในตัวแก้ไขของคุณโดยคลิกจุด 3 จุดที่ด้านบนขวา => แป้นพิมพ์ลัด

จะขยายการทำงานของ Gutenberg ได้อย่างไร

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

ปลั๊กอินใดที่สามารถเติมเต็มบล็อกหลักด้วยบล็อก WordPress ใหม่ เรามีโพสต์พร้อมบทสรุปของส่วนเสริมที่ดีที่สุด 12 รายการพร้อมบล็อกแบบกำหนดเองของ WordPress ในปี 2022

หนึ่งในนั้นคือส่วน เสริม Getwid ฟรี :

ปลั๊กอินบล็อกเนื้อหา WordPress เป็นไลบรารีของบล็อก Gutenberg 40+ และเทมเพลตบล็อก WordPress 35+ บล็อก Getwid ทั้งหมดมีน้ำหนักเบา อเนกประสงค์ และปรับแต่งได้ภายใต้ความต้องการของเว็บไซต์และโครงการใดๆ

ตัวอย่างของบล็อก Getwid ได้แก่:

• ส่วน – ใช้งานได้มากกว่าบล็อกกลุ่ม WordPress (รวมหลายบล็อกในส่วนเดียว);
• Image Stack Gallery – ใช้บล็อกเพื่อสร้างแกลเลอรีรูปภาพสไตล์ต่างๆ
• ป๊อปอัปวิดีโอ – แสดงวิดีโอโดยใช้ตัวเลือกต่างๆ
• Image Hotspot – เพิ่มเครื่องหมายเคลื่อนไหวได้ไม่จำกัดพร้อมคำแนะนำเครื่องมือที่ปรับแต่งได้อย่างเต็มที่
• Post Slider – แสดงแถบเลื่อนโพสต์บล็อกที่ใดก็ได้บนเว็บไซต์ของคุณ โพสต์สามารถมาจากหมวดหมู่เฉพาะ

Getwid ให้การโต้ตอบที่ราบรื่นกับบล็อก Gutenburg มาตรฐาน เพื่อให้คุณสามารถออกแบบบล็อกที่สวยงามยิ่งขึ้น นอกจากนี้ addon ยังมีชุดรูปแบบบล็อก WordPress เริ่มต้น – Getwid Base

คำสุดท้ายใน WordPress Block Editor

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

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

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