[Thủ thuật] Lấy ảnh đầu tiên trong bài làm ảnh đại diện bài viết

Trong đợt “chuyển nhà” lần này mình gặp lỗi khi import dữ liệu từ blog cũ, đó là các ảnh mình up lên media đều không có bao gồm cả ảnh đại diện của bài viết (image thumbnail) khi bạn đặt featured image cho cho bài. Rất may là các ảnh trong bài viết hầu như mình toàn up lên imgur.com rồi mới chèn vào nên không mất nhưng featured image thì lại phải up lên mới có và mình không thể ngồi cả ngày để download và đặt lại các ảnh cho gần 300 bài viết được. Vì vậy mình tìm cách lấy chính những bức ảnh trong bài viết làm ảnh đại diện luôn và mình đã tìm được 2 cách làm nó hiển thị như thế này.

Cách 1: Sử dụng code

Trước tiên các bạn chép đoạn code dưới đây vào file function.php, đây thực chất là 1 hàm lấy link ảnh đầu tiên trong bài.

function get_first_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)) {
    $first_img = "/path/to/default.png";
  }
  return $first_img;
}

Lưu ý là chèn vào đâu cũng được nhưng phải ở thân của thẻ php trong file đó.
Sau đó bạn mở file index.php (hoặc content.php nếu có) và tìm hàm để gọi ảnh featured image cũ ra, đa phần là dùng the_post_thumbnail(). Cụ thể là đoạn code này đối với file index.php của mình.

<?php if ( has_post_thumbnail() ) { ?> 
	<?php echo '<div class="featured-thumbnail">'; the_post_thumbnail('featured',array('title' => ')); echo '</div>'; ?>
<?php } ?>

Thay đoạn đó bằng:

<img src="<?php echo get_first_image(); ?>" alt="<?php the_title(); ?>" />

Vậy là xong ở trang chủ, giờ nếu các bạn muốn khi search, khi tìm theo tag hoặc khi vào các chuyên mục (categories) cũng có ảnh thì cũng phải thay tương tự với các file archive.php, category.php, tag.php.

Cách 2: Dùng plugin

Bạn cũng có thể dung plugin để thực hiện việc lấy ảnh từ ngoài mà không cần up lên bằng plugin External URL To Post Thumbnail, tuy nhiên do mình dùng code nên cách này mình chưa thử, các bạn thử và cho ý kiến nhé!

Bài viết có tham khảo tại thachpham.com

Read english version here