Mặc dù không thể bỏ qua việc áp dụng ngày càng nhiều hình ảnh đáp ứng, nhưng có thể rất khó để sử dụng chức năng dưới sự ràng buộc của một CMS lớn như WordPress. Mặc dù bạn hoàn toàn có thể tự thiết kế tính năng vào chủ đề của mình, nhưng làm như vậy là một công việc khó khăn và tốn thời gian.
May mắn thay, với sự ra mắt của WordPress 4.4, các nhà phát triển chủ đề và plugin sẽ có cơ hội sử dụng hình ảnh đáp ứng trong các sản phẩm của họ. Kể từ khi bắt đầu bản phát hành này, plugin “Hình ảnh đáp ứng RICG” đã được hợp nhất vào lõi WordPress, có nghĩa là hỗ trợ hình ảnh đáp ứng hiện là một tính năng mặc định nội bộ của WordPress. Hãy cùng xem nó hoạt động như thế nào và bạn có thể sử dụng nó như thế nào để khai thác tối đa trang web WordPress của mình.
Làm thế nào hình ảnh làm việc responsives
Ngay sau khi bạn nâng cấp lên WordPress 4.4, tất cả nội dung và hình ảnh của bạn sẽ có 'srcset' và ' kích thước Được lọc để đảm bảo rằng mọi kích thước hình ảnh có sẵn đều tồn tại, đồng thời duy trì kích thước của hình ảnh được yêu cầu ban đầu. Điều quan trọng cần lưu ý là thay đổi kích thước tùy chỉnh sẽ bị bỏ qua khỏi " srcset »Nếu tỷ lệ khung hình khác với hình ảnh gốc được yêu cầu. Ngoài ra, bằng cách gọi lên một hình ảnh thông qua chức năng " wp-get-tin đính kèm hình ảnh Nó sẽ trả lại một hình ảnh đáp ứng là tốt.
Các " Hình ảnh phản hồi Là một tính năng ở chế độ nền, có nghĩa là mọi thứ diễn ra tự động mỗi khi người dùng tải hình ảnh lên WordPress thông qua giao diện tải lên phương tiện. Khi một hình ảnh xuất hiện trên một trang, nó sẽ có thuộc tính " srcset "Và" kích thước Là kết quả của quá trình nền này.
Điều này có nghĩa là tính năng hình ảnh phản hồi mới sẽ không có giao diện người dùng hiển thị. Không có tùy chọn để chuyển đổi, hình thức để điền vào, hoặc các hộp kiểm. Nói như vậy, các nhà phát triển chủ đề nên chỉnh sửa " functions.php Để hình ảnh của họ có độ chính xác với thuộc tính " kích thước ". Thật vậy, khi chúng ta nói về hình ảnh đáp ứng trong WordPress, chúng ta đang nói cụ thể về các thuộc tính " srcset "Và" kích thước Mà được tìm thấy trên thẻ của hình ảnh.
Trong khi WordPress thực hiện một công việc đặc biệt là chèn tất cả các kích thước có sẵn vào thuộc tính " srcset ", Thuộc tính" kích thước "khó dự đoán hơn một chút. Thật vậy, thuộc tính " kích thước Có trách nhiệm cho trình duyệt biết hình ảnh như thế nào theo kích thước có sẵn của cửa sổ. Vì thông tin sẽ khác nhau tùy thuộc vào phong cách chủ đề của người dùng, nên tốt nhất chúng tôi có thể làm là cung cấp một mặc định hợp lý như sau:
sizes="(max-width: {{image-width}}) 100vw, {{image-width}}"Thuộc tính mặc định này " kích thước Có hai điều. Đầu tiên, nó đảm bảo rằng một thuộc tính hợp lệ " kích thước Tồn tại trên hình ảnh, mà gần đây đã trở thành một yêu cầu bắt buộc theo đặc điểm kỹ thuật. Thứ hai, nó đảm bảo rằng trình duyệt không cung cấp nguồn hình ảnh lớn hơn chiều rộng được yêu cầu ban đầu. Trong trường hợp thao tác CSS, kích thước của hình ảnh sẽ khác nhau tùy thuộc vào độ rộng của cửa sổ, mặt khác là giá trị mặc định " kích thước Sẽ trở nên ít hữu ích hơn.
Vì thuộc tính mặc định " kích thước "Sẽ chỉ giúp ích cho các hình ảnh không bị thay đổi bởi CSS, các dấu ngoặc lọc sẽ có sẵn để cho phép các nhà phát triển chủ đề đặt" thuộc tính " kích thước "Của mỗi hình ảnh, đảm bảo rằng một hoàn hảo" kích thước Được đưa đến từng điểm dừng.
Điều quan trọng cần lưu ý ở đây là, nếu có thể, chủ đề của bạn không nên dựa vào giá trị mặc định của " kích thước"Để cung cấp thông tin chính xác về hỗ trợ hình ảnh đáp ứng." Thật vậy, thuộc tính mặc định " kích thước »Không cho phép trình duyệt thay đổi nguồn ảnh khi cửa sổ nhỏ hơn kích thước ban đầu của ảnh được yêu cầu. Nó cũng sẽ không thể thay đổi nguồn nếu hình ảnh được chỉnh sửa bằng CSS tại một điểm ngắt, khi hình ảnh có thể lớn hơn kích thước ban đầu được yêu cầu.
Nếu bạn là nhà phát triển của chủ đề hoặc có quyền truy cập vào cơ sở mã WordPress, lọc hình ảnh của chủ đề của bạn để cung cấp độ chính xác với " kích thước Là một trong những điều quan trọng nhất bạn có thể làm sau khi phiên bản mới sắp ra mắt. Sau đây là một ví dụ về hook trong " wp_calculate_image_sizes Mà bạn có thể phát triển để phù hợp với chủ đề của bạn.
function adjust_image_sizes_attr( $sizes, $size ) {
$sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';
return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr', 10 , 2 );Trong ví dụ này, dấu kiểm sẽ áp dụng cho tất cả nội dung bao gồm hình ảnh nổi bật và hình thu nhỏ. Có thể thêm logic bổ sung để đảm bảo rằng các loại hình ảnh khác nhau có giá trị khác nhau.
Các chức năng mới đã được thêm vào cho thuộc tính " srcset "Và" kích thước Có thể được thêm vào một hình ảnh đã được thêm vào WordPress thông qua Trình quản lý phương tiện, ngoài các hình ảnh được thêm vào để hiển thị nội dung. Chức năng wp_get_attachment_image_sizes Sẽ trả về một thuộc tính mặc định " kích thước Có thể sửa đổi bằng bộ lọc chủ đề của bạn trong tệp " functions.php ". Chức năng wp_get_attachment_image_srcset sẽ trả về một thuộc tính srcset »Trong đó sẽ chứa tất cả các kích thước có sẵn của hình ảnh được yêu cầu. Có thể tìm thấy tài liệu và ví dụ về cách sử dụng các chức năng mới này thư mục tham khảo của nhà phát triển.
Cấu hình hình ảnh đáp ứng cho chủ đề của bạn
Với các tính năng mới, một số dấu ngoặc mới có thể được sử dụng để cung cấp mức hỗ trợ mới cho hình ảnh phản hồi, phù hợp nhất với chủ đề của bạn. Cái móc max_srcset_image_width "Sẽ cho phép nhà phát triển chủ đề lọc chiều rộng tối đa của hình ảnh để đưa vào" srcset ". Cái móc wp_calculate_image_srcset »Sẽ lọc các thuộc tính« srcset »Hình ảnh, trong khi hook (bộ lọc)« wp_calculate_image_sizes "Sẽ cho phép nhà phát triển chủ đề tùy chỉnh" kích thước Để phù hợp hơn với các điểm ngắt hình ảnh trong chủ đề của chúng.
Nếu bạn đang tìm kiếm một ví dụ về cách tốt nhất để lọc thuộc tính " kích thước Đối với một hình ảnh, chủ đề hai mươi sáu mươi mới sẽ là một ví dụ hoàn hảo. Trong tệp functions.php của chủ đề này, hai hàm cuối cùng lọc thuộc tính " kích thước Để đáp ứng các điểm ngắt hình ảnh khác nhau trong chủ đề.
bộ lọc hình ảnh đáp ứng Hướng dẫn WordPress#
Cập nhật lên WordPress 4.4 có nghĩa là người dùng sẽ ngay lập tức được hưởng lợi từ khả năng tương thích hình ảnh đáp ứng, giúp hiển thị hình ảnh sắc nét, rõ ràng ở mọi kích thước cửa sổ và mật độ điểm ảnh. Điều này cũng sẽ giúp tăng hiệu suất, vì các trang sẽ không còn phải tải các hình ảnh lớn và nặng trong một thời gian dài. Mặc dù đây là quy trình tự động dành cho người dùng, nhưng các nhà phát triển chủ đề sẽ cần điều chỉnh kích thước hình ảnh của họ cho phù hợp. chủ đề.
Đó là tất cả cho hướng dẫn này, tôi hy vọng nó sẽ giúp bạn hiểu rõ hơn về tầm quan trọng và khái niệm của hình ảnh phản hồi trên WordPress. Hãy chia sẻ hướng dẫn này với bạn bè của bạn trên các mạng xã hội yêu thích của bạn.
