01/10/2018, 17:31

Lấy thumbnail của bài post

Mỗi bài post có hỗ trợ Featured Image để chúng ta thiết lập ảnh mặc định cho bài post của mình hay còn gọi là thumbnail. Để thấy rõ hơn chức năng này, chúng ta login vào phía administrator -> Posts -> Add new. Kéo xuống cuối góc phải màn hình, chúng ta sẽ thấy Featured Image. Nhấn vào ...

Mỗi bài post có hỗ trợ Featured Image để chúng ta thiết lập ảnh mặc định cho bài post của mình hay còn gọi là thumbnail. Để thấy rõ hơn chức năng này, chúng ta login vào phía administrator -> Posts -> Add new. Kéo xuống cuối góc phải màn hình, chúng ta sẽ thấy Featured Image.

Nhấn vào link tên Set featrued image để thiết lập thumbnail cho bài post.

Nhấn vào link tên Remove featured image để loại thumbnail cho bài post.

Sau khi đã Set featured image thì dùng hàm the_post_thumbnail() để lấy thumbnail đó ra, code minh họa:

<?php
if(has_post_thumbnail()) {
       the_post_thumbnail();
} else {
       echo '<img src="'.get_bloginfo("template_url").'/images/goc_kinh_nghiem_logo.png" />';
}
?>

Chú ý: đoạn code trên phải được đặt trong vòng lặp (hay còn gọi là loop)

Giải thích: đoạn code trên ngụ ý như sau

  • Kiểm tra xem bài post có được thiết lập feature image không.
  • Nếu có dùng hàm the_post_thumbnail() để in thumbnail đó ra màn hình.
  • Ngược lại, nếu không có set featured image cho bài post, sẽ in ra màn hình image có tên là goc_kinh_nghiem_logo.png

Trường hợp bạn không muốn in thumbnail ra màn hình, mà bạn muốn trả về một chuỗi string để thuận tiện cho việc thao tác code trong PHP thì bạn dùng hàm  get_the_post_thumbnail() thay cho hàm the_post_thumbnail() ở trên.

Mở rộng

Điều chỉnh kích thước của thumbnail

WordPress hỗ trợ 4 loại kích thước cho thumbnail như sau:

  • thumbnail
  • medium
  • large
  • full

Kích thước cụ thể của mỗi loại trên được thiết lập ở Administrator -> Settings ->Media. Mặc định là thumbnail, ngoài ra chúng ta có thể customize kích thước thumbnail tùy ý, cách dùng như sau:

the_post_thumbnail();                  // không có paramter -> tự hiểu là thumbnail

the_post_thumbnail('thumbnail');       // Thumbnail (mặc định tối đa là 150px x 150px)
the_post_thumbnail('medium');          // Medium (mặc định tối đa là 300px x 300px)
the_post_thumbnail('large');           // Large (mặc định tối đa là 640px x 640px)
the_post_thumbnail('full');            // Full (bằng kích thước góc của image được upload lên)

the_post_thumbnail( array(100,100) );  // Customize một kích thước bất kì cho thumbnail

Thêm thuộc tính cho thumbnail

Ngoài ra hàm the_post_thumbnail() còn hỗ trợ chúng ta thêm css vào thumbnail muốn hiển thị, code như sau:

<?php the_post_thumbnail('thumbnail', array('class' => 'showleft')); ?>

Hoặc các thuộc tính của thẻ img như là src, alt hoặc title

$default_attr = array(
			'src'	=> $src,
			'class'	=> "attachment-$size",
			'alt'	=> trim(strip_tags( wp_postmeta->_wp_attachment_image_alt )),
			'title'	=> trim(strip_tags( $attachment->post_title )),
		);

Góc Kinh Nghiệm chúc các bạn thành công! :grin:


0