Hướng dẫn lấy hình đại diện bài viết trong wordpress

Mỗi bài viết trong webiste chúng ta thường chọn 1 hình ảnh là hình đại diện để hiển thị trên các trang hay bài viết. Hình đại diện này thường được lựa chọn kỹ càng và làm tăng giá trị về mặt thẩm mỹ & nội dung cho web.

Vì một lý do nào đó chúng ta quên upload ảnh đại diện (Feature) cho bài viết hoặc trang lúc đó thì bài viết mới sẽ hiển thị không có hình ảnh khiên bố cục web hỏng và thiếu tính chuyên nghiệp. Quá trình code và edit website nhiều mình tìm ra một giải pháp hiệu quả cho vấn đề này đó là tự động lấy hình ảnh đầu tiên trong bài viết hoặc trang làm hình đại điện.

Có nhiều plugin hỗ trợ mình giả quyết vấn đề này nhưng ở đây mình chỉ hướng dẫn dùng code. Tránh vì 1 chức năng mà cài 1 plugin vào sẽ nặng web, giảm tốc độ, có thể dẫn đến xung đột. Hãy tham khảo nhé!

1. Code lấy ảnh đầu tiên làm thumbnail wordpress

Thêm đoạn code trên vào function.php của theme nhé!

    `
      /** codfe.com - tự lấy hình đầu tiên trong bài viết làm thumbnail **/  

function auto_featured_image() {

global $post;  
if (!has_post_thumbnail($post->ID)) {  
    $attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );  
  if ($attached_image) {  
          foreach ($attached_image as $attachment_id => $attachment) {  
               set_post_thumbnail($post->ID, $attachment_id);  
          }  
     }  
}  

} // Use it temporary to generate all featured images add_action('the_post', 'auto_featured_image'); // Used for new posts add_action('save_post', 'auto_featured_image'); add_action('draft_to_publish', 'auto_featured_image'); add_action('new_to_publish', 'auto_featured_image'); add_action('pending_to_publish', 'auto_featured_image'); add_action('future_to_publish', 'auto_featured_image');

    `
  

## 2. Trường hợp bài viết không có hình ảnh

Đoạn code không hoạt động khi bài viết không có hình ảnh, do vậy đối với những trường hợp này chúng ta phải tự lấy một hình ảnh chúng ta chọn trước làm hình đại diện cho tất cả các bài viết không có bất cứ hình nào. Thêm đoạn code sau vào function để giải quyết vấn đề này nhé!

    `
      /** codfe.com - thiết lập hình ảnh làm thumbnail mặt định**/  

add_filter( 'post_thumbnail_html', 'wpsites_default_post_image' ); function wpsites_default_post_image( $html ) { if ( empty( $html ) )

$html = '![](https://https://i0.wp.com/dipigo.com/dung-hinh-anh-dau-tien-cua-bai-viet-lam-hinh-dai-dien/%3Cspan%20style=)' . trailingslashit( get_stylesheet_directory_uri() ) . 'images/default-image.png' . '" alt="enter your alt text here" />';

return $html; }

    `
  

Đoạn code trên sẽ lấy hình ảnh default-image.png trong mục images của theme đang hoạt động (hoặc child theme) làm hình đại diện. Trường hợp bạn quá lười để vào child theme chỉnh sửa upload hình vào web của mình và copy cái link thay thế vào nhé.

    `
      /** codfe.com - thiết lập hình ảnh làm thumbnail mặt định**/  

add_filter( 'post_thumbnail_html', 'wpsites_default_post_image' ); function wpsites_default_post_image( $html ) { if ( empty( $html ) )

$html = '![enter your alt text here](https://https://i0.wp.com/dipigo.com/wp-content/uploads/2020/06/Logo-dipigo.png'%20.%20')';

return $html; }

    `
  

Nhớ thay “https://dipigo.com/…” bằng link hình của bạn.

Lưu ý: Với theme Flatsome hàm the_post_thumbnail() đã bị bỏ qua khi post không có hình ảnh đại diện do đó đoạn code trên sẽ không hoạt động, các bạn có thể fix bằng cách hook nó với hàm như sau của flatsome nhé (thêm vào function.php)

    `
      /**code lay hinh anh lam dai dien **/  

function codfe_blog_post_before(){ if(has_post_thumbnail()) {

// khong lam gi ca  

} else {

return  the_post_thumbnail($image_size);     

} } add_action('flatsome_blog_post_before','codfe_blog_post_before');

    `
  

Đoạn code trên có nghĩa là nếu post đó không có hình ảnh thì nó sẽ lấy hình ảnh ‘noimage’ chèn vào đọan trên post hiện tại nhé!

Với các đoạn code trên mình hy vọng các bạn đã giải quyết triệt đế vấn đề về hình đại diện của mình rồi nhé.

Ảnh thumbnail là hình ảnh hiển thị khi show một danh sách bài viết trong WordPress. Chẳng hạn như ở khu vực trang chủ, trang chuyên mục, bài viết liên quan vv… Trong quá trình sử dụng một số bức ảnh sẽ bị mất đi do dùng các plugin xóa ảnh.

Trường hợp mất một vài ảnh thì không sao nhưng nếu mất lượng lớn thumbnail thì là cả một vấn đề. Nếu blog, website của bạn có hàng trăm Thumbnail bị mất thì thêm lại cũng khá mệt.

Cách 1: Lấy ảnh đại diện (Thumbnail) bằng code

Để khắc phục điều đó bạn nên dùng code lấy ảnh đầu tiên làm Thumbnail trong WordPress bằng đoạn mã sau:

// Code Featured Image
function get_ft_image() {  
global $post;
if (!has_post_thumbnail($post->ID)) {  
$attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );
if ($attached_image) {  
foreach ($attached_image as $attachment_id => $attachment) {  
set_post_thumbnail($post->ID, $attachment_id);  
}  
}  
}  
}
add_action('the_post', 'get_ft_image');  
// Used for new posts  
add_action('save_post', 'get_ft_image');  
add_action('draft_to_publish', 'get_ft_image');  
add_action('new_to_publish', 'get_ft_image');  
add_action('pending_to_publish', 'get_ft_image');  
add_action('future_to_publish', 'get_ft_image');

Copy code và thả xuống dưới cùng trong file functions.php.

Đoạn mã đó cũng có tác dụng khắc phục mất Featured Image ở trong bài viết.

Cách 2: Dùng plugin để tự động lấy Thumbnail

Một số plugin WordPress tự động lấy ảnh đầu tiên trong bài làm ảnh đại diện đó là

Auto Post Thumbnail

Cái này chỉ cần cài plugin xong chẳng phải làm gì cả. Nó sẽ lần mò tới bài viết và lấy hình ảnh đầu là Thumbnail.

Autoset Featured Image

Featured Image from URL | FIFU

Kết luận: Nếu như độc giả lướt qua danh sách bài viết mà không có thumbnail hiển thị hoặc bài có bài không sẽ làm mất thẩm mỹ. Để blog của bạn đẹp hơn thì với 2 cách trên đây hoàn toàn phù hợp để sử dụng.