Truy cập trang chính thức của Công tyCông ty Marketing Online & Thiết kế Website MELYWEB

Hướng dẫn cách tạo thumbnail cho bài viết trong blog WordPress

Vấn đề tạo thumbnail cho bài viết hiển thị ngoài trang chủ hoặc ngoài chuyên mục luôn là một vấn đề lớn. Đa số theme wordpress đều có tính năng này, nhưng nếu bạn là một người lập trình wordpress theme thì chính bạn phải tự tạo cái này.

thumbnail-wordpress

Mình viết bài này do mình đã mất không ít thời gian để tìm hiểu về vấn đề này, cuối cùng mình cũng tìm ra và chia sẽ cho mọi người cùng nhau tham khảo, (đơn giản là mình note lại để lần sau còn dùng đó mà ). Mọi vấn đề của mình được giải quyết tại TimThumb PHP Script Released.

Cách tạo thumbnail cho bài viết trong blog WordPress không dùng plugin

Đầu tiên các bạn download file timthumb.php về và đặt tại root của theme wordpress.

Sau đó thêm đoạn code sau vào file functions.php của theme:

<?php
 function getImage($num) {
 global $more;
 $more = 1;
 $content = get_the_content();
 $count = substr_count($content, '<img');
 $start = 0;
 for($i=1;$i<=$count;$i++) {
 $imgBeg = strpos($content, '<img', $start);
 $post = substr($content, $imgBeg);
 $imgEnd = strpos($post, '>');
 $postOutput = substr($post, 0, $imgEnd+1);
 $image[$i] = $postOutput;
 $start=$imgEnd+1;
$cleanF = strpos($image[$num],'src="')+5;
 $cleanB = strpos($image[$num],'"',$cleanF)-$cleanF;
 $imgThumb = substr($image[$num],$cleanF,$cleanB);
}
 if(stristr($image[$num],'<img')) { echo $imgThumb; }
 $more = 0;
 }
 ?>

Bước cuối cùng là hiển thị hình ảnh thumbnail ra ngoài, các bạn thêm đoạn code dưới đây vào vòng lặp the_loop của theme, ví dụ nếu bạn muốn hiển thị ngoài trang chủ thì thêm vào index.php, hiển thị ở chuyên mục thì thêm vào archive.php, hoặc bất cứ vị trí nào bạn muốn nó hiển thị ra.

<div>
 <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
 <img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php getImage('1'); ?>&w=150&h=150&zc=1">
 </a>
 </div>

Chỉ cần đơn giản vậy thôi bạn có thể hiển thị thumbnail cho bài viết được rồi, chúc các bạn thành công!

Add a Comment