4 cách hiển thị ảnh full size trong WordPress

4 giờ ago, Hướng dẫn WordPress, Views
4 cách hiển thị ảnh full size trong WordPress

4 Cách Hiển Thị Ảnh Full Size Trong WordPress

WordPress là một nền tảng tuyệt vời để xây dựng website, blog cá nhân hoặc trang tin tức. Tuy nhiên, một trong những vấn đề mà nhiều người dùng WordPress gặp phải là cách hiển thị ảnh full size một cách hiệu quả. Mặc định, WordPress tự động tạo ra nhiều kích cỡ ảnh thumbnail, medium, large để tối ưu hóa tốc độ tải trang. Nhưng đôi khi, bạn muốn hiển thị ảnh với kích thước gốc để giữ được chi tiết và chất lượng tốt nhất. Bài viết này sẽ hướng dẫn bạn 4 cách để hiển thị ảnh full size trong WordPress.

1. Sử Dụng Liên Kết Trực Tiếp Đến File Ảnh

Đây là cách đơn giản nhất để hiển thị ảnh full size trong WordPress. Về cơ bản, bạn sẽ chèn một liên kết trực tiếp đến file ảnh gốc trong bài viết hoặc trang của mình.

Các bước thực hiện:

  1. Đăng nhập vào trang quản trị WordPress của bạn.
  2. Tải ảnh bạn muốn hiển thị full size lên Thư viện Media (Media Library).
  3. Chọn ảnh bạn vừa tải lên.
  4. Ở bên phải màn hình, bạn sẽ thấy thông tin chi tiết về ảnh, bao gồm URL của file ảnh gốc. Sao chép URL này.
  5. Trong bài viết hoặc trang bạn muốn chèn ảnh, sử dụng trình soạn thảo văn bản (Text Editor) thay vì Visual Editor.
  6. Chèn mã HTML sau, thay thế “URL_ẢNH_CỦA_BẠN” bằng URL bạn vừa sao chép:
    <img src="URL_ẢNH_CỦA_BẠN" alt="Mô tả ảnh">
  7. Lưu bài viết hoặc trang của bạn.

Ưu điểm:

  • Đơn giản, dễ thực hiện.
  • Không cần cài đặt plugin.

Nhược điểm:

  • Không thân thiện với người dùng không quen thuộc với HTML.
  • Không có nhiều tùy chỉnh về giao diện.

2. Sử Dụng Trình Soạn Thảo WordPress (Gutenberg)

Trình soạn thảo WordPress Gutenberg cung cấp một cách trực quan hơn để chèn ảnh và chọn kích thước mong muốn.

Các bước thực hiện:

  1. Trong bài viết hoặc trang bạn muốn chèn ảnh, thêm một block “Image”.
  2. Tải ảnh lên hoặc chọn từ Thư viện Media.
  3. Sau khi ảnh được chèn, chọn block ảnh.
  4. Ở bên phải màn hình, trong mục “Image size”, bạn có thể chọn kích thước “Full size”. Nếu bạn không thấy tùy chọn “Full size”, hãy kiểm tra cài đặt Media của bạn (Settings -> Media) để đảm bảo kích thước full size được giữ lại.
  5. Lưu bài viết hoặc trang của bạn.

Ưu điểm:

  • Dễ sử dụng với giao diện trực quan.
  • Không cần kiến thức về HTML.

Nhược điểm:

  • Có thể không có tùy chọn “Full size” nếu cài đặt Media không chính xác.
  • Ít tùy chỉnh nâng cao.

3. Sử Dụng Plugin WordPress

Có rất nhiều plugin WordPress được thiết kế để cải thiện cách hiển thị ảnh, bao gồm khả năng hiển thị ảnh full size khi nhấp vào thumbnail.

Một số plugin phổ biến:

  • FooGallery: Cho phép tạo các gallery ảnh đẹp mắt với nhiều tùy chọn, bao gồm lightboxes để hiển thị ảnh full size.
  • Meow Gallery: Một plugin gallery mạnh mẽ với nhiều layout và tùy chọn, bao gồm lightbox.
  • Simple Lightbox: Plugin đơn giản nhưng hiệu quả để thêm chức năng lightbox cho ảnh.

