在 WordPress 文章列表頁面中顯示自訂欄位,這可以讓在列表頁面中可以清除看到,所需要找的訊息,例如:自訂欄位想要顯示在列表中,或是在自訂文章類型,完全自訂在列表頁面所要顯示的欄位,這都是為了方便查找資料,那就不多說直接開始。
自製外掛起手式
*一句老話,程式碼要放在佈景主題的 function 裡,還是要放在外掛裡,來使用這功能都可,外掛起手式這裡不再詳述,去看WordPress custom post type 如何自訂文章類型這篇😃
列表中自訂顯示欄位
下面是最基本的程式碼框架,後面因應需求再逐步去修改😉
add_filter('manage_posts_columns', 'custom_posts_table_head'); function custom_posts_table_head($columns) { // 自訂要顯示的欄位,也可以使用 array 添加 $columns['custom_column'] = '自訂欄位名稱'; //可以取消預設顯示欄位,如: title、date...等。 unset( $columns['default'] ); return $columns; } add_action('manage_posts_custom_column', 'custom_posts_table_content', 10, 2); function custom_posts_table_content($column_name, $post_id) { // 在文章列表頁面中顯示自訂欄位的內容 if ($column_name === 'custom_column') { $custom_value = get_post_meta($post_id, 'custom_column', true); echo $custom_value; } }
文章列表中顯示基本相關欄位
因需求會希望在文章列表顯示一些欄位,下面會列出一些可以自訂顯示出來的欄位。
- post_id:文章ID。
- post_title:文章標題。
- post_author:文章作者。
- post_category:文章所屬的分類。
- post_tag:文章所標記的標籤。
- post_status:文章的狀態,例如發布、草稿等等。
- post_date:文章的發佈日期。
- post_modified:文章的最後修改日期。
- post_excerpt:文章的摘要內容。
- post_content:文章的內容。
- featured_image:文章中顯示的特色圖片。
將上面的欄位顯示在文章列表中,是使用 array 的方式添加,使用 switch 載入欄位的內容,注意上面的欄位名稱為資料庫欄位名稱,與程式碼的欄位名稱會有點不一樣😏下面是程式碼:
add_filter('manage_posts_columns', 'custom_posts_table_head'); function custom_posts_table_head($columns) { // 自訂要顯示的欄位,也可以使用 array 添加 $columns = array( 'cb' => '<input type="checkbox" />', 'id' => 'ID', 'featured_image' => '特色圖片', 'title' => '標題', 'excerpt' => '摘要', 'author' => '作者', 'categories' => '分類', 'tags' => '標籤', 'date' => '日期', 'modified' => '修改日期', 'status' => '文章狀態' ); return $columns; } add_action('manage_posts_custom_column', 'custom_posts_table_content', 10, 2); function custom_posts_table_content($column_name, $post_id) { // 在文章列表頁面中顯示自訂欄位的內容 switch ($column_name) { case 'id': echo $post_id; break; case 'featured_image': echo get_the_post_thumbnail($post_id, array(50, 50)); break; case 'excerpt': $excerpt = get_the_excerpt($post_id); echo $excerpt; break; case 'categories': $categories = get_the_category($post_id); if (!empty($categories)) { foreach ($categories as $category) { echo '<a href="' . esc_url(get_category_link($category->term_id)) . '">' . esc_html($category->name) . '</a>, '; } } break; case 'tags': $tags = get_the_tags($post_id); if (!empty($tags)) { foreach ($tags as $tag) { echo '<a href="' . esc_url(get_tag_link($tag->term_id)) . '">' . esc_html($tag->name) . '</a>, '; } } break; case 'modified': echo get_the_modified_date('Y-m-d H:i:s', $post_id); break; case 'status': $post_status = get_post_status($post_id); echo $post_status; break; } }
會發現標題與作者和日期,三個欄位不需要設定載入內容,欄位就可以正常顯示內容,上面程式碼就可以看到文章列表欄位排序與內容。
文章列表中顯示自訂欄位內容
再來我取消一些欄位,來把自訂欄位的內容加到文章列表中顯示,不然擺不下去了!接續前幾篇教學,把 ISBN 欄位顯示到列表上,在這裡的自訂欄位名稱就是在metakey的欄位名稱,我的欄位名稱為小寫的isbn,程式碼如下:
add_filter('manage_posts_columns', 'custom_posts_table_head'); function custom_posts_table_head($columns) { // 自訂要顯示的欄位,也可以使用 array 添加 $columns = array( 'cb' => '<input type="checkbox" />', 'id' => 'ID', 'featured_image' => '特色圖片', 'title' => '標題', 'author' => '作者', 'categories' => '分類', 'tags' => '標籤', 'date' => '日期', 'isbn' => 'ISBN' ); return $columns; } add_action('manage_posts_custom_column', 'custom_posts_table_content', 10, 2); function custom_posts_table_content($column_name, $post_id) { // 在文章列表頁面中顯示自訂欄位的內容 switch ($column_name) { case 'id': echo $post_id; break; case 'featured_image': echo get_the_post_thumbnail($post_id, array(50, 50)); break; case 'categories': $categories = get_the_category($post_id); if (!empty($categories)) { foreach ($categories as $category) { echo '<a href="' . esc_url(get_category_link($category->term_id)) . '">' . esc_html($category->name) . '</a>, '; } } break; case 'tags': $tags = get_the_tags($post_id); if (!empty($tags)) { foreach ($tags as $tag) { echo '<a href="' . esc_url(get_tag_link($tag->term_id)) . '">' . esc_html($tag->name) . '</a>, '; } } break; case 'isbn': $isbn = get_post_meta($post_id, 'isbn', true); echo $isbn; break; } }
自訂列表欄位的另一種寫法,程式碼如下:
add_filter('manage_posts_columns', 'custom_posts_table_head'); function custom_posts_table_head($columns) { // 自訂要顯示的欄位,必須使用 unset 刪除預設的欄位,才能自訂欄位排序 unset( $columns['comments'] ); unset( $columns['title'] ); unset( $columns['author'] ); unset( $columns['categories'] ); unset( $columns['tags'] ); unset( $columns['date'] ); //自訂列表欄位排序 $columns['featured_image'] = '特色圖片'; $columns['title'] = '標題'; $columns['excerpt'] = '摘要'; $columns['author'] = '作者'; $columns['categories'] = '分類'; $columns['tags'] = '標籤'; $columns['date'] = '日期'; $columns['modified'] = '修改日期'; $columns['status'] = '文章狀態'; return $columns; } ////////////////////////一下就依樣沒有變,就不重複//////////////////
自訂文章類型列表中顯示自訂欄位
要將功能使用在自訂文章類型(custom_post_type),很簡單只要把掛勾指向文章類型名稱就好,接續上幾篇教學,把 books 自訂文章類型添加到掛勾中如下:
//自訂欄位掛勾 add_filter('manage_posts_columns', 'custom_posts_table_head'); //改為 add_filter('manage_books_posts_columns', 'custom_posts_table_head'); //載入內容掛勾 add_action('manage_posts_custom_column', 'custom_posts_table_content', 10, 2); //改為 add_action('manage_books_posts_custom_column', 'custom_posts_table_content', 10, 2);
完整的的程式碼入如下:
add_filter('manage_books_posts_columns', 'custom_posts_table_head'); function custom_posts_table_head($columns) { // 自訂要顯示的欄位,也可以使用 array 添加 $columns = array( 'cb' => '<input type="checkbox" />', 'id' => 'ID', 'featured_image' => '特色圖片', 'title' => '標題', 'author' => '作者', 'categories' => '分類', 'tags' => '標籤', 'date' => '日期', 'isbn' => 'ISBN' ); return $columns; } add_action('manage_books_posts_custom_column', 'custom_posts_table_content', 10, 2); function custom_posts_table_content($column_name, $post_id) { // 在文章列表頁面中顯示自訂欄位的內容 switch ($column_name) { case 'id': echo $post_id; break; case 'featured_image': echo get_the_post_thumbnail($post_id, array(50, 50)); break; case 'categories': $categories = get_the_category($post_id); if (!empty($categories)) { foreach ($categories as $category) { echo '<a href="' . esc_url(get_category_link($category->term_id)) . '">' . esc_html($category->name) . '</a>, '; } } break; case 'tags': $tags = get_the_tags($post_id); if (!empty($tags)) { foreach ($tags as $tag) { echo '<a href="' . esc_url(get_tag_link($tag->term_id)) . '">' . esc_html($tag->name) . '</a>, '; } } break; case 'isbn': $isbn = get_post_meta($post_id, 'isbn', true); echo $isbn; break; } }

自訂文章類型列表中顯示自訂資料表欄位內容
待續…(等我寫出自訂欄位資料寫入自訂資料表教學)
上述的範例應夠簡單好理解了吧!再來還有就是顯示自訂資料表,就等等😌希望上面的範例對你有幫助,那就這樣啦!掰~!
留言