希望WP愛好者能夠喜歡并嘗試一下‘

1.樣式表

在上面的樣式表中，假設放置的是四個250px*250px的圖片廣告，所以250+（4-1）*21=313px。

2.javascript代碼

3.示例的HTML代碼

使用的是索凌網絡前面介紹過的"假圖"生成網站fakeimg.pl生成的"假圖"。

這組代碼的一個顯著缺點是：不適合移動設備顯示。

1. if(is_admin())   


2. {   


3.     new Cool_Wp_List_Table();   


4. }   


5.   


6. /**  


7.  * Cool_Wp_List_Table class will create the page to load the table  


8.  */  


9. class Cool_Wp_List_Table   


10. {   


11.     /**  


12.      * Constructor will create the menu item  


13.      */  


14.     public function __construct()   


15.     {   


16.         add_action( 'admin_menu', array($this, 'add_menu_example_list_table_page' ));   


17.     }   


18.   


19.     /**  


20.      * Menu item will allow us to load the page to display the table  


21.      */  


22.     public function add_menu_example_list_table_page()   


23.     {   


24.         add_menu_page( 'Coowp示例表格', 'Coowp示例表格', 'manage_options', 'coolwp-list-table.php', array($this, 'list_table_page') );   


25.     }   


26.   


27.     /**  


28.      * Display the list table page  


29.      *  


30.      * @return Void  


31.      */  


32.     public function list_table_page()   


33.     {   


34.         $exampleListTable = new Example_List_Table();   


35.         $exampleListTable->prepare_items();   


36.         ?>   


37.             <div class="wrap">   


38.                 <div id="icon-users" class="icon32"></div>   


39.                 <h2>Coowp示例表格-頁面標題</h2>   


40.                 <?php $exampleListTable->display(); ?>   


41.             </div>   


42.         <?php   


43.     }   


44. }   


45.   


46. // WP_List_Table is not loaded automatically so we need to load it in our application   


47. if( ! class_exists( 'WP_List_Table' ) ) {   


48.     require_once( ABSPATH . 'wp-admin/includes/class-wp-list-table.php' );   


49. }   


50.   


51. /**  


52.  * Create a new table class that will extend the WP_List_Table  


53.  */  


54. class Example_List_Table extends WP_List_Table   


55. {   


56.     /**  


57.      * Prepare the items for the table to process  


58.      *  


59.      * @return Void  


60.      */  


61.     public function prepare_items()   


62.     {   


63.         $columns = $this->get_columns();   


64.         $hidden = $this->get_hidden_columns();   


65.         $sortable = $this->get_sortable_columns();   


66.   


67.         $data = $this->table_data();   


68.         usort( $data, array( &$this, 'sort_data' ) );   


69.   


70.         $perPage = 2;   


71.         $currentPage = $this->get_pagenum();   


72.         $totalItems = count($data);   


73.   


74.         $this->set_pagination_args( array(   


75.             'total_items' => $totalItems,   


76.             'per_page'    => $perPage  


77.         ) );   


78.   


79.         $data = array_slice($data,(($currentPage-1)*$perPage),$perPage);   


80.   


81.         $this->_column_headers = array($columns, $hidden, $sortable);   


82.         $this->items = $data;   


83.     }   


84.   


85.     /**  


86.      * Override the parent columns method. Defines the columns to use in your listing table  


87.      *  


88.      * @return Array  


89.      */  


90.     public function get_columns()   


91.     {   


92.         $columns = array(   


93.             'id'          => __('ID'),   


94.             'title'       => __('Title'),   


95.             'description' => __('描述'),   


96.             //__('Description'),怎么被Wordpress翻譯為“圖像描述”了？   


97.             'date'        => __('Date'),   


98.             'price'    => __('價格'),//__('Price'),   


99.             'rating'      => __('Rating')   


100.         );   


101.   


102.         return $columns;   


103.     }   


104.   


105.     /**  


106.      * Define which columns are hidden  


107.      *  


108.      * @return Array  


109.      */  


110.     public function get_hidden_columns()   


111.     {   


112.         return array();   


113.     }   


114.   


115.     /**  


116.      * Define the sortable columns  


117.      *  


118.      * @return Array  


119.      */  


120.     public function get_sortable_columns()   


121.     {   


122.         return array('title' => array('title', false));   


123.     }   


124.   


125.     /**  


126.      * Get the table data  


127.      *  


128.      * @return Array  


129.      */  


130.     private function table_data()   


131.     {   


132.         $data = array();   


133.   


134.         $data[] = array(   


135.                     'id'          => 1,   


136.                     'title'       => '某IT設備租賃公司：楊先生',   


137.                     'description' => '上海，需求描述',   


138.                     'date'        => '2013.01.01',   


139.                     'price'       => '---',   


140.                     'rating'      => '7.3'   


141.                     );   


142.   


143.         $data[] = array(   


144.                     'id'          => 2,   


145.                     'title'       => '某婚攝團隊：李先生',   


146.                     'description' => '臺灣，臺北',   


147.                     'date'        => '2013.12.15',   


148.                     'price'       => '---',   


149.                     'rating'      => '7.2'   


150.                     );   


151.   


152.         $data[] = array(   


153.                     'id'          => 3,   


154.                     'title'       => '在校研究生：梁小姐',   


155.                     'description' => '墨爾本大學：藝術設計',   


156.                     'date'        => '2013.12.03',   


157.                     'price'       => '---',   


158.                     'rating'      => '7.0'   


159.                     );   


160.   


161.         $data[] = array(   


162.                     'id'          => 4,   


163.                     'title'       => '某私人航空公司',   


164.                     'description' => '僅前端交互：何小姐',   


165.                     'date'        => '2014.01.01',   


166.                      'price'      => '---',   


167.                     'rating'      => '7.0'   


168.                     );   


169.         return $data;   


170.     }   


171.   


172.     /**  


173.      * Define what data to show on each column of the table  


174.      *  


175.      * @param  Array $item        Data  


176.      * @param  String $column_name - Current column name  


177.      *  


178.      * @return Mixed  


179.      */  


180.     public function column_default( $item, $column_name )   


181.     {   


182.         switch( $column_name ) {   


183.             case 'id':   


184.             case 'title':   


185.             case 'description':   


186.             case 'date':   


187.             case 'price':   


188.             case 'rating':   


189.                 return $item[ $column_name ];   


190.   


191.             default:   


192.                 return print_r( $item, true ) ;   


193.         }   


194.     }   


195.   


196.     /**  


197.      * Allows you to sort the data by the variables set in the $_GET  


198.      *  


199.      * @return Mixed  


200.      */  


201.     private function sort_data( $a, $b )   


202.     {   


203.         // Set defaults   


204.         $orderby = 'title';   


205.         $order = 'asc';   


206.   


207.         // If orderby is set, use this as the sort column   


208.         if(!emptyempty($_GET['orderby']))   


209.         {   


210.             $orderby = $_GET['orderby'];   


211.         }   


212.   


213.         // If order is set use this as the order   


214.         if(!emptyempty($_GET['order']))   


215.         {   


216.             $order = $_GET['order'];   


217.         }   


218.   


219.         $result = strcmp( $a[$orderby], $b[$orderby] );   


220.   


221.         if($order === 'asc')   


222.         {   


223.             return $result;   


224.         }   


225.   


226.         return -$result;   


227.     }   


228. }