Tạo thumbnail cho blog wordpress và thesis theme bằng phpthumb

Trong bài viết này Tính xin hướng dẫn các bạn cách tạo ảnh thumbnail (ảnh đại diện) cho wordpress và thesis theme bằng cách dùng phpthump.

Tại Sao Tôi Chọn PhpThump?

Có lẽ sẽ có nhiều bạn thắc mắc tại sao tôi lại chọn php thump để tạothumbnail cho blog của mình trong khi bản thân wordpress và thesis theme đã cung cấp chức năng tạo thumbnail? Nhất là chức năng thumnail của thesis lại khá đẹp mắt và có nhiều tùy chọn.

Đó là vì chức năng thumnail mặc định của cả wordpress lẫn Thesis theme điều còn khá nhiều lỗi, nhất là chức năng tự resize ảnh. Mỗi lần muốn tạo thumbnail phải làm một cách khá thủ công, không được tự động như phpthump. Tốc độ load thumbnail khá chậm đặc biệt là thesis theme, nếu host không tương thích, tốc độ load trang sẽ chậm đi một cách kinh khủng.

Hướng dẫn tạo ảnh thumbnail cho blog bằng phpthump

các bạn thực hiện theo từng bước để không xót bước nào nhé.

Bước 1: Tạo function (chức năng)

Bạn thêm đoạn code sau vào file function của theme bạn đang dùng. Nếu là Thesis Theme thì chèn vào file custom_function.php.

 /********************************************************************
Get image attach
********************************************************************/
function img($width,$height) {
	global $post;
	$custom_field_value = get_post_meta($post->ID, 'thesis_post_image', true);
	$custom_field_value_3 = get_post_meta($post->ID, 'thesis_thumb', true);
	$custom_field_value_2 = get_post_meta($post->ID, 'out_image', true);
	$attachments = get_children( array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'numberposts' => 1) );
	if ($custom_field_value == true) {
	$img_url = parse_url($custom_field_value,PHP_URL_PATH);
	print '<img src="'.get_template_directory_uri().'/custom/phpthumb/phpThumb.php?src='.$img_url.'&amp;w='.$width.'&amp;h='.$height.'&amp;zc=T&amp;q=70" alt="'.$post->post_title.'" />';
	}
	elseif ($custom_field_value_3 == true) {
	$img_url = parse_url($custom_field_value_3,PHP_URL_PATH);
	print '<img src="'.get_template_directory_uri().'/custom/phpthumb/phpThumb.php?src='.$img_url.'&amp;w='.$width.'&amp;h='.$height.'&amp;zc=T&amp;q=70" alt="'.$post->post_title.'" />';
	}
	elseif ($custom_field_value_2 == true) {
	print '<img src="'.$custom_field_value_2.'" alt="'.$post->post_title.'" />';
	}
	elseif ($attachments == true) {
		foreach($attachments as $id => $attachment) {
		$img = wp_get_attachment_image_src($id, 'full');
		$image = $image[0];
		$img_url = parse_url($img[0], PHP_URL_PATH);
		print '<img src="'.get_template_directory_uri().'/custom/phpthumb/phpThumb.php?src='.$img_url.'&amp;w='.$width.'&amp;h='.$height.'&amp;zc=T&amp;q=70" alt="'.$post->post_title.'" />';
		}
	}
	else {
		$img = get_template_directory_uri();
		$img_url = parse_url($img,PHP_URL_PATH);
		print '<img src="'.get_template_directory_uri().'/custom/phpthumb/phpThumb.php?src='.$img_url.'/custom/images/no_image.jpg&amp;w='.$width.'&amp;h='.$height.'&amp;zc=T&amp;q=70" alt="'.$post->post_title.'" />';
	}
}

Bước 2: Chèn code php gọi ảnh thumbnail vào vị trí bạn muốn hiển thị.

• Đối với theme thông thường

Với các theme thông thường, bạn có thể chèn ảnh thumbnail vào bất kì vị trí nào bạn thích bằng cách chèn vào đó đoạn code sau.

 <div class="thumb">
	<a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title_attribute(); ?>"><?php img(100,100) ?></a>
    </div>

• Đới với Thesis Theme

Nếu bạn đang dùng thesis theme bạn có thể tham khảo 2 vị trí mà mọi người thường chèn vào nhất đó là ở bài viết và ở teaster.

Tạo thumbnail ở bài viết.

Chèn vào file custom_function.php đoạn code sau để tạo ra chức năng này.

add_action('thesis_hook_before_post', 'thumb_teaser2');
function thumb_teaser2() { ?>
	<div class="thumb1">
	<a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title_attribute(); ?>"><?php img(245,100) ?></a>
    </div>
<?php
}

Tạo thumbnail ở teaster.
Chèn vào file custom_function.php đoạn code sau để tạo ra chức năng này.

 /********************************************************************
Add picture teaser
********************************************************************/
add_action('thesis_hook_after_teaser_headline', 'thumb_teaser');
function thumb_teaser() { ?>
	<div class="thumb">
	<a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title_attribute(); ?>"><?php img(100,100) ?></a>
    </div>
<?php
}

Ngoài ra bạn có thể tham khảo theme các hook của thesis theme để có thể chèn vào những vị trí mà bạn cảm thấy hợp lý hơn.

Bước 3: Upload phpthump lên host

Cuối cùng là upload phpthump lên host trong thư mục custom của thesis theme bạn nhé. Bạn có thể tìm trên mạng hoặc download tại đây.

Một số lưu ý

• Bài viết này học hỏi từ bài tự lấy ảnh trong bài viết của Hutruc’s Blog.
• Bạn có thể tạo thêm css để trang trí cho ảnh thumbnail của mình đẹp hơn. thông qua thẻ thumb
• Bạn có thể thay đổi kích cỡ ảnh thumbnail bằng một giá trị khác cho phù hợp với blog bạn bằng cách thay thế số (100,100) (chiều rộng-chiều cao) bằng một cặp số khác.
• Php thump có thể lấy ảnh đầu tiên trong bài viết, ảnh ngoài, hoặc ảnh trong post img làm thumbnail. Tuy nhiên để sử dụng tốt nhất, bạn nên chọn ảnh thumnail của mình sao đó up lên host của mình bằng các click button add ad image.

Tagged as: phpthump, pic thumbnail, Thesis, thumbnail, wordpress tips