Gutenberg overlap metabox

วิธีแก้ปัญหา Gutenberg ซ้อนทับ Metabox

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

ภาพเหตุการณ์ที่เกิดขึ้นเมื่อเช้านี้ เป็นทั้งหมด 3 เว็บไซต์ ไม่เข้าใจเหมือนกันว่าเพราะอะไร

Gutenberg overlap
Gutenberg overlap

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

Blocks overlap meta boxes on posts #11378

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

ให้นำโค้ดนี้ ไปวางไว้ในไฟล์ functions.php ผลที่ได้ก็จะทำให้เว็บของเรากลับมาเป็นเหมือนเดิมตามรูปด้านล่าง

Gutenberg not overlap
Gutenberg not overlap

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

สอน WordPress หรือ WooCommerce
สอน WordPress หรือ WooCommerce

บทความนี้มีประโยชน์สำหรับคุณหรือไม่?

ให้คะแนนบทความนี้

คะแนนเฉลี่ย / 5. จำนวนโหวต:

As you found this post useful...

Follow us on social media!

นายปิ๊ก


ผู้ก่อตั้งเว็บไซต์ Themevilles.com เป็นอาจารย์สอน WordPress และ WooCommerce ในเว็บคอร์สออนไลน์ Skilllane และรับทำเว็บไซต์ ทำการตลาดออนไลน์ เช่น SEO, Facebook และ LINE

Leave a Reply


Shares
สมัครสมาชิกเพื่อรับข้อมูลข่าวสาร
Get the latest content first.
Read about Privacy Policy.