วิธีแก้ WordPress แสดงผลไม่เหมือนหน้าแก้ไข

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

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

❶ ตรวจว่าการแก้ไขถูกเผยแพร่แล้ว

เข้าแอดมินและเปิดหน้าที่แก้ไข ตรวจว่ากด อัปเดต หรือ เผยแพร่ สำเร็จแล้ว หากยังเป็นฉบับร่างหรือดูตัวอย่างจากฉบับที่ยังไม่เผยแพร่ ผู้เข้าชมจะเห็นเนื้อหาเดิม

เปิด URL จริงในหน้าต่างไม่ระบุตัวตน แล้วเปรียบเทียบกับหน้าแก้ไข หากมีหลายฉบับหรือหลายหน้า ตรวจให้แน่ใจว่ากำลังแก้หน้าเดียวกับที่ผู้เข้าชมเปิดอยู่

❷ ล้างแคชของเว็บไซต์และเบราว์เซอร์

แคชอาจทำให้หน้าเว็บแสดงเนื้อหา รูปแบบ หรือไฟล์ CSS เวอร์ชันเก่า ล้างแคชจากเบราว์เซอร์ ปลั๊กอินแคช โฮสติ้ง และ CDN ที่ใช้งาน แล้วเปิดหน้าเดิมอีกครั้ง

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

❸ ตรวจแม่แบบและรูปแบบของธีม

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

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

❹ ตรวจการแสดงผลบนมือถือและคอมพิวเตอร์

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

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

❺ ตรวจ CSS และปลั๊กอินที่เปลี่ยนรูปแบบหน้าเว็บ

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

หากไม่แน่ใจว่ากฎใดทำให้เกิดความต่าง ให้เก็บสำเนาการตั้งค่าเดิมไว้และขอให้ผู้ดูแลเว็บไซต์ช่วยตรวจสอบก่อนลบหรือเปลี่ยน CSS

❻ ตรวจรูปภาพ ฟอนต์ และไฟล์ที่หน้าเว็บเรียกใช้

หากภาพหรือฟอนต์แสดงไม่เหมือนในตัวแก้ไข ให้ตรวจว่าไฟล์ยังอยู่และ URL เปิดได้จากหน้าเว็บไซต์จริงหรือไม่ หากเพิ่งย้ายโฮสต์หรือเปลี่ยนโดเมน แหล่งไฟล์อาจยังชี้ไปยังที่อยู่เดิม

ตรวจด้วยว่า CDN หรือปลั๊กอินเพิ่มประสิทธิภาพไม่ได้แสดงไฟล์เวอร์ชันเก่า ComSiam แนะนำให้ล้างแคชหลังเปลี่ยนรูปภาพ ฟอนต์ หรือไฟล์รูปแบบทุกครั้ง

❼ ทดสอบหน้าเว็บหลังแก้ไข

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

สรุป

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