Tùy biến thêm cột trong admin – liệt kê posts và custom post type

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Tùy biến thêm cột trong admin – liệt kê posts và custom post type

Hi Guy, Trong tutorial lần này, chúng ta sẽ học cách thêm cột mới trong trang quản lý wordpress posts và tiêu biểu là hiển thị Featured Image của mỗi Post. Và cột mới thêm sau đây cũng được thêm vô page quản lý của mọi custom Post Type hỗ trợ Featured Image.

Kích hoạt tính năng Featured Images

Kiểm tra xem box Featured Image có trong trang menu Add New Post chưa.
set-featured-metabox
Đảm bảo bạn đã kích hoạt trong Option screen.
enable-options-screen-wp
Nếu không thấy option này ban thêm dòng sau vào functions.php

 add_theme_support('post-thumbnails');  

Chúng ta cũng thiết lập thêm kích cỡ ảnh trong công đoạn đăng ảnh vào bài viết, ảnh nhỏ này sẽ dùng làm hiển thị dạng preview cho bài viết thumbnail.

 add_image_size('featured_preview', 55, 55, true);  

Đọc thêm cách tùy biến featured images hay post thumbnails trong wordpress.

Thêm cột mới trong bản kê posts

Bây giờ chúng ta sẽ tạo thêm cột hiển thị ảnh đại diện của mỗi bài viết trong bảng liệt kê. Nhưng đầu tiên chúng ta cần tạo hàm để lấy featured image của post.

 // GET FEATURED IMAGE function ST4_get_featured_image($post_ID) { $post_thumbnail_id = get_post_thumbnail_id($post_ID); if ($post_thumbnail_id) { $post_thumbnail_img = wp_get_attachment_image_src($post_thumbnail_id, 'featured_preview'); return $post_thumbnail_img[0]; } }  

Và tiếp theo 2 hàm, một hàm sử dụng để khai báo cột mới, hàm thứ hai sẽ gọi để hiển thị featured image cho từng bài viết.

 // ADD NEW COLUMN function ST4_columns_head($defaults) { $defaults['featured_image'] = 'Featured Image'; return $defaults; } // SHOW THE FEATURED IMAGE function ST4_columns_content($column_name, $post_ID) { if ($column_name == 'featured_image') { $post_featured_image = ST4_get_featured_image($post_ID); if ($post_featured_image) { echo ''; } } }  

Hai hàm trên liên kết tương ứng vào hook manage_posts_columns manage_posts_custom_column .

 add_filter('manage_posts_columns', 'ST4_columns_head'); add_action('manage_posts_custom_column', 'ST4_columns_content', 10, 2);  

Kết quả:
Thử nghiệm bạn sửa lại một vài post mới nhất hiện trên đầu, chúng ta thiết lập Featured Image như hình dưới.
edit_post

Save post và quay trở lại bảng chứa bản kê posts /wp-admin/edit.php , bạn sẽ thấy cột mới tên “Featured Image”.
edit_posts1

Lưu ý: Post liên kết với nhiều dữ liệu, ngoài thumbnail còn có custom fields, bạn cũng cũng có thể có thể tạo custom fields trong wordpress cho post type và hiển thị thêm cột vào trang quản lý Posts như trên.

