13+ Quick Gutenberg WordPress Tips เพื่อเร่งเวิร์กโฟลว์ของคุณ

เผยแพร่แล้ว: 2020-04-07

ยังไม่ได้ลองใช้ตัวแก้ไข Gutenberg WordPress ใหม่ใช่หรือไม่ ด้วยการเปิดตัว WordPress 5.0 Kirk ใหม่ในเดือนธันวาคม 2018 พวกเขาได้แนะนำตัวแก้ไขบล็อกเริ่มต้น aka Gutenberg

Gutenberg เป็นเครื่องมือสร้างหน้าใหม่ที่ออกแบบมาเพื่อทำงานร่วมกับ WordPress หลักได้อย่างราบรื่น ทำให้การสร้างเนื้อหาง่ายขึ้นและชาญฉลาดกว่าเดิม

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

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

WordPress Gutenberg Editor – ทำไมคุณควรเปลี่ยน

Gutenberg WordPress

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

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

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

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

ไม่ต้องพูดถึง ตัวแก้ไข Gutenberg กำลังกำหนดอนาคตของ WordPress ที่เดาได้ง่าย ๆ จากคำพูดของ Matt Mullenweg ผู้ร่วมก่อตั้ง WordPress ใน 2019 WordPress Camp US

หมายเหตุ: หากคุณเป็นผู้ใช้ Gutenberg ใหม่ โปรดอ่านคู่มือสำหรับผู้เริ่มต้นใช้งานนี้เพื่อให้เข้าใจง่าย

15- เคล็ดลับ & เทคนิค WordPress Gutenberg ที่มีประสิทธิภาพ

WordPress Gutenberg Tips & Tricks
1. แป้นพิมพ์ลัดอย่างง่าย
2. โหมดการเขียนที่แตกต่างกัน
3. คัดลอก/วางจากทุกที่ (Google Docs, Microsoft ฯลฯ)
4. สลับระหว่าง Visual Editor และ Code Editor
5. Gutenberg สรุปเอกสารของคุณ
6. คัดลอกเนื้อหาทั้งหมดด้วยการคลิก
7. การวางลิงก์จะฝังโดยอัตโนมัติ
8. สร้างหลายคอลัมน์
9. เชื่อมโยงไปยังโพสต์อื่นๆ ของคุณได้อย่างง่ายดาย
10. ใช้ Slash (/) เพื่อเพิ่ม Block ใหม่
11. ใช้การลากและวางเพื่อจัดเรียงบล็อกใหม่
12. เพิ่มรูปภาพโดยลากจากเดสก์ท็อปของคุณ
13. การตัดข้อความรอบๆ รูปภาพ
14. เปลี่ยนบล็อกเป็นบล็อกต่างๆ
15. สร้างบล็อกที่นำกลับมาใช้ใหม่เพื่อใช้ในภายหลัง

แป้นพิมพ์ลัดอย่างง่าย

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

คุณจะพบเมนูทางลัดโดยคลิกที่จุดไข่ปลาที่มุมขวา หรือกด Shift + Alt + H เพื่อดูรายการแป้นพิมพ์ลัดทั้งหมด นี่คือทางลัดบางส่วนที่ระบุไว้ด้านล่าง:

Gutenberg WordPress

นอกจากนี้ ตรวจสอบทางลัดเหล่านี้ด้วย

  • Ctrl + Alt Backspace ลบบล็อกที่เลือก
  • หากต้องการแทรกบล็อกใหม่ก่อนบล็อกที่เลือก - Control + Alt + T
  • หากต้องการแทรกบล็อกใหม่หลังบล็อกที่เลือก - Ctrl + Alt + Y
  • แสดงวิธีใช้ – shift + Alt + H
  • บันทึกการเปลี่ยนแปลงของคุณ – Ctrl + S
  • เลิกทำการเปลี่ยนแปลงล่าสุดของคุณ – Ctrl + Z
  • ทำซ้ำการเลิกทำล่าสุดของคุณ - Ctrl + Shift + Z
  • แสดงหรือซ่อนแถบด้านข้างการตั้งค่า Ctrl + Shift +
  • ไปที่ส่วนถัดไปของตัวแก้ไข Ctrl + '
  • ไปที่ส่วนก่อนหน้าของตัวแก้ไข Ctrl + Shift + '
  • ไปที่ส่วนถัดไปของตัวแก้ไข (ทางเลือก) Shift + Alt + N
  • นำทางไปยังส่วนก่อนหน้าของตัวแก้ไข ตาราง (ทางเลือก) Shift + Alt + P

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

