Các thay đổi WordPress CSS không hiển thị

Tiết lộ. Bài đăng này có thể chứa các liên kết liên kết. Mua sản phẩm thông qua một trong các liên kết này sẽ tạo ra hoa hồng cho chúng tôi mà bạn không phải trả thêm phí

Bạn có thể tùy chỉnh trang web của mình

Bạn có thể lưu các thay đổi của mình

Nhưng khi bạn truy cập trang web của mình, các thay đổi sẽ không hiển thị

Đưa cái gì?

Đây là một vấn đề rất phổ biến và hầu như luôn luôn là do bộ nhớ đệm

Đây là cách khắc phục

Mục lục

Cách buộc cập nhật thiết kế để hiển thị

Như tôi đã đề cập trong phần giới thiệu, vấn đề xoay quanh bộ nhớ đệm

Có tới bốn cấp bộ nhớ đệm khác nhau cần được giải quyết, vì vậy, bây giờ chúng ta hãy xem qua các bước

Xóa bộ nhớ cache của trình duyệt của bạn

Nếu bạn không thể thấy những thay đổi mà bạn đang thực hiện thì vấn đề có thể là do bộ nhớ đệm của trình duyệt

Để kiểm tra giả định này, hãy truy cập trang web của bạn và thực hiện thao tác làm mới cứng, thao tác này sẽ buộc trình duyệt tải một bản sao chưa được lưu trong bộ nhớ cache của trang

  • Nếu bạn đang sử dụng máy tính Windows, hãy nhấn ctrl+F5
  • Đối với máy Mac sử dụng Chrome hoặc Firefox, nhấn cmd+shift+r
  • Đối với người dùng Safari, nhấn tùy chọn + cmd + e

Nếu điều này hoạt động thì điều đó có nghĩa là một bản sao cũ hơn của trang đã được lưu trong bộ nhớ cache trong trình duyệt của bạn và trang web của bạn sẽ hiển thị như mong đợi ngay bây giờ

Xóa bộ nhớ cache của trang web của bạn bằng plugin

Nếu bạn không sử dụng bất kỳ plugin lưu trữ nào, bạn có thể bỏ qua bước này

Các plugin bộ nhớ đệm hầu như luôn là nguồn gốc của vấn đề này

Một dấu hiệu rõ ràng cho thấy lỗi của plugin bộ nhớ đệm là khi bạn có thể thấy các thay đổi của mình khi đăng nhập nhưng không thấy khi đăng xuất

Nếu bạn có một plugin như WP Super Cache, WP Rocket, W3 Total Cache hoặc bất kỳ plugin tạo bộ đệm nào khác, thì hãy sử dụng tùy chọn tích hợp sẵn của nó để làm trống bộ đệm

Cần có một nút duy nhất mà bạn có thể nhấp để xóa bộ đệm, như nút này trong WP Super Cache

Các thay đổi WordPress CSS không hiển thị

Sau khi bạn xóa bộ nhớ cache, một cách nhanh chóng để xem nó có hoạt động hay không là mở tab trình duyệt riêng tư và truy cập trang web của bạn. Điều này nhanh hơn đăng nhập và đăng xuất. Nếu bạn có thể thấy các thay đổi thiết kế của mình trong cửa sổ trình duyệt riêng tư thì vấn đề đã được giải quyết

Nếu bạn đăng xuất khỏi trang web của mình mà vẫn không thấy các thay đổi của mình, hãy thử xóa lại bộ nhớ cache của trình duyệt bằng các phím tắt được liệt kê ở trên

Nếu bạn vẫn chưa đạt được bất kỳ tiến triển nào, điều này có nghĩa là bạn có thể đang xem các tệp được lưu trong bộ nhớ cache từ CDN của mình

Xóa bộ đệm CDN

Nếu bạn không sử dụng CDN, bạn có thể bỏ qua bước này

Nếu bạn sử dụng CDN như MaxCDN hoặc Cloudflare, có thể bộ nhớ cache của trình duyệt và trang web của bạn đã bị xóa, nhưng bộ nhớ cache CDN vẫn đang phục vụ một bản sao lỗi thời của trang web

Bạn nên có một tùy chọn đơn giản ở đâu đó trong bảng điều khiển quản trị CDN của mình, nơi bạn có thể xóa bộ đệm. Ví dụ: Cloudflare có các nút này để xóa bộ đệm

Các thay đổi WordPress CSS không hiển thị

Để tính năng này hoạt động, bạn có thể cần xóa bộ đệm CDN của mình, sau đó xóa bộ đệm của trang web bằng plugin, sau đó xóa bộ đệm của trình duyệt, theo thứ tự đó

Nếu bạn thử cách này mà vẫn không thấy các thay đổi của mình, hãy thử bước cuối cùng này

