Sửa lỗi 404 CSS file không tìm thấy trong Elementor

Sửa lỗi 404 CSS file không tìm thấy trong Elementor

Mô tả lỗi

Khi sử dụng Elementor trên WordPress, bạn có thể gặp lỗi 404 liên quan đến các tệp CSS tự động tạo bởi Elementor (ví dụ: wp-content/uploads/elementor/css/post-XXX.css). Lỗi này xảy ra khi:

• Tệp CSS của một bài viết cụ thể (post-XXX.css) bị xóa hoặc không tồn tại trong thư mục wp-content/uploads/elementor/css/.
• Elementor không tự động tạo lại tệp CSS bị mất khi trang được truy cập.
• Xung đột cache.

Lỗi này có thể nhận biết qua console trình duyệt với thông báo lỗi 404 cho tệp CSS, ví dụ (ảnh đính kèm)

Nguyên nhân chính là do cơ chế cache của Elementor hoặc do các tệp CSS không được tái tạo sau khi bị xóa, đặc biệt trong quá trình di chuyển website hoặc xóa cache.

Nguyên nhân chi tiết

1. Cơ chế cache của Elementor:

• Elementor tự động tạo các tệp CSS cho từng bài viết hoặc trang được xây dựng bằng Elementor và lưu chúng trong thư mục wp-content/uploads/elementor/css/.
• Các tệp này có tên dạng post-XXX.css, trong đó XXX là ID của bài viết hoặc trang.
• Nếu chức năng Element Caching (trong Elementor > Settings > Features) được kích hoạt, các tệp CSS được lưu trữ với thời gian hết hạn mặc định là 1 ngày. Sau khi hết hạn, Elementor cần tạo lại tệp CSS mới, nhưng nếu tệp cũ bị xóa, lỗi 404 có thể xảy ra.

2. Xung đột với plugin cache:

• Khi di chuyển website (bao gồm mã nguồn và cơ sở dữ liệu), các tệp CSS trong thư mục wp-content/uploads/elementor/css/ có thể không được sao chép đầy đủ.
• Ngoài ra, cơ sở dữ liệu có thể không chứa tham chiếu trực tiếp đến các tệp post-XXX.css, vì tên tệp được Elementor tạo động dựa trên ID bài viết.

Cách khắc phục lỗi

Dưới đây là các bước để sửa lỗi và ngăn ngừa lỗi tái diễn lại.

1. Kiểm tra và tắt chức năng Element Caching (nếu cần)

Vào Elementor > Settings > Features trong bảng điều khiển WordPress.

Tìm tính năng Element Caching và tắt nó đi (đặt thành Inactive).

Lưu ý: Việc tắt tính năng này có thể làm tăng thời gian tải trang, vì Elementor sẽ không lưu trữ các tệp CSS tĩnh. Chỉ tắt nếu bạn gặp vấn đề nghiêm trọng với cache.

2. Tái tạo tệp CSS thủ công

Vào Elementor > Tools > General. Nhấn nút Elementor Cache để buộc Elementor tạo lại tất cả các tệp CSS trong thư mục wp-content/uploads/elementor/css/.

3. Sử dụng WP-CLI để tái tạo CSS (nếu bạn có quyền truy cập dòng lệnh)

Nếu bạn quản lý website qua dòng lệnh, bạn có thể sử dụng lệnh WP-CLI để tái tạo CSS toàn bộ:

wp elementor flush-css

• Lệnh này sẽ xóa cache CSS của Elementor và buộc tạo lại tất cả các tệp CSS.
• Chạy lệnh này sau khi di chuyển website hoặc khi phát hiện lỗi 404.

4. Cấu hình plugin cache để xử lý tệp CSS của Elementor

Một số plugin cache có tùy chọn để bỏ qua các tệp động (như CSS của Elementor). Hãy kiểm tra và tắt tùy chọn này đi. Bạn hãy đưa các tệp CSS của Elementor (nằm trong wp-content/uploads/elementor/css/) được đưa vào cơ chế loại trừ cache của plugin cache đang dùng nhé.

Kết luận

Lỗi 404 liên quan đến tệp CSS của Elementor thường xảy ra do xung đột cache hoặc tệp CSS bị mất trong quá trình di chuyển website. Bằng cách tái tạo CSS thủ công, cấu hình plugin cache đúng cách, và kiểm tra kỹ khi di chuyển website, bạn có thể khắc phục và ngăn ngừa lỗi này. Nếu cần thêm hỗ trợ, hãy liên hệ với tôi nhé.

Tham khảo:

• https://wordpress.org/support/topic/cache-problem-with-elementor-css-files-css-not-found-cache-conflict/
• https://github.com/elementor/elementor/issues/7237