Home » Vọc web » Tùy chỉnh thumbnail (hình thu nhỏ) cho bài viết wordpress

Tùy chỉnh thumbnail (hình thu nhỏ) cho bài viết wordpress

Khi sử dụng wordpress thì một phần cực kỳ quan trọng bạn phải hiểu rõ. Đó chính là cách blog tạo ảnh thumbnail như thế nào. Cách thêm bớt một kích thước ảnh bất kỳ như thế nào. Kiểm soát số lượng thumbnail tạo ra trên hosting. Tất cả đều rất quan trọng về lâu dài.

1 Tại sao phải tùy chỉnh thumbnail

Như bạn thấy, một blog thường có nhiều cách hiển thị bài viết và thường thì đi kèm một hình thu nhỏ (thumbnail). Ví dụ vị trí bài viết ở khu vực chính sẽ dùng hình lớn hơn. Bài viết ở sidebar hoặc bài viết liên quan thì hình ảnh sẽ nhỏ hơn. Và để hình ảnh được hiển thị đúng ý đồ, rõ nét, không bị bóp méo và quan trọng hơn là dung lượng phải nhẹ, chúng ta phải tạo ra nhiều phiên bản của hình ảnh đã tải lên.
Khi bạn post một bài viết và tải hình ảnh vào bài viết thì wordpress sẽ tự động tạo ra cho chúng ta tất cả các kích thước đã được định nghĩa. Do đó khi bạn tải lên một hình, rất có thể wordpress sẽ tạo ra thêm 4 5 thậm chí hơn 10 hình nữa với đủ loại kích thước.

Nếu bạn chỉ dùng một themes và blog của bạn thật đơn giản thì ko sao. Nhưng nếu bạn nhiều lần thay đổi themes hoặc cài rất nhiều plugin liên quan đến bài viết nhất định số lượng thumbnail được tạo ra sẽ rất nhiều. Nếu bạn không biết cách kiểm tra, loại bỏ các kích thước không dùng đến thì số hình ảnh này sẽ ngày một nhiều. Và đến một ngày nào đó hosting của bạn sẽ chứa một lượng hình ảnh khổng lồ. Và bạn thấy đấy, rất tốn tài nguyên và mỗi lần backup dữ liệu là cả một quá trình.

2 Cách tùy chỉnh kích thước thumbnail

Mặc định khi bạn cài đặt website, wordpress sẽ có 3 kích thước cài đặt sẵn. Bạn hãy vào trang quản lý > Cài đặt > Media. Ở đây sẽ có thiết lập kích thước cho 3 cỡ : Thu nhỏ (Thumbnail size), Trung bình (Medium size) và Cỡ lớn (Large size). Bạn có thể tùy chỉnh tùy ý kích thước phù hợp với cách thiết kế của bạn. Nếu không sử dụng có thể set “0” từng cỡ hoặc tất cả.

Thumnail mặc định

Khi bạn cài themes, gần như tất cả themes đều sẽ có thiết lập riêng một hoặc nhiều kích thước khác.
Như vậy, khi bạn cài đặt site và một themes mới thì mặc định sẽ có ít nhất 4 hình ảnh mới được tạo thêm mỗi khi bạn upload 1 ảnh.

Code để tạo ra các kích thước ảnh được qui định trong file functions.php của themes. Ví dụ như bên dưới.

add_image_size( 'canxem-thumbnail', 100, 100, true );
add_image_size( 'canxem-medium', 310, 220, true );
add_image_size( 'canxem-large', 560, 330, true );

Chúng ta có thể tùy ý điều chỉnh kích thước theo nhu cầu. Có thể thêm bớt tùy ý, với mỗi dòng là một tên thuộc tính khác nhau.
Chú ý mã này thường nằm dưới dòng add_theme_support( ‘post-thumbnails’ ); trong file functions.php. Nếu không có bạn có thể tự thêm vào trước các dòng add_image_size.

3 Chèn một thumbnail bất kỳ vào website

Để chèn 1 thumbnail vào website, ta dùng code sau chèn vào nơi muốn hiển thị. Thường nó sẽ nằm trong các loop tạo danh sách bài viết.

<?php the_post_thumbnail( 'Ten thuoc tinh' ); ?>

Để chèn hình gốc (hình tải lên không bị cắt nhỏ) ta dùng code

<?php the_post_thumbnail( 'full' ); ?>

Thuộc tính full sẽ không cần khai báo trong file functions.

4 Vô hiệu hóa các kích thước ảnh không cần thiết.

Vì một lý do nào đó ví dụ thay đổi themes hoặc gỡ bỏ plugin nhưng các size ảnh lạ vẫn cứ được tạo ra. Lúc này chúng ta cần vô hiệu hóa việc tự động tạo ra một size bất kỳ bằng cách dùng code.

function remove_default_image_sizes( $sizes ) {
  unset( $sizes[ 'thumbnail' ] );
  unset( $sizes[ 'medium'] );
  unset( $sizes[ 'large'] );
  unset( $sizes[ '712x410'] );
  unset( $sizes[ '768x0'] );
  return $sizes;
}

Ở đây chúng ta có thể chỉ đích danh tên thuộc tính cần loại bỏ. Hoặc nếu không biết tên thuộc tính ta có thể ghi ra kích thước cần loại bỏ. Ví dụ 712×410 cho kích thước ngangg 712, rộng 410; 768×0 cho tất cả ảnh có kích thước ngang 768, rộng tùy ý,…

5 Thiết lập lại thumbnail khi thay đổi themes

Khi bạn thay đổi theme hoặc plugin, nếu may mắn các kích thước hình ảnh gần giống như theme cũ thì không sao. Nhưng nếu nó khác nhiều chúng ta cần phải tạo lại thumbnail cho các bài viết cũ.
Có 2 cách để làm việc này.
Một là chúng ta vào sửa bài viết, loại bỏ hình ảnh cũ, tải lên hình ảnh mới. Làm cho từng bài viết để website cắt lại các hình ảnh theo kích thước mới phù hợp. Cách làm này sẽ rất là tốn thời gian nhé.

Cách thứ 2 dễ dàng và nhanh hơn nhiều, đó là dùng plugin Regenerate Thumbnails.
Cài đặt plugin, vào cài đặt > Regenerate Thumbnails > Bấm vào nút Regenerate thumbnails.
Chỉ vậy thôi thì tất cả các hình ảnh đã dùng trước đó sẽ được tạo ảnh thumbnail theo theme mới.

Thumbnail generate

Hi vọng bài viết giúp các bạn hiểu rõ cách hoạt động và quản lý thumbnail trong wordpress. Mọi vấn đề xin để lại bình luận bên dưới.


Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *