CSS không cập nhật trong trình duyệt khi tôi thay đổi


14

Tôi đang làm việc trên CSS của trang wordpress của tôi. Khi tôi thực hiện thay đổi và làm mới trang, những thay đổi không được phản ánh. Khi tôi xóa lịch sử trình duyệt và bộ đệm, các thay đổi vẫn được phản ánh. Khi tôi xem mã nguồn của trang và xem tệp css, nó có nội dung cũ trước khi thay đổi. Làm thế nào để tôi có được điều này để cập nhật để tôi có thể phát triển?


Bạn có một plugin bộ nhớ đệm đang chạy? Các tệp CSS của bạn có thể được lưu trữ trên máy chủ.
Pat J

Nó không xuất hiện Tôi có một plugin bộ nhớ đệm.
David Tunnell

Nó có hoạt động nếu bạn không sử dụng WordPress? Ví dụ, một tệp được gọi test.htmlvà một .csstệp liên quan ?
Pat J

Nếu một trong những câu trả lời giúp bạn giải quyết vấn đề, vui lòng đảm bảo chấp nhận nó!
mrwweb

Câu trả lời:


14

Thêm số phiên bản ngẫu nhiên vào cuối tệp css bạn đang đính kèm. Nếu bạn đang sử dụng các hàm ' wp_enqueue_style ' hoặc wp_register_style , hãy chuyển một số (phiên bản) ngẫu nhiên rand(111,9999)cho tham số thứ 4. Nếu bạn đang đính kèm css dưới dạng thẻ html, bạn nên thêm " ?ver=<?php echo rand(111,999)?>" vào cuối tên tệp. Ví dụ ở đây

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

hoặc là

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

Nó sẽ tránh bộ nhớ đệm trên bộ đệm cuối máy khách và có thể cả bộ nhớ đệm máy chủ nữa.


7

Tôi biết bài đăng này đã hơn một năm tuổi nhưng tôi nghĩ rằng tôi sẽ đề cập rằng CloudFlare lưu trữ các tệp tĩnh như css, js và hình ảnh để hỗ trợ thời gian tải nhanh hơn. Một cái gì đó tôi chỉ mất vài giờ để tìm ra, vì tôi gặp vấn đề với các thay đổi css của tôi không phản ánh về việc tải lại. CloudFlare có chế độ Phát triển mà bạn có thể kích hoạt trong 3 giờ. Nếu bạn quên bật nó trước khi bắt đầu thực hiện sửa đổi thì bạn có thể lọc bộ nhớ cache khỏi quản lý đám mây.


1
CloudFlare nghĩ rằng nếu có ?ver=thì tệp không thể được cập nhật.
hlcs

Bạn có nói rằng mỗi khi tôi thay đổi CSS, javascript, tôi cần phải xóa bộ đệm Cloudfare không? Chế độ phát triển này thực sự làm gì? Thnx
Tanvir

0

Có thể máy chủ của bạn đang sử dụng một cái gì đó như Varnish để lưu trữ đầu ra trang web của bạn. Tôi gặp phải vấn đề này với trang web của khách hàng được lưu trữ trên tài khoản lưu trữ chia sẻ tỷ lệ cắt giảm. Biện pháp duy nhất tôi tìm thấy là chỉ cần kiên nhẫn.


0

Nếu bạn đang sử dụng một chủ đề con, có thể bạn cần phải ghi lại biểu định kiểu chủ đề con để xem các thay đổi ngay lập tức. Điều này đã giải quyết vấn đề của tôi.


0

Chỉ muốn chỉ ra - hãy chắc chắn chú ý đến bất kỳ plugin lưu đệm nào mà bạn đã cài đặt. Ví dụ, WP Fastest Cache có thể tạo ra sự cố này nếu bạn không nhớ đăng nhập vào bảng điều khiển WP và nhấp vào "Xóa bộ nhớ cache -> Xóa bộ nhớ cache và CSS / JS đã thu nhỏ" trong menu điều hướng.


0

Điều này có thể cũ. Nhưng tôi cần hỗ trợ một người có thể tìm kiếm sự giúp đỡ. Tôi đã có cùng một vấn đề và tôi đã kiểm tra các plugin của mình. Có plugin "w3 Total cache" giúp tăng tốc độ tải. Đó là plugin bộ nhớ cache phía máy chủ nên tôi đã tắt nó. Các thay đổi css được hiển thị lại thời gian thực. Có rất nhiều plugin tăng cường tải. Vì vậy, hãy kiểm tra danh sách plugin của bạn và vô hiệu hóa chúng cho đến khi bạn hoàn thành việc phát triển.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.