[Thủ thuật WordPress] Tự động nhận dạng thiết bị để điều chỉnh ảnh hiển thị với plugin WP Hammy – WP Hammy sẽ giúp bạn điều chỉnh hình ảnh phù hợp với các thiết bị tương ứng. Hammy tăng tốc độ lên trang web của bạn bằng cách tạo ra và thay đổi kích cỡ hình ảnh nhằm đáp ứng cho từng khu vực nội dung của bạn tức là khi một người truy cập trang web của bạn, nó sẽ tự động cung cấp cho họ hình ảnh phù hợp nhất (hoặc hình ảnh nhỏ nhất có thể). Điều này đặc biệt tốt cho điện thoại di động.
Nói một cách ngắn gọn đó là bạn vô bằng điện thoại, hay là máy tính thì nó sẽ tự động canh chỉnh cho phù hợp tuy nhiên để sử dụng Plugin này bạn cần chú ý đến các thông số quy định cho phù hợp với các thiết bị thông dụng hiện nay mà bạn cài đặt các mức độ phân giải cho phù hợp hãy cùng Blog thủ thuật tìm hiểu các thông số quy định của Plugin Hammy!
Tự động nhận dạng thiết bị để điều chỉnh ảnh hiển thị
Trong bài viết trước đây về thủ thuật WordPress mình có hướng dẫn các bạn cách SEO bài viết tốt nhất cho WordPress giúp bạn có thể kiểm tra các chuẩn SEO bài viết khi xuất bản bài viết mới tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách cấu hình điều chỉnh hình ảnh hiển thị trên các thiết bị giúp hiển thị hình ảnh tốt hơn. Đầu tiên bạn hãy truy cập vào liên kết bên dưới để tải Plugin về máy tính!
Sau khi tải về bạn tiến hành cài đặt và kích hoạt Plugin (tham khảo hướng dẫn cài đặt Plugin với nhiều phương pháp). Sau khi kích hoạt thành công Plugin hãy tiến hành cài đặt các thông số sau đây
Ở phần này bạn cần phải xác định các mục sau đây
Enter your Content Contaner
Ở phần này bạn phải xác định được thẻ Content của bạn mỗi phần sẽ có các content khác nhau – Cách xác định như sau
Dùng Google Chorme trên bài viết của bạn chuột phải chọn Kiểm tra phần tử (Inspect Element) sau đó tìm xem nội dung nằm trong vùng chọn nào.
Ví dụ: ở trên đó là .single-content – Nếu nó là class thì bạn nhập là .single-content, nếu nó là ID thì nhập là #single-content, vào ô bên trên.
Add your BreakPoint
Bạn có thể hiểu breakpoint là chiều rộng tối đa mà ảnh sẽ được tạo ra cho mỗi loại màn hình. Tốt nhất bạn nên chọn như trên hoặc bạn có thể chọn như sau: 320px, 568px, 768px
Add classes to Inoge
Nghĩa là các vùng chọn mà nó sẽ không tạo ảnh cache ra, trong thời gian sử dụng nếu thấy bố cục bị vỡ thì xem ảnh đó nằm phần nào rồi thêm vùng chọn vào. Tính năng này mình chỉ khuyến khích các bạn áp dụng cho nội dung bài viết.
Sau khi thiết lập xong thì hãy Save lại và ra website xem kết quả.
Như bạn thấy bây giờ hình ảnh đã được chuyển sang một link khác và ảnh đó sẽ nằm trong cache, chiều rộng của ảnh cũng được thu lại như chúng ta đã thiết lập trong breakpoint, thời gian tải trang cũng nhanh hơn và nhẹ hơn đúng không nào? Chúc bạn thành công!
Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!
Bài viết có sự tham khảo tại: thachpham.com
