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


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