Wordpress

Code lấy hình ảnh đầu tiên trong bài viết làm ảnh đại diện

Ảnh đại diện của mỗi bài viết trong website wordpress giúp nâng cao thẩm mỹ khi hiện thị bài viết, một phần nó cũng giúp cho bài viết seo tốt hơn.

Nhưng trong quá trình viết bài chúng ta rất hay quên việc này, đôi khi nó lại gây mất thời gian, vì vậy để khắc phục điều này hôm nay mình sẽ share cho các bạn đoạn code giúp tự động lấy hình ảnh đầu tiên làm ảnh đại diện của mỗi bài viết.

Code này có ưu điểm:

Lấy hình ảnh đầu tiên trong bài viết làm ảnh đại diện, khi ko có ảnh đại diện sẽ hiển thì hình ảnh mặt định, lấy ảnh từ bất kì nguồn nào khi bạn copy bài viết!

Nhược điểm:

Vì tự động lấy hình tự động nên mình ko thể tùy chỉnh kích thước hình ảnh, cũng như ko thể thay đổi tên file ảnh:

Sau đây là đoạn code tự động lấy ảnh đầu tiên trong bài viết làm ảnh đại diện. Các bạn copy đoạn code này dán vào file functions.php của theme nhé:

function catch_that_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)){ //Defines a default image
    $first_img = "/images/default.jpg"; //Duong dan anh mac dinh khi khong tim duoc anh dai dien
  }
  return $first_img;
}

Cách dùng: Chèn đoạn code này vào vị trí muốn Ảnh đại diện xuất hiện

<img src="<?php echo catch_that_image() ?>" />

Ngoài cách tự code chức năng trên bạn có thể sử dùng plugin để làm công việc trên như

Auto Post Thumbnail

Có thắc mắc chi xin cmt phía dưới! Chúc các bạn thành công!!

Huy Kira

Đam mê hóa học, ưng thi vào trường kinh tế... Đậu vào trường Sư phạm, quyết tâm đi dạy... Ra trường đi làm designer, tự học frontend, chuyển qua làm PHP, được công ty đào tạo laravel... Và hiện tại đang code react native(2015) => Fullstack ... ?? tối về viết blog... (Còn tiếp...)

View Comments

  • Bạn ơi cho mình hỏi tí, cái theme wordpress của mình không biết tại sao nó lấy ảnh có đuôi .png làm ảnh đại diện trong bài viết thì mình chèn ảnh .jpg trước và ảnh .png sau nhưng nó lại lấy ảnh sau là .png...nhưng mình thử chèn 2 ảnh .png thì nó lại lấy đúng ảnh đầu tiên làm ảnh đại diện..bạn có cách nào khắc phục

  • e test ko đc anh ạ. đã làm đúng nó chỉ ra ảnh mặc định, không lấy ảnh trong bài

  • anh ơi, cho em hỏi, bài viết của em có ảnh icon dạng gif ở khúc giới thiệu, thì khi để code này vào nó hiện ảnh đại diện là icon gif, do số lương bài viết nhiều,nên anh giúp em lọc và lấy ảnh png/jpg trong bài viết ra để làm ảnh đại hiện với ạ.

Recent Posts

Cafe với Anh Huy nghe kể chuyện hành trình fonttiengviet.com

Fonttiengviet.com là một dự án website do JKS thực hiện cho khách hàng Huy Academy.…

9 tháng ago

Giới thiệu thiết kế web Quảng Nam Web – quangnamweb.com

Chắc chắn nhiều anh em khi đọc bài viết này sẽ nghĩ tôi đang quảng…

9 tháng ago

Hướng dẫn viết widget bài viết theo chuyên mục trong wordpress

Widget trong WordPress là một công cụ mạnh mẽ cho phép bạn dễ dàng thêm…

11 tháng ago

Tạo website để viết blog với chi phí thấp nhất ai cũng làm được

Hôm nay mình sẽ hướng dẫn cho anh em cách tạo website blog cực kỳ…

11 tháng ago

WordPress có cùi bắp? Có sống tốt với nghề thiết kế website wordpress?

Sống cực tốt anh em ạ :D Sau nhiều năm gắng bó với nghề thiết…

12 tháng ago

Share mẫu website blog cá nhân cực nhẹ, giống hocwordpress.vn

Nhân dịp quay lại viết blog mình share cho anh em code mẫu website blog…

12 tháng ago