Bỏ qua đến nội dung chính

Responsives cách hình ảnh được quản lý bởi WordPress

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 901.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

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 những 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 trong chủ đề của mình, nhưng làm như vậy là một nỗ lực khó khăn và cần có 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.

đáp ứng hình ảnh-trac-wordpress

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à chức năng mới của hình ảnh đáp ứng sẽ không có giao diện người dùng hiển thị. Không có tùy chọn chuyển đổi, biểu mẫu có thể điền hoặc hộp kiểm. Điều đó đang được nói, 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:

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

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 chủ đề hoặc có quyền truy cập vào cơ sở mã WordPress, hãy lọc các hình ảnh trong chủ đề của bạn để cung cấp độ chính xác với thuộc tính " 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.

Đừng lãng phí thời gian và tiền bạc!

Khám phá công cụ tốt nhất để tạo blog của bạn, blog cửa hàng trực tuyến của bạn hoặc bất kỳ trang web nào khác chỉ trong vài cú nhấp chuột!

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.

mã nguồn wp-image-phản ứng nhanh

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 đáp ứng hình ảnh WordPress hướng dẫn #

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, điều này sẽ thúc đẩy hiển thị hình ảnh rõ ràng, sắc nét ở mọi kích thước cửa sổ và mật độ điểm ảnh. Điều này cũng sẽ dẫn đến việc tăng hiệu suất, vì các trang sẽ không còn phải tải hình ảnh lớn và nặng trong thời gian dài. Mặc dù đây là một quy trình tự động cho người dùng, nhưng các nhà phát triển chủ đề sẽ cần phải điều chỉnh kích thước hình ảnh cho chủ đề của họ.

Đó 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.

 

Bài viết này chứa comments 0

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
11 cổ phiếu
cổ phiếu6
tweet1
Enregistrer4