โหมดการเขียนที่แตกต่างกัน

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

  • แถบเครื่องมือยอดนิยม
  • โหมดสปอตไลท์
  • โหมดเต็มหน้าจอ

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

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

Gutenberg WordPress

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

Gutenberg editor Spotlight mode

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

Gutenberg WordPress-fullscreen mode

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

คัดลอก/วางจากทุกที่ (Google Docs, Microsoft ฯลฯ)

ด้วยตัวแก้ไขแบบคลาสสิก คุณอาจประสบปัญหาในการคัดลอกเนื้อหาจาก Google เอกสารหรือ Microsoft Word ในกรณีนั้น คุณต้องคัดลอกเนื้อหาก่อนแล้วจึงอัปโหลดรูปภาพ แต่บรรณาธิการของ Gutenberg สามารถแก้ไขปัญหานี้ได้

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

เพียงคัดลอกเนื้อหาจาก Google doc แล้ววางลงในโปรแกรมแก้ไขใหม่ของ WordPress โดยตรง มันจะแยกหัวเรื่องและย่อหน้าทั้งหมดออกเป็นบล็อคโดยอัตโนมัติ ใช่ มันง่ายอย่างที่คิด!

สลับระหว่าง Visual Editor และ Code Editor

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

Gutenberg WordPress

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

Gutenberg สรุปเอกสารของคุณ

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

gutenberg editor

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

คัดลอกเนื้อหาทั้งหมดด้วยการคลิก

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

copy-content

หรือคุณสามารถใช้ปุ่มลัด Ctrl+A เพื่อเลือกเนื้อหาทั้งหมด และกด Ctrl+C เพื่อคัดลอก

การวางลิงก์จะฝังโดยอัตโนมัติ

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

เชื่อมโยงไปยังโพสต์อื่นๆ ของคุณได้อย่างง่ายดาย

anchor links in wordpress

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

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

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

ใช้ Slash (/) เพื่อเพิ่ม Block ใหม่

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

ใช้การลากและวางเพื่อจัดเรียงบล็อกใหม่

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

Rearrange the Blocks

เพิ่มรูปภาพโดยลากจากเดสก์ท็อปของคุณ

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

Gutenberg Editor Drag and Drop feature

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

การตัดข้อความรอบๆ รูปภาพ

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

Wrapping Text Around Images

เปลี่ยนบล็อกเป็นบล็อกต่างๆ

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

สร้างบล็อกที่นำกลับมาใช้ใหม่เพื่อใช้ในภายหลัง

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

Gutenberg Reusable block

จะช่วยประหยัดเวลาและพลังงานของคุณทั้งคู่

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

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

บางที คุณสามารถตรวจสอบการอัปเดตใหม่ของ WordPress Block Editor ได้

รับ HappyAddons เพื่อสำรวจตัวเลือก Gutenberg เพิ่มเติม

Happy Addons

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

HappyAddons มีวิดเจ็ตมากกว่า 50+ รายการและคุณสมบัติพิเศษกว่า 15+ รายการเพื่อยกระดับเว็บไซต์ของคุณไปอีกระดับ เมื่อนั้นเป็นไปได้สำหรับมืออาชีพเท่านั้น ตอนนี้ HappyAddons ทำให้เป็นไปได้สำหรับมือใหม่ทุกคน นักพัฒนาเว็บยังใช้ส่วนเสริม Elementor นี้เพื่อให้การส่งมอบเร็วขึ้นกว่าที่เคย

ให้ฉันตรวจสอบส่วนเสริมของ Happy Elementor!

ใช้ WordPress Gutenberg เพื่อประหยัดเวลาในบล็อกของคุณ

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

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

คุณเริ่มใช้ WordPress Gutenberg สำหรับเว็บไซต์ของคุณแล้วหรือยัง? คุณกำลังประสบปัญหาใด ๆ ? โปรดแบ่งปันความคิดและประสบการณ์ของคุณกับเราในส่วนความคิดเห็นด้านล่าง!