Tạo Thumbnail không dùng Custom Field

• January 30, 2010
• 8 comments

Trong video lần trước tôi đã hướng dẫn các bạn cách hiển thị Thumbnail sử dụng Custom Field. Cách này theo tôi là hay nhất bởi vì bạn có toàn quyền quyết định thumbnail của bạn sẽ được hiện ra như thế nào và bạn có thể design thumbnail sao cho nó phù hợp với bài post. Tuy nhiên có những trường hợp bạn không muốn mất thời gian mà chỉ muốn WordPress tự động lầy tấm hình đầu tiên trong bài post và hiển thị nó làm thumbnail.

Đặc biệt nếu bạn làm trang web cho khách hàng họ không biết sử dụng Photoshop và cũng khó hình dung cách sử dụng Custom Field. Cho nên chúng ta có thể tạo thumbnail một cách tự động và hiển thị nó. Dưới đây là 2 cách bạn có thể sử dụng để hiển thị thumbnail mà không cần sử dụng Custom Field.

Sử dụng chức năng Image Attachment

Trong bài hướng dẫn cách tạo Content Slider tôi đã giới thiệu với bạn chức năng Image Attachment trong WordPress, trong bài này chúng ta cũng sẽ sử dụng lại chức năng này để hiển lấy hình của bài post. Cách này dành cho những khách hàng không biết chút gì về HTML, họ chỉ việc upload hình là xong.

Ban đầu bạn hãy mở trang index.php và trong WordPress Loop

<?php if(have_posts) : while(have_posts) : the_post() ?>

Gõ vào đoạn code sau

<?php
		//lấy hình ở trong post
		$args = array(
			'post_type'			=> 'attachment',
			'post_mine_type'	        => 'image',
			'numberposts'		=> -1,
			'order'			=> 'ASC',
			'post_status'		=> null,
			'post_parent'		=> $post->ID
		);

		$attachments = get_posts($args);
		if ($attachments) {
		foreach ($attachments as $attachment) {
			$thumbnail = wp_get_attachment_thumb_url($attachment->ID);
			break;
			}
		}
?>

Tiếp theo bạn chỉ việc echo biến $thumbnail ở trên ra vào thẻ <img> như sau:

<a href="<?php the_permalink(); ?>">
<img src="<?php echo $thumbnail; ?>" alt="post image" />
</a>

Cuối cùng khi muốn thêm hình vào bài viết bạn chọn add an image và chèn hình vào bài viết là xong.

Sử dung hàm preg_match

Trong cách này chúng ta sẽ không cần sử dụng chức năng upload hình như ở trên, nhưng khách hàng của bạn phải tự động chèn thẻ <img> vào bài post.

Ban đầu bạn hãy mở file functions.php trong theme của bạn ra (nếu chưa có thì tạo file functions.php) sau đó gõ đoạn code ở dưới vào.

 function thumb_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

  if(empty($first_img)){
//Bạn có thể thêm hình mặc định nếu bài post ko có hình
    $first_img = "/images/myImage.jpg";
  }
  return $first_img;
}

Lưu lại và mở tiếp file index.php và gọi hàm vừa tạo ra

<a href="<?php the_permalink();?>">
<img src="<?php echo thumb_image(); ?>" alt="thumbnail" />
</a>

Đến đây chúng ta đã có hình thumbnail rồi nhưng nó có kích thước quá lớn. Bạn có hai cách để sửa nó. Cách thứ nhất là sử dụng CSS và khai báo giá trị width của thẻ <img> với giá trị bạn muốn. Cách thứ hai là bạn sử dụng một đoạn mã có sẵn là timthumb.php bạn có thể download ở đây. Sau khi download về bạn cho nó vào thư mục theme của bạn. Trong ví dụ này tôi để nó ngang hàng với trang index.php. Và việc cuối cùng bạn cần làm là gõ đoạn code sau thay vì đoạn code trên

Nếu đoạn này có gì khó hiểu, bạn có thể xem video về phần Sidebar và Random Posts, tôi có hướng dẫn chi tiết về cách sử dụng timthumb.php

<a href="<?php the_permalink();?>">
<img src="<?php bloginfo('stylesheet_directory') ?>/timthumb.php?src=<?php echo thumb_image(); ?>&amp;h=150&amp;w=150&amp;zc=1" alt="thumbnail" />
</a>

Tất nhiên với giá trị h=150&w=150 thay bằng giá trị bạn muốn. Vậy là xong! nếu có câu hỏi gì hãy post dưới phần comment

Kết luận

Cả hai cách trên đều có thể sử dụng tốt trong mọi trường hợp, nhưng mỗi cách đều có điểm mạnh điểm yếu khác nhau, tùy từng trường hợp bạn nên chọn cách phù hợp cho mình. Tuy nhiên để có toàn quyền quyết định bạn nên sử dụng Custom Field là cách hay nhất bây giờ.