Chúng ta đang sống trong một thế giới có độ nét cao. Và vì hầu hết chúng ta dành hơn tám giờ mỗi ngày để xem các loại màn hình khác nhau, chất lượng của hình ảnh và các nhân vật có trong các màn hình này là rất quan trọng.
Mặc dù chúng chỉ mới xuất hiện được vài năm, nhưng màn hình Retina là con đường của tương lai. Mật độ điểm ảnh cao trong màn hình Retina giúp hình ảnh rõ ràng và sắc nét. Và ai lại không thích những hình ảnh đẹp, sắc nét?
Học tạo một trang web tương thích với màn hình Retina là một tài sản quan trọng đối với bất kỳ nhà phát triển web nào. Thật không may, không có giải pháp lý tưởng và hoàn hảo nào để làm cho trang web của bạn thân thiện với người dùng với màn hình Retina-Ready.
Vì vậy, trong khi chờ ai đó tìm ra giải pháp hoàn chỉnh nhất, chúng tôi đã xem xét một số tùy chọn tốt nhất có thể để chuẩn bị trang web của bạn. Bằng cách đó, bạn sẽ không bị lạc lối khi đến lúc tất cả các thiết bị sẽ có màn hình Retina ở dạng này hay dạng khác.
Nhưng trước khi bắt đầu, hãy dành thời gian để xem xét Làm thế nào để cài đặt một theme WordPress, Làm thế nào nhiều plugins tôi nên cài đặt trên WordPress.
Vậy thì hãy đi làm!
Tạo nhiều tập tin hình ảnh
Hãy bắt đầu với những điều cơ bản. Cách dễ nhất để nhận hỗ trợ Chế độ Retina cho trang web của bạn là tạo nhiều biến thể hình ảnh ở các độ phân giải khác nhau. Điều này có nghĩa là đối với mỗi loại độ phân giải (tức là 1x), bạn cần tạo phiên bản độ phân giải cao của clip đó (tức là 2x).
Về cơ bản, bạn có thể tạo nhiều phiên bản của cùng một tệp và sử dụng một plugin như WP Retina 2x hoặc một tập lệnh như retina.js để tự động tạo các phiên bản "@ 2x" của mỗi kích thước hình ảnh hoặc tìm hình ảnh "@ 2x" và hiển thị kích thước tương ứng với từng thiết bị.
Đúng là việc tạo ra nhiều phiên bản của cùng một hình ảnh có thể là một quá trình tốn thời gian. Thật không may, không có phương pháp nhanh nào tự động tạo những hình ảnh này cho bạn. Tuy nhiên, có một số plugin Photoshop cho phép bạn nhanh chóng sửa chữa hình ảnh của mình.
Các plugin như " Retinize It Đó là một loạt các thao tác trong Photoshop cho phép bạn dễ dàng tối ưu hóa thiết kế của mình cho màn hình Retina. Nếu bạn đang sử dụng phiên bản Photoshop cũ hơn (trước CC), bạn có thể sử dụng một cái gì đó như " Bốn Về cơ bản nó làm được mọi thứ mà công cụ Photoshop Generator hiện tại làm được, nhưng đối với các phiên bản Photoshop cũ hơn.
Đồ họa vector có thể mở rộng (SVG)
Cách dễ nhất để tiếp tục với chế độ Retina là sử dụng Đồ họa Vectơ có thể mở rộng (SVG) trên trang web của bạn. SVG là một định dạng hình ảnh vectơ dựa trên XML. Như tên cho thấy, hình ảnh SVG có thể mở rộng, có nghĩa là hình ảnh có thể được kéo dài ra xa (hoặc ít) nếu cần, trong khi vẫn sắc nét và rõ ràng. Đây có thể là một cách nhanh chóng và dễ dàng để bạn thực hiện Chế độ Retina mà không cần nỗ lực nhiều.
Đọc cũng: Cách cung cấp hình ảnh WebP thay vì PNG & JPG truyền thống
Tuy nhiên, có hai nhược điểm khi sử dụng SVG trên WordPress. Đầu tiên là vì nó là một định dạng vector, SVG không phù hợp với tất cả các hình ảnh. Vì vậy, bạn có thể sử dụng SVG cho biểu trưng và biểu tượng, nhưng không sử dụng cho các tệp như ảnh (Điều này hơi đau nếu bạn muốn sử dụng hình ảnh có độ phân giải cao cho trang web của mình). Nhưng nếu bạn muốn sử dụng các biểu tượng, hình động hoặc hình minh họa đơn giản, các tệp SVG chắc chắn có thể là một tùy chọn cho trang web tương thích với Retina.
Nhược điểm thứ hai khi sử dụng SVG trên WordPress là nó không phải là định dạng tương thích chính thức với WordPress do các mối quan tâm về bảo mật. Vì tệp SVG về cơ bản là một tệp XML, điều này sẽ mở ra tất cả các lỗ hổng đã biết liên quan đến định dạng tệp XML, chẳng hạn như phân tích cưỡng chế, tấn công thực thể bên ngoài XML (XEE), tấn công từ chối dịch vụ XML (XDoS), v.v.
Tuy nhiên, có một cách để bật hỗ trợ SVG cho trang web của bạn, điều này sẽ giúp các tệp SVG của bạn an toàn.
Cách bật SVG an toàn trên WordPress
SVG an toàn là một plugin cho phép bạn bật hỗ trợ tệp SVG một cách an toàn trên trang web của mình. Plugin này đảm bảo rằng các tệp SVG của bạn được khử trùng để ngăn chặn bất kỳ lỗ hổng XML tiềm ẩn nào ảnh hưởng đến trang web của bạn.
Tránh xa các plugin cho phép loại MIME cho phép tải lên từ SVG lên thư viện phương tiện WordPress vì chúng nguy hiểm và có khả năng gây hại cho trang web của bạn. Vì vậy, nếu bạn thực sự muốn sử dụng định dạng SVG trên WordPress, hãy đảm bảo bạn làm điều đó một cách an toàn và không tải xuống plugin SVG đầu tiên mà bạn thấy.
Thúc đẩy nhiều chuyển đổi đến blog của bạn bằng cách đọc của chúng tôi các loại nội dung 15 mà tạo ra nhiều khách truy cập vào blog của bạn
Một số plugin để tích hợp khả năng tương thích Retina trên WordPress
Có một số tập lệnh và plugin tương thích với Retina có thể giúp cuộc sống của bạn dễ dàng hơn nhiều khi cố gắng thiết lập trang web tương thích với Chế độ Retina. Tuy nhiên, như đã đề cập trước đó, hầu hết các plugin và tập lệnh có sẵn, thay thế hình ảnh của bạn bằng hình ảnh có độ phân giải cao chỉ dành cho màn hình có độ phân giải cao. Chúng không giãn ra như SVG: bạn vẫn cần tạo nhiều hình ảnh có độ phân giải khác nhau.
1 - retina.js
retina.js là một trong những script được sử dụng nhiều nhất để phục vụ hình ảnh có độ phân giải cao. Đây là một tập lệnh mã nguồn mở giúp dễ dàng cung cấp hình ảnh có độ phân giải cao cho các thiết bị có màn hình Retina.
Tập lệnh kiểm tra từng hình ảnh trên trang để xem có phiên bản độ phân giải cao của hình ảnh đó trên máy chủ hay không. Nếu biến thể có độ phân giải cao tồn tại, tập lệnh sẽ hoán đổi độ phân giải tiêu chuẩn với hình ảnh có độ phân giải cao. Đây là một trong những cách phổ biến nhất để cung cấp hình ảnh cho màn hình Retina trên trang web của bạn.
Xem thêm: GIF, Biểu tượng cảm xúc hoặc Memes: một ý tưởng tốt cho các trang web WordPress?
2 - dày đặc
Tương tự như retina.js, Ngu si là một plugin jQuery cung cấp một cách dễ dàng để phân phát hình ảnh ở định dạng pixel-ratio. Tập lệnh gọi phương thức $ .fn.dense () của quá trình khởi tạo, phương thức này nhắm mục tiêu các thẻ "img" sẽ đóng vai trò là hình ảnh tương thích với chế độ Retina khi cần thiết.
Vì vậy, nó thay thế tất cả các hình ảnh bằng phiên bản có độ phân giải cao tương ứng, giống như tập lệnh retina.js.
3 - WP Retina 2x
Cái thứ hai có thể được ví như một máy phát hình ảnh Retina kỳ diệu.
WP Retina 2x là một plugin tạo các tệp hình ảnh được yêu cầu bởi các thiết bị DPI cao và hiển thị chúng cho khách truy cập của bạn tương ứng. Không giống như hai tập lệnh trước, nó tạo ra các hình ảnh có độ phân giải khác nhau từ một hình ảnh ban đầu. Vì vậy, nếu bạn không quá hài lòng với việc tạo các hình ảnh khác nhau với độ phân giải khác nhau theo cách thủ công, thì tùy chọn này là dành cho bạn.
Đó là tất cả cho hướng dẫn này, tôi hy vọng nó sẽ cho phép bạn chuyển đổi hình ảnh của mình thành hình ảnh Retina Ready.
Khám phá thêm một số plugin WordPress cao cấp
Bạn có thể sử dụng cái khác plugin WordPress để tạo ra một giao diện hiện đại và để tối ưu hóa việc xử lý blog hoặc trang web của bạn.
Chúng tôi cung cấp cho bạn ở đây một số plugin WordPress cao cấp sẽ giúp bạn làm điều đó.
1. Một danh sách tác giả WordPress ưa thích
Như tên cho thấy, plugin Danh sách tác giả WordPress ưa thích hiển thị danh sách các tác giả cho trang web của bạn trong một widget. Nó có một giao diện người dùng đơn giản cho phép hiển thị thông tin của bất kỳ tác giả nào trong thanh bên. Tất cả bạn phải làm là kéo tiện ích tác giả sang thanh bên và plugin sẽ thực hiện công việc.
Các tính năng chính của nó là trong số những tính năng khác: khả năng để hiển thị các tác giả blog theo một cách thú vị để thu hút khách truy cập mới, khả năng hiển thị danh sách tác giả trong thanh bên hoặc trên trang, khả năng bắt đầu một cuộc thi giữa các tác giả của blog của bạn, một bố cục đáp ứng, hỗ trợ cho các mã ngắn và nhiều hơn nữa.
Tải xuống | Bản demo | Web hosting
2. Mục lục dễ dàng
Ce Plugin WordPress thân thiện với người dùng cho phép bạn chèn mục lục vào các bài đăng, trang và các loại bài đăng tùy chỉnh của mình. Nó có nhiều tính năng, những tính năng chính là:
quản lý tự động mục lục, hỗ trợ thẻ , Hỗ trợ plugin Rankin Math, khả năng tương thích với một số trình chỉnh sửa trang như Gutenberg, Divi, Elementor, Trình tạo Trang WPBake và những thứ khác, khả năng chọn trên những trang mà ấn phẩm của bạn muốn hiển thị nó, tự động chèn mục lục trên một số trang nhất định và nhiều trang khác.
Nó là một Plugin WordPress phần mềm miễn phí có mọi thứ bạn cần để hiển thị mục lục của mình, vì vậy hãy thoải mái chọn nó làm sự lựa chọn đầu tiên của bạn.
Tải về | Bản demo | Web hosting
3. WooCommerce Nâng cao Hàng loạt Chỉnh sửa
Bạn có thường xuyên chỉnh sửa danh mục sản phẩm của mình không? Cho dù bạn có 100 sản phẩm hay 10.000 sản phẩm, điều này Plugin WordPress phí bảo hiểm là theo ý kiến khiêm tốn của tôi "A must have": (Đó là từ đầu tiên xuất hiện trong tâm trí).
Chỉ với vài đô la, plugin WooC Commerce Nâng cao hàng loạt Chỉnh sửa sẽ làm cho cuộc sống dễ dàng hơn và tiết kiệm thời gian khủng khiếp của bạn. Không có do dự đó là một quả bom.
Tải về | Bản demo | Web hosting
Tài nguyên đề xuất
Tìm hiểu về các tài nguyên được đề xuất khác để giúp bạn xây dựng và quản lý trang web của mình.
- nguồn lưu lượng 5 bạn có thể biết
- Trường hợp nghiên cứu: Nội dung tiếp thị, làm thế nào để học hỏi từ những sai lầm
- Tại sao dịch giả tự do cần một lịch trình hàng ngày
- 7 khía cạnh mà sẽ giúp bạn tạo một blog thành công
Kết luận
Đây ! Đó là nó cho hướng dẫn này, tôi hy vọng nó sẽ cho phép bạn tạo hình ảnh Retina-Ready cho trang web của bạn. Đừng ngần ngại chia sẻ 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.
Tuy nhiên, bạn cũng có thể tham khảo ý kiến tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress.
Nếu bạn có đề xuất hoặc nhận xét, hãy để lại trong phần của chúng tôi ý kiến.
...
