Thêm Sortable Admin Columns cho bảng trong WordPress

Bài viết này sẽ hướng dẫn cho bạn thêm sortable admin column vào trong bảng admin của WordPress. Tất cả các bảng trong admin của WordPress đều kế thừa từ class WP_List_Table. Do vậy cú pháp để thêm column vào bảng là hoàn toàn giống nhau. Từ bài viết này bạn có thể thêm column vào bất kỳ table nào.

Sortable Admin Column trong bảng admin WordPress

Thêm cột vào trong bảng quản lý post type hoặc quản lý tài khoản là cách tốt nhất để hiển thị thông tin thêm cho người dùng. WordPress cung cấp cho bạn phương thức đơn giản nhất cho bạn thực hiện thao tác này. Bạn có thể thêm bất kỳ cột nào vào trong table mà bạn muốn.

Thêm thông tin cột vào trong danh sách column của WordPress

Để có thể thêm cột vào trong table của WordPress thì bạn sẽ thực hiện qua hook. Trong bài này mình ví dụ thêm cột vào bảng custom post type. Bạn sử dụng bộ lọc manage_${post_type}_posts_columns để thêm cột. Mở tập tin functions.php của giao diện lên và thêm vào đoạn code sau:

add_filter( 'manage_mycpt_posts_columns', 'set_custom_edit_mycpt_columns' );

function set_custom_edit_mycpt_columns( $columns ) {
  $date = $colunns['date'];
  unset( $columns['date'] );

  $columns['photo'] = __( 'Photo', 'my-text-domain' );
  $columns['custom_taxonomy'] = __( 'Custom Taxonomy', 'my-text-domain' );
  $columns['acf_field'] = __( 'ACF Field', 'my-text-domain' );

  $columns['date'] = $date;

  return $columns;
}

Bạn thay tên mycpt thành post type mà bạn đã đăng ký thông qua hàm register_post_type. Bộ lọc bên trên sẽ giúp bạn thêm, xóa, sửa các giá trị trong mảng $columns. Ý nghĩa của đoạn code bên trên như sau:

  • Sao chép cột date (ngày tháng) và di chuyển nó ra cuối bảng.
  • Thêm cột photo, custom taxonomy và mục ACF vào trong admin table.

Hiển thị dữ liệu trong cột mới được thêm vào

Để hiển thị dữ liệu vào column bạn mới thêm bên trên thì bạn dùng action manage_${post_type}_posts_custom_column. Sau khi bạn thêm column bằng bộ lọc thì nó mới chỉ xuất hiện tên trên cột mà thôi. Bạn cần phải dùng action này để hiển thị dữ liệu. Mở tập tin functions.php của giao diện lên và thêm đoạn code sau:

add_action( 'manage_mycpt_posts_custom_column' , 'custom_mycpt_column', 10, 2 );

function custom_mycpt_column( $column, $post_id ) {
  switch ( $column ) {

    // display a thumbnail photo
    case 'photo' :
      echo get_the_post_thumbnail( $post_id, 'thumbnail' );
      break;

    // display a list of the custom taxonomy terms assigned to the post 
    case 'custom_taxonomy' :
      $terms = get_the_term_list( $post_id , 'my_custom_taxonomy' , '' , ', ' , '' );
      echo is_string( $terms ) ? $terms : '—';
      break;

    // display the value of an ACF (Advanced Custom Fields) field
    case 'acf_field' :
      echo get_field( 'my_acf_field', $post_id );  
      break;

  }
}

Với đoạn code bên trên, bạn kiểm tra tên cột. Ứng với mỗi column thì bạn dùng hàm để lấy dữ liệu tương ứng và xuất ra ngoài màn hình. Rất đơn giản phải không nào? Bạn có thể hiển thị kiểu dữ liệu tùy thích tại đây.

Thêm sortable admin column cho bảng trong WordPress

Đối với dữ liệu thông thường thì bạn làm 2 đoạn code bên trên là được rồi. Nhưng bây giờ bạn muốn sắp xếp giá trị bên trong các cột thành nhóm thì sao? Ví dụ như bạn có cột giá sản phẩm, bây giờ bạn làm cho giá sắp xếp tăng dần hoặc giảm dần. Bạn dùng bộ lọc manage_edit-${post_type}_sortable_columns để thực hiện điều này.

add_filter( 'manage_edit-mycpt_sortable_columns', 'set_custom_mycpt_sortable_columns' );

function set_custom_mycpt_sortable_columns( $columns ) {
  $columns['custom_taxonomy'] = 'custom_taxonomy';
  $columns['acf_field'] = 'acf_field';

  return $columns;
}

Tương tự bạn cũng bỏ đoạn code bên trên vào bên dưới 2 đoạn code trước nhé. Với key của mảng là tên column mà bạn thêm và giá trị là tên bạn dùng để lọc. Sau khi thêm đoạn code này thì trên column header của table sẽ hiển thị link nếu bạn làm đúng.

Sắp xếp dữ liệu cho bảng

Mặc định, WordPress sẽ tự động các biến có hỗ trợ trong query_vars mặc định của nó. Đối với các trường bạn tự thêm vào thì bạn sẽ tự điều chỉnh query thông qua action pre_get_posts.

add_action( 'pre_get_posts', 'mycpt_custom_orderby' );

function mycpt_custom_orderby( $query ) {
  if ( ! is_admin() )
    return;

  $orderby = $query->get( 'orderby');

  if ( 'acf_field' == $orderby ) {
    $query->set( 'meta_key', 'acf_field' );
    $query->set( 'orderby', 'meta_value_num' );
  }
}

Bạn điều chỉnh meta_key và orderby cho phù hợp với table của bạn nhé. Như vậy là bạn đã hoàn thành xong việc thêm Sortable Admin Columns trong WordPress rồi đấy. Với cách thức tương tự thì bạn có thể thêm cột vào bất kỳ bảng bài viết nào. Đối với các bảng users và nhiều bảng khác thì WordPress cũng hỗ trợ bộ lọc cho bạn thực hiện. Tên gọi có thể khác một chút nhưng cách thức hoạt động là như nhau.

Hãy để lại bình luận của bạn để trao đổi cùng mọi người. Đừng quên nhấn like và chia sẻ bài viết nếu bạn thấy nội dung hữu ích. Chúc bạn thành công.

2 bình luận cho “Thêm Sortable Admin Columns cho bảng trong WordPress

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *