Hướng dẫn hiển thị Featured Image ra khung danh sách bài viết

Nếu bạn đã từng sử dụng một số Plugin như woocommerce thì bạn sẽ thấy trên danh sách sản phẩm ở trang quản trị thường có hiển thị hình ảnh sản phẩm. Làm thế nào để có thể làm như thế tương tự với các post?. Trong bài viết này mình sẽ chia sẻ với bạn cách để hiển thị Featured Image ra khung danh sách bài viết. Và bạn biết rồi đấy, mình thường rất ít khi sử dụng plugin.

Trước khi làm việc này, bạn phải chắc chắn rằng theme của bạn có hỗ trợ post thumbnail. Nếu chưa hãy thêm đoạn này vào file functions.php.: add_theme_support( 'post-thumbnails' );

Bây giờ thì bạn sẽ làm các bước sau đây để hiển thị Featured Image ra khung danh sách bài viết nhé.

Tạo hàm lấy Featured Image theo ID bài viết

Trước tiên mình sẽ tạo ra một hàm có tên get_featured_image_for_list() để lấy ra hình ảnh của một bài viết. Thật ra mình có thể gộp luôn vào hàm sau, nhưng mình khuyên bạn nên tách ra vì nó là một tính năng. Hàm được viết như sau:

function  get_featured_image_for_list($post_ID) {
    //lấy thumbnail ID của bài viết.
    $post_thumbnail_id = get_post_thumbnail_id($post_ID);
    //kiểm tra bài viết có thumbnail ID không.
    if ($post_thumbnail_id) {
       //Lấy địa chỉ đường dẫn của thumbnail.
       $post_thumbnail_img = wp_get_attachment_image_src($post_thumbnail_id, 'featured_preview');
       //Trả về giá trị đầu tiên lấy được.
       return $post_thumbnail_img[0];
    }
    else{
       //Trả về hình ảnh mặc định khi không có hình thumbnail.
       return "https://tuandc.com/wp-content/themes/tuandc/img/logo-tuandccom.png";
    }
}

Tất cả mình đã có giải thích trong code rồi, bạn chỉ việc sao chép và đưa vào file functions.php là được.

Thêm cột và hiển thị Featured Image trong cột mới

Bây giờ chúng ta sẽ tạo ra các hàm để tạo cột và hiển thị Featured Image lên các cột vừa tạo.

Đầu tiên là hàm tạo cột.

function create_columns_head($defaults) {
  //add thêm cột với name là "featured_image" và label là "hình đại diện"
  $defaults['featured_image'] = 'Hình đại diện';
  //trả về mảng đã được thêm
  return $defaults;
}

Tiếp theo là hàm hiển thị featured image lên cột.

function add_columns_content($column_name, $post_ID) {
  //nếu là cột featured_image
  if ($column_name == 'featured_image') {
     // thì sẽ echo ra hình ảnh. biến $post_featured_image sẽ lấy url hình ảnh dựa vào hàm get_featured_image_for_list()
     $post_featured_image = get_featured_image_for_list($post_ID);
     if ($post_featured_image) {
       echo '<img src="' . $post_featured_image . '" style="height: auto; width: 55px;"/>';
     }
  }
}

Để tạo một cột mới trong danh sách bài viết bạn sử dụng một hook filter có tên manage_posts_columns, và để hiển thị nội dung vào cột mới thêm bạn sử dụng hook action có tên manage_posts_custom_column. Bạn thêm hai hooks này vào cuối cùng.

add_filter('manage_posts_columns', 'create_columns_head');
add_action('manage_posts_custom_column', 'add_columns_content', 10, 2);

Như vậy là bạn đã có thể hiển thị được hình ảnh nổi bật trong danh sách bài viết rồi đấy.

Nếu bạn muốn sử dụng cách này cho custom post type thì hook filter bạn sử dụng là manage_slug-CPT_posts_columns và hook action là manage_slug-CPT_posts_custom_column.

Chúc bạn thành công !