Kiểm tra máy chủ của bạn để biết các tùy chọn bộ đệm

Rất nhiều công ty lưu trữ ngày nay bao gồm các tùy chọn bộ nhớ đệm của riêng họ. Có thể bạn đã đăng ký mà không biết về điều này và đó là lý do tại sao bạn không thể tìm thấy nguồn của bộ nhớ đệm

Có rất nhiều công ty lưu trữ, vì vậy tôi không thể cung cấp vị trí chính xác cho tùy chọn này, nhưng bạn nên đăng nhập vào tài khoản lưu trữ của mình và quét nhanh để tìm bất kỳ tùy chọn lưu trữ nào

Một số máy chủ, như Kinsta, sẽ đặt tùy chọn xóa bộ nhớ cache ngay trong bảng điều khiển quản trị viên WP

Các thay đổi WordPress CSS không hiển thị

Tôi biết rằng Bluehost cũng có tính năng lưu vào bộ đệm và bạn có thể xóa bộ đệm bằng tùy chọn này trên thanh công cụ quản trị

Các thay đổi WordPress CSS không hiển thị

Có hàng trăm máy chủ lưu trữ web dành cho WordPress, vì vậy tôi không thể cung cấp ảnh chụp màn hình cho tất cả chúng, nhưng hãy kiểm tra với công ty lưu trữ của bạn để xem liệu họ có tính năng lưu vào bộ nhớ đệm ngăn các bản cập nhật mới của bạn hiển thị không

Xem lại các bước

Để tóm tắt các bước, đây là những gì bạn có thể làm để thay đổi hiển thị trên trang web WordPress của mình

  1. Xóa bộ nhớ cache của CDN của bạn
  2. Làm trống bộ nhớ cache của trang web của bạn bằng tính năng bộ nhớ đệm của máy chủ lưu trữ của bạn
  3. Làm trống bộ nhớ cache của trang web bằng plugin bộ nhớ đệm của bạn
  4. Xóa bộ nhớ cache của trình duyệt của bạn

Chạy qua các bước này theo thứ tự này sẽ hoạt động mỗi khi bạn cần nhận bản cập nhật thiết kế để hiển thị trên giao diện người dùng của trang web của mình

Tại sao điều này thậm chí xảy ra?

Tôi đã bỏ qua phần giải thích về cơ chế cơ bản của vấn đề này để bạn có thể tìm ra giải pháp ngay lập tức, nhưng nếu bạn không muốn lặp lại sai lầm tương tự, thì đây là một số thông tin khác

Điểm của bộ nhớ đệm là gì?

Các trang web sử dụng bộ nhớ đệm vì nó cải thiện đáng kể thời gian tải. Nói một cách đơn giản, bộ nhớ đệm lưu một bản sao trang web của bạn và gửi bản sao đó cho khách truy cập

Ví dụ: tôi có thể hỏi bạn “59×59 là gì” và bạn sẽ phải sử dụng máy tính để đưa ra câu trả lời. Bạn sẽ chạy một quy trình để tìm câu trả lời là 3,481. Nếu tôi hỏi bạn câu hỏi tương tự ngay sau đó, bạn có thể cho tôi biết ngay câu trả lời là 3,481 mà không cần chạy lại quy trình tính toán vì bạn đã lưu số đó vào bộ nhớ của mình

Bộ nhớ đệm sử dụng một bản sao đã lưu của trang web của bạn để nó không phải chạy quy trình ban đầu cần thiết để tạo trang web mỗi khi ai đó truy cập. Điều đó giống như sử dụng máy tính để giải đi giải lại cùng một phương trình thay vì lập tức lập lại nó từ bộ nhớ

Tương tự như vậy, khi bạn tùy chỉnh trang web của mình, nó giống như thay đổi phép tính sang một thứ khác, chẳng hạn như 33×59. Bộ đệm tiếp tục sử dụng câu trả lời đã lưu là 3,481 thay vì câu trả lời mới. Tất cả những gì bạn phải làm là làm trống bộ đệm và nó sẽ chạy quy trình từ đầu, nhận câu trả lời đúng, sau đó lưu (bộ đệm) câu trả lời mới đó

Bộ nhớ đệm cực kỳ khó chịu khi bạn không hiểu khái niệm cơ bản này, nhưng nó hoạt động rất đáng tin cậy khi hiểu điều này

Tại sao nó chỉ ảnh hưởng đến tôi?

Nếu bạn có thể thấy những thay đổi mới của mình nhưng khách truy cập của bạn thì không thể, đó là do bạn đã đăng nhập. Các plugin bộ đệm hầu như không bao giờ tải phiên bản được lưu trong bộ nhớ cache của trang web cho người dùng WordPress đã đăng nhập

