Cách hiển thị hình ảnh kích thước đầy đủ trong WordPress

Tác giả NetworkEngineer, Tháng hai 26, 2021, 10:26:04 AM

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

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

Cách hiển thị hình ảnh kích thước đầy đủ trong WordPress


Bạn có muốn tìm hiểu cách hiển thị hình ảnh kích thước đầy đủ trong WordPress không?

Phiên bản mới nhất của WordPress tự động thay đổi kích thước hình ảnh lớn để cải thiện hiệu suất. Nhưng đôi khi bạn có thể cần hiển thị hình ảnh với kích thước lớn hơn.

Trong hướng dẫn này, mình sẽ chia sẻ bốn cách khác nhau để hiển thị hình ảnh kích thước đầy đủ trên trang web WordPress của bạn.

1. Tại sao WordPress lại mở rộng quy mô hình ảnh lớn?

Các phiên bản trước của WordPress cho phép người dùng tải lên hình ảnh với kích thước rất lớn.

Nhưng điều đã xảy ra là những người mới bắt đầu sử dụng WordPress đã tải lên những hình ảnh đơn giản là quá lớn đối với web hiện đại. Hình ảnh lớn dẫn đến tốc độ tải trang web chậm và hiệu suất kém.

Để khắc phục sự cố này, bản cập nhật WordPress 5.3 đã thay đổi cách WordPress xử lý hình ảnh rất lớn.

Ví dụ: nếu bạn tải lên một hình ảnh có kích thước 5000px x 7000px, thì WordPress sẽ thay đổi kích thước hình ảnh thành 2560px và chia tỷ lệ chiều rộng để khớp với kích thước ban đầu.

Giờ đây, khi người dùng truy cập trang có hình ảnh lớn trước đó, họ sẽ thấy phiên bản thu nhỏ của hình ảnh đó.

Điều này dẫn đến hiệu suất trang web được cải thiện và người dùng hạnh phúc hơn nói chung.

2. Những lý do để ngăn WordPress mở rộng hình ảnh.

Tính năng mới này hữu ích cho hầu hết chủ sở hữu trang web WordPress, nhưng một số người dùng có thể cần hiển thị hình ảnh kích thước đầy đủ.

Ví dụ: nếu bạn là nhiếp ảnh gia hoặc nghệ sĩ bán tác phẩm của mình, thì bạn có thể muốn hiển thị hình ảnh lớn hơn trên trang web của mình để khách truy cập có thể mua hoặc tải xuống.

Hoặc bạn có thể đang chạy một trang web mà hình ảnh lớn hơn là bắt buộc, như trang web ảnh hoặc trang web bán các bản in và hình ảnh tùy chỉnh.

Có thể, bạn cần một hình ảnh lớn cho hình nền trang chủ của mình lớn hơn giới hạn 2560px?

Cho dù lý do bạn muốn có hình ảnh kích thước đầy đủ là gì, mình sẽ hướng dẫn bạn cách thực hiện từng bước một.

3. Cách hiển thị hình ảnh kích thước đầy đủ trong WordPress (4 phương pháp)

Có 4 cách khác nhau để bạn có thể hiển thị hình ảnh kích thước đầy đủ trong WordPress.

Một số phương pháp hoạt động tốt hơn cho các hình ảnh đơn lẻ, trong khi các phương pháp khác tốt nhất cho toàn bộ thư viện hình ảnh.

Bạn sẽ muốn chọn phương pháp hình ảnh kích thước đầy đủ phù hợp với mục tiêu của mình.

Phương pháp 1. Lấy URL hình ảnh có kích thước đầy đủ trong WordPress.

Nếu bạn chỉ muốn sử dụng một hoặc hai hình ảnh lớn trên trang web của mình, thì giải pháp này có lẽ là tốt nhất.

Khi bạn tải một hình ảnh lên WordPress vượt quá kích thước, WordPress sẽ chia tỷ lệ hình ảnh của bạn và tạo một hình mới. Nhưng, hình ảnh gốc vẫn còn nguyên vẹn.

Để hiển thị kích thước hình ảnh gốc, bạn cần xóa '-scaled' khỏi URL hình ảnh WordPress và chèn hình ảnh vào trang web của bạn bằng liên kết đã sửa đổi.

Chỉ cần truy cập thư viện media của bạn bằng cách vào Media »Library và chọn hình ảnh lớn của bạn.


Bây giờ, tìm 'URL tập tin' của bạn trong hộp hình ảnh.

Tiếp theo, bạn sẽ muốn xóa '-scaled' ở cuối URL hình ảnh của mình.


Sau đó, bạn có thể sao chép URL của hình ảnh và chèn hình ảnh vào trang web của mình.

Lưu ý rằng bạn sẽ cần nhúng hình ảnh vào trang web của mình bằng liên kết, trừ đi phần được chia tỷ lệ.

Để làm điều này, hãy điều hướng đến một bài đăng hoặc trang bạn muốn thêm hình ảnh và nhấp vào biểu tượng '+' để thêm một khối mới.


Sau đó nhấp vào biểu tượng 'Hình ảnh' để thêm khối hình ảnh nơi bạn có thể dán URL của mình.

