Bạn đã bao giờ mua một sản phẩm trên Amazon? Nếu vậy, bạn có thể đã nhận thấy Thu phóng được hiển thị khi di chuột qua hình ảnh. (hiệu ứng này được gọi là Nâng cao Zoom). Nếu bạn đã tìm cách thêm hiệu ứng này vào cửa hàng của bạn từ lâu WordPress, biết rằng điều này bây giờ có thể.

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thêm hiệu ứng Nâng cao Phóng to trên blog của bạn WordPress.

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 WordPressLà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!

Điều đầu tiên cần làm là tải về Plugin, cài đặt và kích hoạt nó. Nó được lưu trữ trên Github.

Làm thế nào để cấu hình ElevateZoom

Khi bạn truy cập vào giao diện, bạn sẽ có thể thấy danh sách các tùy chọn có sẵn.

elevateZoom giao diện-the-plugin-cách-tạo-the-end-of-zoom-wordpress

Tùy chọn quan trọng nhất chắc chắn là trường " Kích hoạt elevateZoom cho hình ảnh với điều này tốt nghiệp lớp XNUMX '. Thật vậy, để kích hoạt kính lúp trên hình ảnh, bạn phải sử dụng lớp có trong trường này. Theo mặc định, giá trị là " elevateZoom Bạn có thể ghi đè giá trị này.

Cụ thể để một hình ảnh có hiệu ứng này, bạn phải truy cập trình soạn thảo văn bản, trình chỉnh sửa này hiển thị mã HTML. Sau đó, bạn phải xác định vị trí hình ảnh mà bạn muốn thêm hiệu ứng thu phóng khi di chuột qua và thêm lớp tương ứng (elevateZoom hoặc những gì bạn đã chọn) .

cách add-một-đẳng cấp là-một-image-to-integrate-the-hiệu ứng zoom

Trên hình trước, bạn sẽ nhận thấy rằng lớp của hình ảnh được đánh dấu (màu xanh), đây là lớp " elevateZoom Đó là một trong những sử dụng trong tùy chọn này.

  • Tùy chọn " zoomType ", Xác định hình dạng của kính lúp. Nó có thể là một cửa sổ (cửa sổ), một kính lúp (ống kính)hoặc bên trong hình ảnh (bên trong).
  • Tùy chọn " scrollZoom », Cho phép bạn kích hoạt thu phóng liên tục bằng con lăn chuột hoặc tương đương trên bề mặt xúc giác trên máy tính bảng và máy tính xách tay.
  • Tùy chọn " lensSize ", Xác định chiều rộng của kính lúp.
  • Tùy chọn " zoomWindowPosition », Cho phép xác định vị trí của cửa sổ, liên quan đến hình ảnh nguồn.
  • Tùy chọn " zoomWindowHeight », Cho phép xác định chiều cao của cửa sổ, cửa sổ này sẽ hiển thị hình ảnh được phóng to của hình ảnh nguồn.
  • Tùy chọn " zoomWindowWidth », Cho phép bạn xác định chiều rộng của cửa sổ sẽ hiển thị phiên bản thu phóng của hình ảnh nguồn.

elevateZoom đang chờ giải quyết-to-use-cách-tạo-một-zoom-tác-on-the-hình ảnh

Đó là tất cả những gì bạn cần biết về cách thiết lập Plugin. Bây giờ khi bạn muốn thêm hiệu ứng này vào hình ảnh, đừng quên thêm lớp được chỉ định trên " Kích hoạt elevateZoom cho hình ảnh với điều này tốt nghiệp lớp XNUMX '.

Xem thêm: Cách thêm thu phóng cho hình ảnh WordPress

Những gì chúng tôi thích:

  • đơn giản
  • tác
  • Khả năng tương thích với các chủ đề
  • tùy chọn cấu hình kính lúp

Những gì chúng tôi đã không thích:

  • Le Plugin bằng tiếng Anh, vì vậy có thể không phải ai cũng có thể truy cập được, nhưng với hướng dẫn này, chúng tôi hy vọng rằng bạn sẽ có thể bắt đầu với hướng dẫn này.
  • Định vị liên kết đến giao diện của Plugin được ẩn trong menu « thiết lập '.
  • Yêu cầu ít mã HTML.

Xem thêm: Cách thêm sơ đồ trang web HTML trên trang web WordPress

Tóm lại:

Điều gì hạnh phúc trong quan điểm với điều này Plugin. Không phát hiện thấy lỗi và khả năng tương thích a đơn giản ấn tượng. Chúng tôi hy vọng rằng bạn, giống như chúng tôi, sẽ thích việc sử dụng này Plugin.

Nếu bạn có bất kỳ câu hỏi, chúng tôi có sẵn cho bạn.

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. WP Google PageSpeed ​​Insights Tối ưu hóa hình ảnh

Ce Plugin WordPress cao cấp dành cho bất kỳ ai muốn tối ưu hóa hình ảnh của họ. Nó có thể quét các chủ đề và thư mục plugin để tìm hình ảnh và tối ưu hóa chúng.

WP Google PageSpeed ​​Insights Tối ưu hóa hình ảnh

Nó dựa trên API Tốc độ trang của Google, vì vậy nó có cùng một cách nén chính xác, nhưng bạn sẽ phải đặt khóa API.

Xem thêm 5 WordPress plugin để sao lưu blog của bạn

Nó cũng có thể tối ưu hóa hình ảnh đại chúng, lưu hình ảnh gốc, khôi phục hình ảnh gốc và những người khác.

Tải về | Bản demo | Web hosting

2. Thang máy cho hình ảnh WordPress

Ce Plugin WordPress premium cung cấp cho bạn khả năng thêm hình ảnh vào bài đăng của bạn từ ảnh chụp màn hình hoặc trình chỉnh sửa đồ họa của bạn.

Thang máy hình ảnh cho plugin WordPress

Ngoài ra, Plugin WordPress hỗ trợ loại bài viết tùy chỉnh và bạn sẽ có cơ hội tiết kiệm rất nhiều thời gian trong các ấn phẩm của bạn.

Tải xuống | Demo | Web hosting

3. Ewww Optimizer ảnh

Ewww Optimizer ảnh là một tùy chọn miễn phí tuyệt vời để nén hình ảnh trong WordPress. Nó dễ sử dụng và có thể tự động tối ưu hóa hình ảnh bạn tải lên khi đang di chuyển. Nó cũng có thể nén hàng loạt và tối ưu hóa hình ảnh hiện có. 

Ewww Optimizer ảnh

Nó thực hiện tất cả quá trình nén trên máy chủ của riêng bạn, có nghĩa là bạn không cần đăng ký để có được khóa API

Nó cũng có thể tối ưu hóa hình ảnh được tạo bởi các plugin WordPress và được lưu trữ bên ngoài các tệp của thư viện phương tiện. Nó không yêu cầu tài khoản để sử dụng plugin, nhưng bạn sẽ có thể đăng ký API của nó để nhận các tính năng bổ sung.

Tải về Bản demo | Web hosting

Tài nguyên đề xuất

Khám phá nhiều hơn ressources các đề xuất sẽ đi kèm với bạn trong quá trình tạo và quản lý trang web của bạn.

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 thêm hiệu ứng Amazon Zoom cho ảnh 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.

...