Thêm hình thumbnail cho bài viết dễ dàng với plugin fw-post-image – Phần 1

Sau khi Việt Coding chuyển sang dùng theme Thesis, có nhiều comment hỏi về cách thêm hình đại diện (thumbnail) cho bài viết vì như các bạn cũng thấy là Thesis mặc định không có phần này. Thật ra, nếu chịu khó tìm kiếm, các bạn sẽ dễ dàng tìm thấy khá nhiều bài viết nói về chủ đề này như bài Tự lấy ảnh trong bài viết của Hư Trúc. Về cách hook thì khá tương đồng chỉ khác nhau ở kỹ thuật lấy hình ảnh.

Ảnh thumbnail giúp blog của bạn sinh động hơn

Đa số các bài viết khác đều sử dụng phpThumb, ở đây Việt Coding sử dụng một plugin là fw-post-image. Các bạn có thể đọc qua mô tả của tác giả:

This plugin does not work with WordPress version prior to 2.9 !
Since WordPress 2.9, you can choose which image will represent a post and will be displayed as thumbnail. This plugin allows backward compatibility for your former posts.
it filters on the_post_thumbnail() function. If no post thumbnail is defined, the plugin will get first image belonging to post. If it still doesn’t find any image, it will scan for the first image found post content.

The image will be displayed according to the arguments (size and attributes) set when calling the_post_thumbnail().

Như vậy, phương thức lấy ảnh của fw-post-image là hoàn tự động theo thứ tự ưu tiên sau:

1. Lấy ảnh ở phần Post Thumbnail mà bạn chọn khi post bài (chỉ có từ WordPress phiên bản 2.9 về sau)
2. Lấy hình ảnh đầu tiên trong bài viết
3. Quẻt toàn bộ và lấy ảnh đầu tiên trong phần nội dung bài viết.

Theo đánh giá của Việt Coding đây là một plugin khá tốt, ngoài khả năng lấy hình ảnh trong bài viết mà tác giả đã mô tả ở trên, plugin này còn có khả năng lấy được ảnh bên ngoài hosting. Chức này khá là tiện lợi cho các bạn chơi autoblog (các bạn có thể xem demo tại ADNews – Trang tin tức Tổng hợp dành cho người Việt) Tuy nhiên, nó có một nhược điểm là không tự resize được với ảnh ngoài host. Giới thiệu vậy Việt Coding nghĩ là đủ, chúng ta đi vào nội dung chính nhé.

Trước hết, các bạn download plugin và kích hoạt nó. Bước tiếp theo là hướng dẫn thêm thumbnail cho các theme thông thường và Thesis.

Phần 1: Thêm thumbnail vào theme bình thường.

Đầu tiên, chúng ta thêm đoạn code sau vào cuối tập tin Theme Functions (/wp-content/themes/theme-bạn-đang-dùng/functions.php)

[php]
< ?php if ( function_exists('add_theme_support') ) { add_theme_support('post-thumbnails'); } ?>
[/php]

Tiếp đó, chúng ta thêm đoạn code sau vào Main Index Template (/wp-content/themes/theme-bạn-đang-dùng/index.php) – nơi mà bạn muốn thumbnail hiển thị. Cái này tuỳ vào theme bạn đang dùng mà có chọn lựa thích hợp.

[php]
< ?php if ( function_exists('has_post_thumbnail') { has_post_thumbnail() ) { the_post_thumbnail(array(200,100), array('class' => ‘alignleft post_thumbnail’));
}
?>
[/php]

Bước cuối cùng là đảm bảo Stylesheet (/wp-content/themes/theme-bạn-đang-dùng/index.php) của bạn đã có khai báo định dạng cho thumbnail. Mở và kiểm tra xem đã có khai báo alignleft hay chưa. Đó là một khai báo mặc định của WordPress nên thường 99% các theme đã có sẵn, 1% còn lại sẽ không có. Vì vậy bạn có thể thêm 1 dòng khai báo vào Stylesheet như sau:

[css]
.alignleft { float:left; } /* Khai báo vị trí của thumbnail */
[/css]

Bạn có thể tuỳ chỉnh thêm như margin, padding, border,… để có một thumbnail hài hoà với các phần khác trên blog.

Đến đây đã hoàn tất, bạn thử kiểm tra lại trang index của blog đã hiển thị thumbnail chưa nào 🙂

[msg=note]Mời các bạn đón xem tiếp phần 2 của bài viết nhé. Phần 2 sẽ hướng dẫn các bạn thao tác trên Thesis theme.[/msg]