CSS ไม่อัปเดตในเบราว์เซอร์เมื่อฉันเปลี่ยน


14

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


คุณมีปลั๊กอินสำหรับแคชทำงานอยู่หรือไม่? ไฟล์ CSS ของคุณอาจถูกแคชบนเซิร์ฟเวอร์
Pat J

มันไม่ปรากฏว่าฉันมีปลั๊กอินแคช
David Tunnell

มันใช้งานได้ถ้าคุณไม่ได้ใช้ WordPress? ตัวอย่างเช่นไฟล์ชื่อtest.htmlและ.cssไฟล์ที่เกี่ยวข้อง?
Pat J

หากคำตอบอย่างใดอย่างหนึ่งช่วยให้คุณแก้ปัญหาได้โปรดตรวจสอบเพื่อยอมรับ
mrwweb

คำตอบ:


14

เพิ่มหมายเลขรุ่นสุ่มที่ท้ายไฟล์ css ที่คุณแนบ หากคุณกำลังใช้ฟังก์ชั่น' wp_enqueue_style ' หรือwp_register_styleให้ส่งหมายเลขสุ่ม (เวอร์ชั่น) rand(111,9999)ไปที่พารามิเตอร์ที่ 4 หากคุณกำลังแนบ css เป็นแท็ก html คุณควรเพิ่ม " ?ver=<?php echo rand(111,999)?>" ที่ท้ายชื่อไฟล์ ตัวอย่างอยู่ที่นี่

wp_register_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css', array(), rand(111,9999), 'all' );

หรือ

<link rel="stylesheet" type="text/css" href="http://website.com/css/custom-style.css?ver=<?php echo rand(111,999)?>">

มันจะหลีกเลี่ยงการแคชกับการแคชปลายทางของไคลเอ็นต์และอาจจะเป็นการแคชเซิร์ฟเวอร์ด้วย


7

ฉันรู้ว่าโพสต์นี้มีอายุมากกว่าหนึ่งปี แต่ฉันคิดว่าฉันจะพูดถึงว่า CloudFlare เก็บไฟล์คงที่เช่น css, js และรูปภาพเพื่อช่วยในการโหลดได้เร็วขึ้น บางสิ่งที่ฉันเพิ่งจะใช้เวลาหลายชั่วโมงในการคิดออกเนื่องจากฉันมีปัญหากับการเปลี่ยนแปลง CSS ของฉันซึ่งไม่ได้สะท้อนถึงการโหลดซ้ำ CloudFlare มีโหมดการพัฒนาที่คุณสามารถเปิดใช้งานเป็นเวลา 3 ชั่วโมง หากคุณลืมเปิดใช้งานก่อนที่จะทำการแก้ไขคุณสามารถล้างแคชจากการจัดการคลาวด์


1
CloudFlare คิดว่าถ้ามี?ver=ไฟล์แล้วไม่สามารถอัปเดตได้
hlcs

คุณกำลังบอกว่าทุกครั้งที่ฉันเปลี่ยนแปลง CSS, javascript ฉันต้องกำจัดแคชของ Cloudfare หรือไม่ โหมดการพัฒนานี้ทำอะไรได้จริง? ขอบคุณ
Tanvir

0

เป็นไปได้ว่าโฮสต์ของคุณใช้สิ่งที่คล้ายกับวานิชเพื่อแคชเอาต์พุตของไซต์ของคุณ ฉันพบสิ่งนี้กับไซต์ของลูกค้าที่โฮสต์ด้วยบัญชีโฮสติ้งที่ลดอัตรา วิธีแก้ปัญหาเดียวที่ฉันพบคืออดทน


0

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


0

เพียงต้องการชี้ให้เห็นว่าต้องคำนึงถึงปลั๊กอินแคชที่คุณติดตั้งไว้ด้วย ตัวอย่างเช่นWP Fastest Cacheสามารถสร้างปัญหานี้ได้หากคุณจำไม่ได้ว่าจะต้องล็อกอินเข้าสู่แดชบอร์ด WP และคลิกที่ "Clear Cache -> Delete Cache และ Minified CSS / JS" ขึ้นในเมนู nav


0

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

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.