Nhấp vào 'Chèn từ URL', sau đó dán URL hình ảnh kích thước đầy đủ của bạn vào hộp và nhấn 'Enter'.


Sau đó, bạn sẽ cần nhấp vào 'Xuất bản' hoặc 'Cập nhật', nếu bài đăng đã xuất hiện và hình ảnh kích thước đầy đủ của bạn bây giờ sẽ có thể xem được trên trang web của bạn.

Bạn có thể làm theo cùng một quy trình này cho mọi hình ảnh kích thước đầy đủ mà bạn muốn thêm vào trang web của mình. Tuy nhiên, miễn là bạn sử dụng URL Tệp trừ 'được chia tỷ lệ', hình ảnh WordPress của bạn sẽ hiển thị ở kích thước đầy đủ.

Phương pháp 2. Tự động vô hiệu hóa tỷ lệ hình ảnh trong WordPress (với một Plugin)

Phương pháp thứ hai là sử dụng một plugin WordPress để vô hiệu hóa tỷ lệ hình ảnh trên trang web của bạn.

Plugin mình đề xuất có tên là Disable "BIG Image" Threshold. Plugin này cung cấp một trong những cách giải quyết dễ dàng nhất để hiển thị hình ảnh lớn trên trang web của bạn và nó hoàn toàn miễn phí để sử dụng.

Đầu tiên, bạn cần cài đặt và kích hoạt plugin Vô hiệu hóa ngưỡng "Hình ảnh LỚN". Để biết thêm chi tiết về cách cài đặt plugin, hãy xem hướng dẫn từng bước của mình về cách cài đặt plugin WordPress.

Khi bạn đã cài đặt và kích hoạt plugin trên trang web của mình, nó sẽ tự động loại bỏ ngưỡng hình ảnh lớn do WordPress thêm vào.

Bạn có thể tự do thêm hình ảnh mới giống như trước khi cập nhật hình ảnh WordPress.

Khi plugin này hoạt động, WordPress sẽ không thêm thuộc tính '-scaled' vào bất kỳ hình ảnh nào.

Phương pháp 3. Tự động vô hiệu hóa tỷ lệ hình ảnh lớn trong WordPress (với Đoạn mã)

Một tùy chọn khác là thêm đoạn mã vào WordPress để đạt được mục tiêu tương tự như plugin ở trên.

Nếu plugin không hoạt động vì lý do nào đó hoặc bạn không muốn cài đặt quá nhiều plugin, thì bạn có thể sử dụng phương pháp này.

Tính năng chia tỷ lệ hình ảnh WordPress mới sử dụng một bộ lọc được gọi là big_image_size_threshold.

Bạn sẽ muốn sử dụng mã sau để tắt chức năng này:

Mã nguồn [Chọn]
add_filter( 'big_image_size_threshold', '__return_false' );
Bạn cần thêm mã này vào tập tin functions.php của giao diện, trong một plugin dành riêng cho trang web hoặc bằng cách sử dụng plugin Code snippets.

Phương pháp 4: Mở Hình ảnh WordPress Kích thước Đầy đủ trong Hộp đèn

Tùy chọn cuối cùng là thêm hộp đèn hình ảnh kích thước đầy đủ vào trang web của bạn. Với giải pháp này, bạn sẽ có được điều tốt nhất của cả hai thế giới.

Bạn có thể tải các hình thu nhỏ hình ảnh nhỏ hơn trong nội dung blog, thư viện hoặc băng chuyền của mình và khi được nhấp vào, nó sẽ bật lên với hình ảnh kích thước đầy đủ của bạn.


Để làm điều này, mình khuyên bạn nên sử dụng plugin Envira Gallery. Đây là plugin thư viện hình ảnh WordPress tốt nhất trên thị trường và cho phép bạn dễ dàng thêm hiệu ứng hình ảnh hộp đèn bật lên.

Điều đầu tiên bạn cần làm là cài đặt plugin Envira Gallery. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của mình về cách cài đặt plugin WordPress.

Sau khi cài đặt và kích hoạt plugin, hãy xem hướng dẫn từng bước của mình về cách tạo thư viện hình ảnh trong WordPress với hiệu ứng hộp đèn.

Hãy nhớ rằng trước khi tải lên hình ảnh ở kích thước đầy đủ cho thư viện của mình, bạn cần tắt tính năng chia tỷ lệ hình ảnh thông qua plugin hoặc các phương pháp chủ đề con ở trên.

Nếu không, hình ảnh hộp đèn của bạn sẽ sử dụng phiên bản thu nhỏ của hình ảnh.

Cuối cùng, điều quan trọng cần lưu ý là nếu bạn thêm hình ảnh có kích thước lớn, điều cần thiết là phải tối ưu hóa chúng cho web, để không làm chậm trang web của bạn.

Mình hy vọng bài viết này đã giúp bạn hiển thị hình ảnh kích thước đầy đủ trong WordPress. Bạn có thể muốn xem hướng dẫn của mình về cách tối ưu hóa hình ảnh cho SEO và lựa chọn chuyên gia của mình về 40 công cụ hữu ích để quản lý và phát triển blog của bạn.