Những posts nào không sử dụng featured image, thì nội dung cột tại dòng kia sẽ không có. Bạn cũng cũng có thể có thể hiển thị ảnh mặc định (placeholder) cho post không thiết lập featured image, sửa lại hàm ST4_columns_content như sau:

  <?php function ST4_columns_content($column_name, $post_ID) { if ($column_name == 'featured_image') { $post_featured_image = ST4_get_featured_image($post_ID); if ($post_featured_image) { // HAS A FEATURED IMAGE echo '  '; } else { // NO FEATURED IMAGE, SHOW THE DEFAULT ONE echo '  '; } } } ?>   

Upload ảnh defaults trong thư mục your-theme/images/ . Kết quả:
edit_posts_default

Thêm Featured Image cho Custom Post Type

Một trong các tính năng thú vị khi dùng wordpress là tạo thêm kiểu dữ liệu Custom Post Type/ Custom Taxonomies. Bạn cũng đều có thể sử dụng post type để định nghĩa loại nội dung khác với Posts và Page. Ví dụ như quản lý Movie, bạn sẽ thật cần tạo post type mới cho wordpress mang tên “movie”.

Trong thực tế, khi bạn tạo custom post type, wordpress tạo tất cả các trang quản lý cho post type đó như bạn có thể thêm, sửa, xóa posts tựa như như quản lý Posts/Page truyền thống. Bản chất bạn chỉ cần khai báo các phần tử bổ trợ cho chuyện quản lý thành lập nội dung có trong wordpress như: input nhập tiêu đề, nội nội dung, thumbnail…

 add_action('init', 'ST4_add_movies'); function ST4_add_movies() { $args = array( 'label' =>  __('Movies'), 'singular_label' =>  __('Movie'), 'public' =>  true, 'show_ui' =>  true, 'capability_type' =>  'post', 'hierarchical' =>  false, 'rewrite' =>  true, 'supports' =>  array('title', 'editor', 'thumbnail') ); register_post_type( 'movie' , $args ); }  

Mình khuyến khích cài plugin tạo Custom Post Type, và tích vào mục Support.
custom post type ui-register post type
Chi tiết tại đây.
Và trang nhập movie đã có box thumbnail.
edit_movie

Bạn cũng thấy cột được hiển thị tại bảng bản kê movies cho custom post type này.
edit_movies-custom column

Cài đặt Nâng cao

Thêm cột cho từng kiểu Post Type. Nếu bạn sử dụng hooks manage_posts_columns manage_posts_custom_column , cột sẽ hiển thị tất cả ở trang quản lý posts dùng chung cho mọi post type. Chính xác nó sẽ làm việc với mọi thứ loại Posts loại trừ Pages.

 // ALL POST TYPES: posts AND custom post types add_filter('manage_posts_columns', 'ST4_columns_head'); add_action('manage_posts_custom_column', 'ST4_columns_content', 10, 2);  

Nếu bạn muốn thêm cột hiển thị duy nhất cho trang quản lý Posts mặc định thì dùng code hooks này.

 // ONLY WORDPRESS DEFAULT POSTS add_filter('manage_post_posts_columns', 'ST4_columns_head', 10); add_action('manage_post_posts_custom_column', 'ST4_columns_content', 10, 2);  

Nếu bạn muốn thêm cột hiển thị chỉ dành riêng cho trang quản lý Pages, sử dụng:

 // ONLY WORDPRESS DEFAULT PAGES add_filter('manage_page_posts_columns', 'ST4_columns_head', 10); add_action('manage_page_posts_custom_column', 'ST4_columns_content', 10, 2);  

Nếu bạn muốn thêm cột hiển thị trong trang quản lý dữ liệu cho post type với kiểu ‘movie’ ở trên, chúng ta viết tên hook chứa tên post type có dạng là: manage_{post-type-name}_posts_columns , manage_{post-type-name}_posts_custom_column . Ví dụ:

 // ONLY MOVIE CUSTOM TYPE POSTS add_filter('manage_movie_posts_columns', 'ST4_columns_head_only_movies', 10); add_action('manage_movie_posts_custom_column', 'ST4_columns_content_only_movies', 10, 2); // CREATE TWO FUNCTIONS TO HANDLE THE COLUMN function ST4_columns_head_only_movies($defaults) { $defaults['directors_name'] = 'Director'; return $defaults; } function ST4_columns_content_only_movies($column_name, $post_ID) { if ($column_name == 'directors_name') { // show content of 'directors_name' column } }  

Tên post type khai báo trong hàm đăng ký register_post_type . Nếu post type tạo bởi thông qua plugin bạn khá vất vả khi tìm kiếm hàm register_post_type nhưng cách tốt hơn cũng có thể kiểm tra với plugin chuyên tạo và quản lý post type Custom Post type UI (CPT) có trong website của bạn.
custom post type ui api

Hoặc trong trang quản lý post type đó, nhìn trên địa điểm trình duyệt, tên post type sẽ lộ ra.

 http://www.yoursite.com/wp-admin/edit.php?post_type=book 

. Trường hợp này ‘book’ là tên post type.
Cuối cùng, sửa lại hook thay ‘movie’ bằng ‘book’.

 add_filter('manage_book_posts_columns', 'ST4_columns_book_head'); add_action('manage_book_posts_custom_column', 'ST4_columns_book_content', 10, 2);  

Đừng quên tạo hàm liên kết:

  • ST4_columns_book_head: tạo cột mới
  • ST4_columns_book_content: hiển thị nội dung cho cột.

Bạn cần thêm nhiều hơn một cột.

 // ADD TWO NEW COLUMNS function ST4_columns_head($defaults) { $defaults['first_column'] = 'First Column'; $defaults['second_column'] = 'Second Column'; return $defaults; } function ST4_columns_content($column_name, $post_ID) { if ($column_name == 'first_column') { // First column } if ($column_name == 'second_column') { // Second column } }  

Xóa cột mặc định

Tuy nhiên, bạn cũng cũng có thể xóa các cột mặc định, tỉ dụ cột Category ở trang quản lý Posts.

 add_filter('manage_post_posts_columns', 'ST4_columns_remove_category'); // REMOVE DEFAULT CATEGORY COLUMN function ST4_columns_remove_category($defaults) { // to get defaults column names: // print_r($defaults); unset($defaults['categories']); return $defaults; }  

Chúc bạn học thiết kế web thành công!

Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng có thể có thể nhận được sự trợ giúp trên Twitter và Facebook

Bài viết Tùy biến thêm cột trong admin – liệt kê posts và custom post type được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang