Thông thường mỗi bài viết trong wordpress 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 danh mục. 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 post hoặc page lúc đó thì post 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 web 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 post – bài viết làm hình đại điện.
Có 2 cách cơ bản để giải quyết vấn đề này đó là tìm plugin thần thánh đáp ứng hai là code riêng. Google một lúc với cụm từ “automatically Set the Featured Image” “set first image as featured image wordpress” ta sẽ tìm thấy một số plugin giải quết vấn đề này như sau:
Plugin lấy ảnh đầu tiên làm thumbnail wordpress
- First Picture as Featured Image /
- Auto set first image as featured – dante / By BehroozDante
- Get First Image Set As Featured Image / By Venugopal
Code lấy ảnh đầu tiên làm thumbnail wordpress
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/** 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'); |
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é!
|
1 2 3 4 5 6 7 8 9 10 |
/** 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 = '<img src="<span style="color: #ed1c24;" data-mce-style="color: #ed1c24;">' . trailingslashit( get_stylesheet_directory_uri() ) . 'images/default-image.png</span>' . '" 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é.
|
1 2 3 4 5 6 7 8 9 10 |
/** 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 = '<img src="https://codfe.com/wp-content/uploads/2019/03/no-image.jpg' . '" alt="enter your alt text here" />'; return $html; } |
Nhớ thay “https://codfe.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)
|
1 2 3 4 5 6 7 8 9 |
/**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é.