Ví dụ sử dụng Simple Lightbox:

  1. Cài đặt và kích hoạt plugin Simple Lightbox.
  2. Sau khi kích hoạt, plugin sẽ tự động thêm chức năng lightbox cho tất cả ảnh có liên kết đến file ảnh gốc.
  3. Để sử dụng, chèn ảnh vào bài viết hoặc trang như bình thường, đảm bảo rằng liên kết ảnh trỏ đến file ảnh full size (trong cài đặt “Link to” khi chèn ảnh).
  4. Khi người dùng nhấp vào ảnh, ảnh full size sẽ hiển thị trong một cửa sổ lightbox.

Ưu điểm:

  • Cung cấp nhiều tùy chọn tùy chỉnh và tính năng nâng cao.
  • Lightbox giúp cải thiện trải nghiệm người dùng.

Nhược điểm:

  • Cần cài đặt và cấu hình plugin.
  • Một số plugin có thể làm chậm website nếu không được tối ưu hóa tốt.

4. Sử Dụng Mã Tùy Chỉnh (Custom Code) Trong functions.php

Nếu bạn là một nhà phát triển hoặc quen thuộc với việc chỉnh sửa code WordPress, bạn có thể sử dụng mã tùy chỉnh trong file `functions.php` của theme để tự động thay đổi liên kết ảnh thành liên kết đến file full size.

Cảnh báo:

Việc chỉnh sửa file `functions.php` có thể gây ra lỗi nếu không được thực hiện đúng cách. Sao lưu file `functions.php` trước khi thực hiện bất kỳ thay đổi nào. Tốt nhất là sử dụng một theme con (child theme) để tránh mất các thay đổi khi cập nhật theme.

Mã ví dụ:

Thêm đoạn code sau vào file `functions.php` của theme con của bạn:


function filter_image_link( $content ) {
  $content = preg_replace(
    array('{]*>}i'),
    array(''),
    $content
  );
  return $content;
}
add_filter('the_content', 'filter_image_link');

Đoạn code này sử dụng regular expression để tìm các liên kết ảnh mặc định của WordPress (liên kết đến trang đính kèm) và thay thế chúng bằng liên kết trực tiếp đến file ảnh. Tuy nhiên, cách này có thể không hoạt động hoàn hảo với tất cả các theme và cấu hình, và cần được điều chỉnh cho phù hợp với tình huống cụ thể.

Cách khác, đơn giản hơn nếu bạn muốn hiển thị ảnh full size trong lightbox khi click:


function add_lightbox_to_images( $content ) {
    global $post;
    if ( ! is_singular() ) return $content;

    $pattern ="/<img/i";
    $replacement = 'ID . '"$6><img';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}
add_filter('the_content', 'add_lightbox_to_images');

Đoạn code trên sẽ tự động thêm thuộc tính `data-lightbox` vào các liên kết ảnh, cho phép sử dụng lightbox (nếu theme hoặc plugin lightbox đã được cài đặt). Bạn cần đảm bảo rằng theme hoặc một plugin hỗ trợ lightbox (ví dụ như Simple Lightbox, PhotoSwipe, v.v.) để code này hoạt động.

Ưu điểm:

  • Tùy chỉnh cao, có thể điều chỉnh chính xác theo nhu cầu.
  • Không cần cài đặt plugin.

Nhược điểm:

  • Yêu cầu kiến thức về code.
  • Có thể gây ra lỗi nếu không được thực hiện đúng cách.
  • Cần cẩn thận khi cập nhật theme.

Kết luận

Có nhiều cách để hiển thị ảnh full size trong WordPress, từ cách đơn giản nhất là sử dụng liên kết trực tiếp đến file ảnh, đến cách phức tạp hơn là sử dụng mã tùy chỉnh. Tùy thuộc vào trình độ kỹ thuật và nhu cầu cụ thể, bạn có thể chọn cách phù hợp nhất với mình. Hãy nhớ sao lưu website trước khi thực hiện bất kỳ thay đổi quan trọng nào, đặc biệt là khi chỉnh sửa code.

, , , ,

..