- 0343 758 125
- [email protected]
- 8:00 - 17:00
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é!
/** 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');
Đ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 = '<img class="lazy-load" decoding="async" src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E" data-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é.
/** 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 class="lazy-load" decoding="async" src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E" data-src="https://dipigo.com/wp-content/uploads/2020/06/Logo-dipigo.png' . '" alt="enter your alt text here" />';
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é.
Bình luận
Dipigo là dịch vụ thiết kế website chuyên nghiệp uy tín và chất lượng. Với nhiều mẫu mã đẹp đẳng cấp luôn là lựa chọn tốt nhất dành cho bạn.
Trang Chủ
Giới Thiệu
Dịch Vụ
Kiến Thức
Tài khoản