Cách thêm thu phóng phóng đại cho hình ảnh trong WordPress

Tác giả sysadmin, T.Ba 17, 2023, 03:32:29 CHIỀU

« Chủ đề trước - Chủ đề tiếp »

0 Thành viên và 1 Khách đang xem chủ đề.

Cách thêm thu phóng phóng đại cho hình ảnh trong WordPress


Bạn có muốn thêm tính năng thu phóng phóng đại giống như Amazon cho hình ảnh trong WordPress không?

Việc thêm tính năng thu phóng sẽ cho phép người dùng xem các chi tiết mà họ sẽ không nhìn thấy trong hình ảnh có kích thước bình thường.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm thu phóng phóng đại cho hình ảnh trong WordPress.

1. Tại sao Thêm Thu phóng Phóng đại cho Hình ảnh?

Thêm tính năng thu phóng phóng đại trên trang web WordPress của bạn sẽ cho phép khách truy cập xem rõ ràng các chi tiết phức tạp của hình ảnh.

Nếu bạn có trang web nhiếp ảnh thì việc thêm tính năng phóng to sẽ cho phép người dùng phóng to ảnh của bạn để xem chi tiết tốt hơn.

Tương tự, nếu bạn điều hành một cửa hàng trực tuyến thì khách hàng của bạn sẽ có thể phóng to hình ảnh sản phẩm.

Nhiều trang web thương mại điện tử lớn đã sử dụng tính năng thu phóng phóng đại cho hình ảnh sản phẩm. Nó cho phép khách hàng kiểm tra sản phẩm và tạo trải nghiệm mua sắm tốt hơn trong cửa hàng của bạn.

Như đã nói, hãy xem cách bạn có thể dễ dàng thêm tính năng thu phóng phóng đại cho hình ảnh trong WordPress.

2. Cách thêm thu phóng phóng đại cho hình ảnh trong WordPress

Trước tiên, bạn cần cài đặt và kích hoạt plugin WP Image Zoom. Để biết thêm chi tiết, vui lòng xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.

Sau khi kích hoạt, bạn cần truy cập trang WP Image Zoom » Zoom Settings từ thanh bên quản trị viên WordPress.

Tiếp theo, bạn cần định cấu hình cài đặt hiệu ứng thu phóng bằng cách chuyển sang tab 'Cài đặt thu phóng' và chọn hình dạng ống kính mà bạn muốn sử dụng.


Bạn có thể chọn từ các hình dạng ống kính cửa sổ hình tròn, hình vuông và thu phóng. Bạn thậm chí có thể chọn tùy chọn 'Không có ống kính' (⨯) nếu bạn không muốn sử dụng hình dạng cho hiệu ứng phóng đại.

Sau khi chọn ống kính ưa thích, bạn cần cuộn xuống bước tiếp theo nơi bạn có thể xem trước hình ảnh với ống kính đã chọn để xem nó hoạt động như thế nào. Plugin có hình ảnh xem trước mà bạn có thể sử dụng để kiểm tra các thay đổi của mình.


Tiếp theo, bạn cần chuyển sang tab "Chung".

Từ đây, bạn có thể chọn loại con trỏ, đặt hiệu ứng hoạt hình, bật thu phóng khi di chuột hoặc nhấp chuột và xác định mức thu phóng.

Nếu bạn muốn có nhiều tùy chọn hơn, một số tính năng chỉ khả dụng cho phiên bản chuyên nghiệp của plugin WP Image Zoom.


Sau khi đưa ra lựa chọn phù hợp, chỉ cần chuyển đến tab 'Ống kính' từ trên cùng.

Giờ đây, bạn có thể định cấu hình cài đặt như kích thước ống kính, màu ống kính, tùy chọn viền ống kính, v.v. nếu bạn chọn ống kính 'hình tròn' hoặc 'hình vuông' ở Bước 1.


Nếu bạn đã chọn Ống kính cửa sổ thu phóng, thì bạn cần chuyển sang tab cấu hình 'Cửa sổ thu phóng'.

