Sử dụng hình ảnh trong bài để làm thumbnail

Bào viết đáp ứng theo yêu cầu của bạn CAA trong bài viết “Đùa” với wordpress theme. Mình nghĩ rằng bài viết này sẽ có ích cho khá nhiều bạn.

Trước tiên, mình mời mọi người tìm hiểu về vấn đề lấy hình ảnh trong nội dung bài viết trước. Đây là bài viết lập trình liên quan đến việc lấy hình ảnh trong nội dung website. Mình nghĩ là bài viết này sẽ có ích cho các bạn quan tâm đến vấn đề này ngoài wordpress.

Các bạn cứ giành thời gian đọc, mình sẽ đợi….

Lấy hình ảnh trong bài làm thumnail với wordpress

Chúng ta có nhiều cách để lấy được phần nội dung này. Cách đơn giản nhất theo mình là sử dụng tính năng Custom Fields để làm. Tuy nhiên, tùy theo giao diện mà Custom Field của bạn có phát huy hiệu quả hay không. Vấn đề sử dụng Custom Field tạm thời mình dừng ở đây vì nếu bàn sâu quá thì sẽ trở thành một bài về Custom Field mất. Bạn nào cần nghiên cứu kĩ hơn về nó thì chúng ta sẽ có nó trong một bài khác nhé.

Sau đây, mình xin trình bày một phương án khác đơn giản hơn và thuận tiện hơn để làm việc này. Đó là chúng ta sẽ tìm kiếm trong bài viết những file đính kèm dạng hình ảnh để làm thumbnail.

Để hình ảnh được đẹp và phù hợp với giao diện khi thu nhỏ hoặc phóng to, mình sử dụng phpThumb. Các bạn có thể download về và đặt tại thư mục theme_cua_ban/phpThumb.

Tiếp theo bạn mở file functions.php nằm trong thư mục theme của bạn và thêm vào đoạn code sau:

[code language=”php”]

/********************************************************************
Get image attach
********************************************************************/
function img($width,$height) {
global $post;
$custom_field_value = get_post_meta($post->ID, ‘in_image’, 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 ‘post_title.’" />’;
}
elseif ($custom_field_value_2 == true) {
print ‘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 ‘post_title.’" />’;
}
}
else {
$img = get_template_directory_uri();
$img_url = parse_url($img,PHP_URL_PATH);
print ‘post_title.’" />’;
}
}
function img2($width,$height) {
global $post;
$custom_field_value = get_post_meta($post->ID, ‘in_image’, 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 ‘post_title.’" />’;
}
elseif ($custom_field_value_2 == true) {
print ‘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 ‘post_title.’" />’;
}
}
else {
$img = get_template_directory_uri();
$img_url = parse_url($img,PHP_URL_PATH);
print ‘post_title.’" />’;
}
}

[/code]

Hai hàm trên có tác dụng tìm kiếm và phân tích, lấy hình ảnh thích hợp, kết hợp với bộ thư viện phpThumb để tạo ra các hình ảnh theo yêu cầu của bạn.

Tiếp theo, bạn mở file index.php cũng trong thư mục theme của bạn, tìm đến đoạn tiêu đề

[code language=”php”] <?php the_title(); ?>
[/code]

Tùy theo từng cấu trúc của theme mà bạn tìm vị trí thích hợp chèn đoạn này vào:

[code language=”php”] <p><a href="<?php the_permalink() ?>" class="thumb3" title="Chuyển đến bài viết <?php the_title_attribute(); ?>"><?php img(510,120); ?></a></p>
[/code]

Trong hàm img() là giá trị chiều rộng và chiều cao bạn muốn tạo. Nếu muốn đẹp hơn cho hình ảnh này, bạn có thể mở file style.css để thiết kế thêm class thumb3 cho đẹp.

P/S : Đoạn code này mình lấy trực tiếp từ trong blog ra nên có thể sẽ có một số thành phần thừa nhưng không ảnh hưởng đến việc lấy hình ảnh của bạn. Phát triển và tùy biến đoạn code này mình sẽ trả lời dần trong comment.