Hướng Dẫn Loại Bỏ Auto Sizes CSS Trên WordPress 6.7

Từ WordPress 6.7, hệ thống tự động thêm thuộc tính sizes vào các thẻ ảnh (<img>) để cải thiện khả năng hiển thị responsive. Tuy nhiên, trong một số trường hợp, bạn có thể muốn tắt tính năng này để giữ HTML sạch hơn hoặc tự kiểm soát kích thước ảnh theo cách riêng.

Bài viết này sẽ hướng dẫn bạn cách loại bỏ hoàn toàn thuộc tính sizes và một số thuộc tính tự động khác liên quan đến ảnh trong WordPress.

1. Tại sao nên loại bỏ auto sizes?

Mặc dù thuộc tính sizes giúp trình duyệt chọn kích thước ảnh phù hợp với màn hình, nhưng việc WordPress tự động thêm vào đôi khi lại gây ra:

• Lỗi giao diện khi bạn đã có CSS hoặc layout responsive riêng
• Trùng lặp hoặc mâu thuẫn với các plugin tối ưu ảnh
• Không cần thiết nếu bạn muốn HTML ảnh đơn giản, dễ kiểm soát hơn
• Ảnh bị resize không mong muốn trên giao diện người dùng

2. Cách tắt thuộc tính sizes trong WordPress

Bạn chỉ cần thêm đoạn code sau vào file functions.php trong theme đang dùng (hoặc trong plugin tùy chỉnh):

// Vô hiệu hóa thuộc tính 'sizes' tự động cho ảnh
add_filter('wp_calculate_image_sizes', '__return_false');

Đoạn code này sẽ ngăn WordPress tự động chèn thuộc tính sizes vào các thẻ <img>.

3. Tắt lazy loading mặc định (tuỳ chọn)

WordPress cũng tự động thêm loading="lazy" cho ảnh để cải thiện tốc độ tải trang. Nếu bạn không muốn sử dụng lazy loading của WordPress, hãy thêm đoạn code sau:

// Tắt lazy loading mặc định cho ảnh
add_filter('wp_lazy_loading_enabled', '__return_false');

Điều này hữu ích nếu bạn đã sử dụng plugin lazy loading khác, hoặc có chiến lược tối ưu riêng.

4. Loại bỏ thuộc tính sizes bằng cách chỉnh trực tiếp HTML ảnh

Trong một số trường hợp, bạn muốn can thiệp vào HTML của ảnh để gỡ bỏ thuộc tính cụ thể. Sử dụng filter dưới đây:

// Gỡ bỏ thuộc tính 'sizes' khỏi HTML ảnh
add_filter('wp_get_attachment_image_attributes', function($attr) {
    unset($attr['sizes']);
    return $attr;
});

5. Kết luận

Tính năng tự động thêm sizes và loading="lazy" được thiết kế để giúp tối ưu hóa ảnh trong WordPress. Tuy nhiên, nếu bạn cần toàn quyền kiểm soát HTML hoặc muốn giữ layout theo ý mình, bạn hoàn toàn có thể tắt chúng bằng các filter đơn giản.

Việc điều chỉnh này giúp bạn có HTML sạch hơn, dễ quản lý hơn và phù hợp hơn với nhu cầu tùy biến giao diện.

Mẹo: Luôn sao lưu file functions.php trước khi chỉnh sửa, và kiểm tra lại giao diện sau khi áp dụng thay đổi.