Từ đây, bạn có thể thay đổi chiều rộng và chiều cao của cửa sổ thu phóng, vị trí, khoảng cách từ hình ảnh chính, màu đường viền, v.v.


Tiếp theo, bạn chỉ cần nhấp vào 'Lưu thay đổi' để lưu cài đặt của mình.

Sau đó, tất cả những gì bạn phải làm là định cấu hình một vài cài đặt chung.


Tiếp theo, bạn cần chuyển sang tab Cài đặt chung trong cài đặt plugin.

Từ đây, giờ đây bạn có thể bật các tính năng như phóng to hình ảnh sản phẩm WooCommerce, hình thu nhỏ, thiết bị di động, trang đính kèm, trang danh mục sản phẩm, v.v.

Tất cả những gì bạn cần làm chỉ đơn giản là đánh dấu vào các ô bên cạnh các tùy chọn này.


Bạn cũng có thể loại bỏ hiệu ứng hộp đèn để người dùng có thể thu phóng hình ảnh một cách mượt mà.

Tuy nhiên, bạn sẽ cần phiên bản Pro của plugin cho tính năng này.


Nếu bạn không xóa hộp đèn cho hình ảnh, thì bạn cần cuộn xuống tùy chọn 'Bật bên trong hộp đèn' và chọn hộp bên cạnh.

Lưu ý: Bạn có thể thấy các hộp đèn được hỗ trợ để đảm bảo rằng tính năng thu phóng hoạt động tốt bên trong hộp đèn trên trang web của bạn.


Khi bạn đã điều chỉnh xong cài đặt, đừng quên nhấp vào nút 'Lưu thay đổi' để lưu cài đặt của bạn.

Thu phóng phóng to hiện sẽ được bật cho các sản phẩm WooCommerce.

Bạn có thể truy cập cửa hàng trực tuyến của mình để kiểm tra tính năng thu phóng của chúng tôi.


Tuy nhiên, nếu bạn muốn bật tính năng thu phóng hình ảnh trên các bài đăng và trang WordPress, bạn cần thực hiện theo bước bên dưới.

Theo mặc định, tính năng thu phóng phóng to không được bật cho hình ảnh trên các bài đăng và trang của bạn. Bạn cần thực hiện thủ công sau khi thêm hình ảnh vào nội dung của mình.

Trước tiên, bạn cần mở một bài đăng mà bạn muốn chỉnh sửa trong trình chỉnh sửa khối.

Tiếp theo, bạn cần tải một hình ảnh lên bài đăng đó từ thư viện phương tiện hoặc máy tính của bạn.

Khi bạn làm điều đó, chỉ cần nhấp vào hình ảnh để mở bảng 'Cài đặt khối' ở góc bên phải của màn hình.

Từ đây, chỉ cần chuyển đến tab 'Kiểu' và nhấp vào nút 'Có Thu phóng' để áp dụng thu phóng phóng đại cho hình ảnh của bạn.


Sau đó, chỉ cần nhấp vào nút 'Cập nhật' hoặc 'Xuất bản' ở trên cùng để lưu cài đặt của bạn.

Tính năng thu phóng sẽ trông như thế này trên trang web của bạn:


Lưu ý: Bạn sẽ cần lặp lại bước này mỗi lần muốn thêm hiệu ứng thu phóng vào một hình ảnh riêng lẻ.

Chúng tôi khuyên bạn nên sử dụng hình ảnh chất lượng cao để tính năng thu phóng trông đẹp mắt. Hình ảnh chất lượng cao thường có kích thước tệp lớn hơn và mất nhiều thời gian hơn để tải, điều này sẽ ảnh hưởng đến tốc độ và hiệu suất trang web của bạn.

Để giải quyết vấn đề này, bạn cần tối ưu hóa hình ảnh của mình cho web trước khi tải chúng lên WordPress.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm thu phóng phóng đại cho hình ảnh trong WordPress. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách tối ưu hóa hình ảnh cho các công cụ tìm kiếm và các lựa chọn hàng đầu của chúng tôi về các plugin nén hình ảnh tốt nhất.