Hướng dẫn how do i use srcset in wordpress? - làm cách nào để sử dụng srcset trong wordpress?

• 17 phút đọc
• WordPress, tối ưu hóa, hiệu suất, thiết kế đáp ứng, kỹ thuật [WP]

Hỗ trợ cho các hình ảnh phản hồi đã được thêm vào Core WordPress trong phiên bản 4.4 để giải quyết trường hợp sử dụng để chọn hình ảnh dựa trên chế độ xem, trong đó trình duyệt yêu cầu kích thước hình ảnh phù hợp nhất với bố cục cho chế độ xem cụ thể của nó.

Hình ảnh được chèn trong văn bản của một bài đăng tự động được xử lý đáp ứng, trong khi hình ảnh được xử lý bởi chủ đề hoặc plugin - như hình ảnh đặc trưng và phòng trưng bày hình ảnh - có thể được mã hóa bởi các nhà phát triển sử dụng các chức năng và bộ lọc hình ảnh phản hồi mới. Với một vài bổ sung, các trang web WordPress có thể chứa một trường hợp sử dụng hình ảnh đáp ứng khác được gọi là hướng nghệ thuật. Hướng nghệ thuật cho chúng ta khả năng thiết kế với hình ảnh có cây trồng hoặc thành phần thay đổi tại các điểm dừng nhất định.

Đọc thêm về SmashingMag: on SmashingMag:

• Trình tạo điểm dừng hình ảnh đáp ứng
• Giới thiệu Trình tạo điểm dừng hình ảnh phản hồi
• Hình ảnh đáp ứng được thực hiện đúng: Hướng dẫn và SRCSET
• Hình ảnh đáp ứng hiện đã hạ cánh trong Core WordPress

Trong bài viết này, tôi sẽ chỉ cho bạn cách thiết lập một trang web WordPress cho định hướng nghệ thuật bằng cách trải qua ba ví dụ tiến bộ:

Thêm sau khi nhảy! Tiếp tục đọc bên dưới & NBSP; ↓

• Hỗ trợ tự động của WordPress, cho các hình ảnh phản hồi trong các bài đăng
• Hình ảnh biểu ngữ có chiều rộng thay đổi trong mẫu trang
• Một hình ảnh anh hùng theo hướng nghệ thuật trong một mẫu trang

Theo ví dụ về hướng nghệ thuật, chúng tôi sẽ thêm một số PHP, polyfill và plugin cắt vào trang web.

Hỗ trợ tự động cho hình ảnh đáp ứng WordPress trong các bài đăng

Hỗ trợ cho các hình ảnh phản hồi là tất cả về các tùy chọn: Chúng tôi cung cấp một mảng các tệp hình ảnh được mô tả tốt cho trình duyệt và trình duyệt áp dụng kiến ​​thức của nó về mật độ chiều rộng và pixel của chế độ xem để yêu cầu tệp có độ phân giải phù hợp nhất. Công việc ở đây là thuộc tính srcset, có thể được sử dụng với các thẻ img và

    $id = get_post_thumbnail_id[];
    $src = wp_get_attachment_image_src[ $id, 'full' ];
    $srcset = wp_get_attachment_image_srcset[ $id, 'full' ];
    $sizes = wp_get_attachment_image_sizes[ $id, 'full' ];
    $alt = get_post_meta[ $id, '_wp_attachment_image_alt', true];