Phiên bản được lưu trong bộ nhớ cache của trang web của bạn không được tải cho bạn với tư cách là quản trị viên để bạn có thể xem mọi thứ được cập nhật mọi lúc. Nếu không, nó có thể cực kỳ khó hiểu và có vấn đề, đặc biệt là bên trong bảng điều khiển. Tất nhiên, điều này gây ra các vấn đề khác như vấn đề đưa bạn đến bài viết này ngày hôm nay

Tôi có phải xóa bộ nhớ đệm sau mỗi thay đổi tôi thực hiện không?

Không chính xác. Nó phụ thuộc vào những gì bạn đã thay đổi

Nói chung, bất cứ điều gì bạn thay đổi trong trình chỉnh sửa bài đăng sẽ không thành vấn đề. Ví dụ: nếu bạn cập nhật một bài đăng với một số văn bản và hình ảnh mới, bạn sẽ không cần xóa bộ nhớ đệm để những chỉnh sửa đó xuất hiện

Điều này đúng vì hầu hết các plugin bộ nhớ đệm đều hiểu cách thức hoạt động của WordPress. Khi bạn cập nhật một bài đăng, plugin sẽ xóa bộ nhớ cache cho bài đăng đó để các bản cập nhật có thể xuất hiện

Mặt khác, khi bạn thực hiện các thay đổi thông qua Live Customizer, bạn có thể sẽ cần xóa bộ nhớ cache của mình

Ngoài ra, nếu bạn thêm hoặc xóa bất kỳ plugin nào khỏi trang web của mình hoặc thay đổi chủ đề, bạn cũng sẽ cần xóa bộ nhớ cache để hiển thị các cập nhật này

Ngăn chặn các vấn đề và phiền toái khác

Bài viết này đã dài hơn tôi dự định, vì vậy hãy để tôi kết thúc với một suy nghĩ chia tay

Bây giờ bạn đã hiểu cách thức hoạt động của bộ nhớ đệm và lý do tại sao các trang web sử dụng bộ nhớ đệm ngay từ đầu, bạn sẽ không gặp phải vấn đề này trong tương lai

Nhưng lỗi tiếp theo thì sao?

Tôi tập hợp một hướng dẫn rất chi tiết để giải quyết vấn đề chính xác này

11 cách để ngăn chặn lỗi trên trang web WordPress của bạn

Trong bài đăng đó, bạn sẽ tìm thấy 11 bước bạn có thể thực hiện để tránh các vấn đề khó hiểu và tốn thời gian trên trang web của mình. Đặc biệt, hai bước đầu tiên có thể tạo ra sự khác biệt lớn về độ tin cậy của trang web của bạn

Tôi hy vọng hướng dẫn này đã giúp bạn đưa trang web của mình trực tuyến trở lại và đảm bảo chia sẻ bài đăng này nếu bạn nghĩ rằng nó có thể giúp ích cho người khác

Tại sao những thay đổi của tôi đối với CSS không hiển thị trong WordPress?

Hầu hết thời gian, các vấn đề liên quan đến các thay đổi WordPress không hiển thị trên trang web của bạn đều liên quan đến các vấn đề về bộ nhớ đệm (bộ nhớ đệm của trình duyệt, bộ nhớ đệm trang hoặc bộ nhớ đệm CDN). Cách khắc phục là xóa bộ nhớ cache gây ra những sự cố này, đảm bảo cả bạn và khách truy cập đều thấy phiên bản mới nhất của trang web của bạn.

Tại sao các thay đổi trang web của tôi không hiển thị?

Đôi khi chỉ cần làm mới một lần là đủ để đặt lại các thay đổi của bạn và đối với hầu hết các trình duyệt, bạn có thể sử dụng phím tắt để thử — nhấn Control + R hoặc Command + R trong khi xem . Nếu quá trình làm mới không hoạt động, bạn sẽ muốn xóa bộ nhớ cache của mình. May mắn thay, đó là một quá trình đơn giản. . If the refresh doesn't work, you'll want to clear your cache. Luckily, that's a simple process.

Tại sao trang web WordPress của tôi không cập nhật ngay lập tức?

Để giải quyết vấn đề này, bạn chỉ cần nhấn nút CTRL + F5 (hoặc Cmd + R trong Mac) trên bàn phím để tải lại trang. This will ask the browser to reload the page by fetching a fresh version. In most cases, this would fix the issue for many users.

Tại sao các thay đổi WordPress của tôi không hiển thị trên thiết bị di động?

Lý do phổ biến nhất khiến các thay đổi bạn thực hiện không hiển thị trên thiết bị di động là do trình duyệt của bạn đang hiển thị phiên bản cũ của trang mà nó đã tải xuống trước đó.