ใช้ Gutenburg อย่างไรไม่ให้ผู้ใช้ทำเว็บพัง ด้วย Overrides Pattern

|
3 นาที ในการอ่าน

ปัจจุบัน Gutenberg ได้พัฒนาไปไกลจนสามารถรองรับ Full Site Editing (FSE) ได้อย่างสมบูรณ์ ผู้ใช้งานสามารถแก้ไขส่วนต่าง ๆ ของเว็บไซต์ได้ตั้งแต่ Header, Footer ไปจนถึงส่วนประกอบอื่น ๆ บนหน้าเว็บ โดยไม่ต้องพึ่งธีมหรือโค้ดเพิ่มเติมมากนัก นอกจากนี้ บล็อกต่าง ๆ ยังมีคุณสมบัติปรับแต่งที่หลากหลาย ช่วยให้การออกแบบยืดหยุ่น

อย่างไรก็ตาม ปัญหาที่พบได้บ่อยสำหรับนักพัฒนาและผู้ใช้คือความผิดพลาดที่เกิดจากการแก้ไขหรือปรับแต่งแบบไม่ตั้งใจ (เช่น การเปลี่ยน Component หรือ Layout โดยไม่ระวัง) ซึ่งอาจทำให้การจัดวางโครงสร้างเว็บไซต์เสียหายหรือ “พัง” ได้

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

Pattern คืออะไร ?

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

วิธีสร้าง Pattern
ขั้นตอนสร้าง Pattern

Sync Pattern คืออะไร ?

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

แต่ในบางครั้งเราต้องการใช้ Pattern โครงสร้างเดิม แต่ต้องการแก้ไขข้อมูลข้างในเฉพาะบางส่วนโดยไม่อยากให้ไปกระทบตัวอื่นๆ ที่ใช้ร่วมกันด้วย WordPress จึงออกความสามารถที่เรียกว่า Overrides Pattern ขึ้นมา

Overrides Pattern คืออะไร ใช้ยังไง ?

คือฟีเจอร์ที่ช่วยให้เราปรับแต่ง ข้อมูลด้านใน Pattern โดยไม่ให้กระทบโครงสร้าง ( Layout ) เดิมที่ทำเอาไว้ โดยเราสามารถ เข้าไปยัง Pattern ผ่าน Apperance > Editor > Patterns หรือจะคลิกจาก Pattern ในหน้านั้นๆ โดยตรง โดยเลือก Edit Original ก็สามารถเข้าถึง Pattern นั้นๆได้

คลิกที่ Pattern เพื่อแก้ไข Original
แก้ไขผ่านทาง Appearance

การใช้งาน Overrides Pattern ให้คลิกเลือก Block ที่เราต้องการ Overrides และทำการเปิดให้แก้ไขข้อมูลที่ปุ่ม “Enable overrides” จากนั้นตั้งชื่อ แล้วก็ทำการกดปุ่ม “Save”

เปิดทำงาน overrides
ตั้งชื่อสำหรับ overrides
รายชื่อบล็อคที่เราได้ทำการ overrides

โดยในตัวอย่างจะให้แก้ ชื่อหัวข้อ, รายละเอียด และปุ่มเท่านั้น สังเกตที่ด้านขวาเมื่อเราคลิกที่ Pattern จะแสดงช่องฟิลด์ที่เราทำการแก้ไขได้ โดยให้เราคลิกไปยัง Block ที่เราต้องการแก้ไขข้อมูล จะสังเกตได้ว่าเราสามารถแก้ไข ข้อมูลของตัวนั้นเท่านั้น แต่จะไม่สามารถยุ่งกับโครงสร้างอื่นๆ หรือการขยับ ปรับย้ายที่ ที่เราไม่ได้ทำการ Overrides ไว้ ทำให้เป็นการกำหนดขอบเขต ในการแก้ไขให้ผู้ใช้ได้เป็นอย่างดี

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

Designil PDPA Banner Thai Woo AIO Banner
แชร์:
line

author - aum watcharapon
อั้ม วัชรพล
👨🏻‍💻 ผู้เชี่ยวชาญทางด้าน WordPress

Subscribe to newsletter

doaction จะส่งเพื่อแจ้งเตือนเมื่อมีบทความใหม่ๆ ในเว็บไซต์และสามารถกดยกเลิกได้ตลอดเวลา

บทความอื่นๆ

ทำไม Meta Box ถึงเป็นปลั๊กอินจัดการฟิลด์ที่น่าใช้ใน WordPress

เมื่อไม่นานมานี้ วงการ WordPress ได้รับผลกระทบจากการขัดแย้งครั้งใหญ่ระหว่าง WordPress และ WP Engine ที่ทำให้หลายๆ คนตกใจและสงสัยในเส้นทางของทั้งสองยักษ์ใหญ่ โดยความขัดแย้งนี้ไม่เพียงแค่ส่งผลกระทบต่อการให้บริการโฮสต์ของ WP Engine เท่านั้น แต่ยังขยายไปถึงการปิดกั้นปลั๊กอิน ACF ที่เกี่ยวข้องและการแบนจาก Directory ของ WordPress.org ซึ่งหมายความว่าผู้ใช้งานที่อยู่ในระบบของ WP Engine อาจไม่สามารถเข้าถึงการอัพเดทหรือการสนับสนุนจาก WordPress ได้อีกต่อไป หนึ่งในตัวเลือกที่น่าสนใจคือปลั๊กอิน Meta Box ซึ่งทำหน้าที่จัดการฟิลด์ได้อย่างยืดหยุ่นและมีประสิทธิภาพ ในบทความนี้ เราจะพาคุณไปรู้จักกับ Meta Box ว่ามีฟีเจอร์อะไรบ้างที่น่าลอง และทำไมมันถึงกลายเป็นปลั๊กอินยอดนิยมที่ถูกกล่าวถึงในช่วงนี้ ข้อแตกต่างระหว่าง ACF vs META BOX ปลั๊กอิน ACF (Advanced Custom Fields) เวอร์ชันโปรจะมาพร้อมกับความสามารถพื้นฐานที่หลากหลาย เช่น การจัดการ Options Page, ฟิลด์, และ Post Type […]

อ่านต่อ

หากมีคำถาม หรือต้องการคำปรึกษาเกี่ยวกับ WordPress

สำนักงาน

  • บริษัท ดู แอคชั่น จำกัด
    66 ซอยเพชรเกษม 98/1, ถนนเพชรเกษม,
    แขวงบางแคเหนือ, เขตบางแค
    กรุงเทพมหานคร
    10160
ไอคอน PDPA

เว็บไซต์ของเราใช้คุกกี้เพื่อเสริมประสบการณ์การใช้งานของคุณ

ตั้งค่าความเป็นส่วนตัว

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

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • เปิดใช้งานตลอด

บันทึกการตั้งค่า