In the WordPress dashboard, the tables that displays the posts, pages and user data are all created internally by WordPress using the WP_List_Table PHP class.
在WordPress仪表板中，用于显示帖子，页面和用户数据的表都是由WordPress使用WP_List_Table PHP类内部创建的。
Below are a couple of screenshots of the post and user admin pages:
以下是帖子和用户管理页面的几个屏幕截图：
As a plugin developer, the need to build a custom table that will contain a given data might arise. Rather than code your own table design, it’s best you use that of WordPress in order for your plugin settings page to conform to WordPress UI.
作为插件开发人员，可能需要构建一个包含给定数据的自定义表。 最好不要使用自己的表设计，而最好使用WordPress的表设计，以使插件设置页面符合WordPress UI。
While you might be tempted to copy the HTML and CSS table design by viewing the source code of WordPress, you shouldn’t because the WP_List_Table class is there to help.
尽管您可能会通过查看WordPress的源代码来尝试复制HTML和CSS表格设计，但您不应该这样做，因为WP_List_Table类可以提供帮助。
My acquaintance with WP_List_Table stemmed from my experience building the ProfilePress plugin. I actually used it to display the list of created user account forms in table form.
我对WP_List_Table了解源于我构建ProfilePress插件的经验。 我实际上使用它来以表格形式显示创建的用户帐户形式的列表。
You’ve probably used plugins that use WP_List_Table, for example, the popular Contact Form 7 plugin uses the class to display the list of created contact forms.
您可能曾经使用过使用WP_List_Table的插件，例如，流行的Contact Form 7插件使用该类显示已创建的联系表的列表。
We’ll build a plugin to demonstrate how to display the dummy customer database below in a table format using WP_List_Table class.
我们将构建一个插件来演示如何使用WP_List_Table类以表格式显示下面的虚拟客户数据库。
The plugin is comprised of two classes: a child class of WP_List_Table and the plugin settings class.
该插件包括两个类： WP_List_Table的子类和插件设置类。
To build a WordPress UI table, the WP_List_Table will have to be extended with a couple of its methods overridden by a child class.
要构建WordPress UI表，必须使用子类覆盖的WP_List_Table扩展其几个方法。
Firstly, we include the class in the plugin.
首先，我们在插件中包含该类。
if ( ! class_exists( 'WP_List_Table' ) ) { require_once( ABSPATH . 'wp-admin/includes/class-wp-list-table.php' ); }We then create a child class that extends WP_List_Table. The child class will be called Customers_List since we are dealing with a database of customers.
然后，我们创建一个扩展WP_List_Table的子类。 子类将被命名Customers_List因为我们正在处理与客户的数据库。
class Customers_List extends WP_List_Table { /** Class constructor */ public function __construct() { parent::__construct( [ 'singular' => __( 'Customer', 'sp' ), //singular name of the listed records 'plural' => __( 'Customers', 'sp' ), //plural name of the listed records 'ajax' => false //should this table support ajax? ] ); }Let’s create some helper methods that the child class will use.
让我们创建子类将使用的一些辅助方法。
The get_customers() method below query the customer database and return the data in array format.
下面的get_customers()方法查询客户数据库并以数组格式返回数据。
/** * Retrieve customer’s data from the database * * @param int $per_page * @param int $page_number * * @return mixed */ public static function get_customers( $per_page = 5, $page_number = 1 ) { global $wpdb; $sql = "SELECT * FROM {$wpdb->prefix}customers"; if ( ! empty( $_REQUEST['orderby'] ) ) { $sql .= ' ORDER BY ' . esc_sql( $_REQUEST['orderby'] ); $sql .= ! empty( $_REQUEST['order'] ) ? ' ' . esc_sql( $_REQUEST['order'] ) : ' ASC'; } $sql .= " LIMIT $per_page"; $sql .= ' OFFSET ' . ( $page_number - 1 ) * $per_page; $result = $wpdb->get_results( $sql, 'ARRAY_A' ); return $result; }If you’ve built a PHP/MySQL application that includes pagination, the OFFSET and LIMIT SQL syntax should be familiar to you.
如果您构建了一个包含分页PHP / MySQL应用程序，则您应该熟悉OFFSET和LIMIT SQL语法。
The $per_page and $page_number arguments defines the SQL limit and the current page number.
$per_page和$page_number参数定义SQL限制和当前页码。
To learn more about paginating data set, See these tutorials.
要了解有关分页数据集的更多信息，请参阅以下 教程 。
The delete_customer() method takes care of deleting a given record from the database.
delete_customer()方法负责从数据库中删除给定记录。
/** * Delete a customer record. * * @param int $id customer ID */ public static function delete_customer( $id ) { global $wpdb; $wpdb->delete( "{$wpdb->prefix}customers", [ 'ID' => $id ], [ '%d' ] ); }The record_count() simply returns the number of customers in the database.
record_count()仅返回数据库中的客户数。
/** * Returns the count of records in the database. * * @return null|string */ public static function record_count() { global $wpdb; $sql = "SELECT COUNT(*) FROM {$wpdb->prefix}customers"; return $wpdb->get_var( $sql ); }We are done creating our helper methods, all succeeding methods are aimed at overriding their respective parent methods.
我们已经完成了辅助方法的创建，所有后续方法都旨在覆盖其各自的父方法。
For example, WP_List_Table has a no_items() method that returns No items found when no data is found.
例如， WP_List_Table具有一个no_items()方法，该方法在找不到数据时将返回No items found 。
To include a custom message, we have to create the same method in our child class but with a different return message.
要包含自定义消息，我们必须在子类中创建相同的方法，但使用不同的返回消息。
/** Text displayed when no customer data is available */ public function no_items() { _e( 'No customers avaliable.', 'sp' ); }The column_name method renders the name column of the table. A delete link is added below the customer name by passing an array containing the link key and value to row_action method.
column_name方法呈现表的名称列。 通过将包含链接键和值的数组传递给row_action方法，将删除链接添加到客户名称下方。
/** * Method for name column * * @param array $item an array of DB data * * @return string */ function column_name( $item ) { // create a nonce $delete_nonce = wp_create_nonce( 'sp_delete_customer' ); $title = '<strong>' . $item['name'] . '</strong>'; $actions = [ 'delete' => sprintf( '<a href="?page=%s&action=%s&customer=%s&_wpnonce=%s">Delete</a>', esc_attr( $_REQUEST['page'] ), 'delete', absint( $item['ID'] ), $delete_nonce ) ]; return $title . $this->row_actions( $actions ); }Since the data output of the address and city column won’t be modified, the column_default method whose function is to render a column when no specific method exists for that column will handle their output.
由于不会修改address和city列的数据输出，因此当该列不存在任何特定方法时，其功能是呈现一列的column_default方法将处理其输出。
/** * Render a column when no column specific method exists. * * @param array $item * @param string $column_name * * @return mixed */ public function column_default( $item, $column_name ) { switch ( $column_name ) { case 'address': case 'city': return $item[ $column_name ]; default: return print_r( $item, true ); //Show the whole array for troubleshooting purposes } }The column_cb method is used to render the checkbox responsible for carrying out bulk data operations.
column_cb方法用于使复选框负责执行批量数据操作。
/** * Render the bulk edit checkbox * * @param array $item * * @return string */ function column_cb( $item ) { return sprintf( '<input type="checkbox" name="bulk-delete[]" value="%s" />', $item['ID'] ); }The method get_columns() returns an array of columns that are going to be used in your table.
方法get_columns()返回将在表中使用的列数组。
/** * Associative array of columns * * @return array */ function get_columns() { $columns = [ 'cb' => '<input type="checkbox" />', 'name' => __( 'Name', 'sp' ), 'address' => __( 'Address', 'sp' ), 'city' => __( 'City', 'sp' ) ]; return $columns; }The get_sortable_columns() method defines the columns to make sortable. Thus, WordPress will add a link to the title of the column which when clicked, changes the order of data presentation.
get_sortable_columns()方法定义使列可排序的列。 因此，WordPress将向该列的标题添加一个链接，单击该链接可更改数据表示的顺序。
/** * Columns to make sortable. * * @return array */ public function get_sortable_columns() { $sortable_columns = array( 'name' => array( 'name', true ), 'city' => array( 'city', false ) ); return $sortable_columns; }get_bulk_actions() should return an associative array containing all the bulk actions available for the table.
get_bulk_actions()应该返回一个关联数组，其中包含该表可用的所有批量操作。
/** * Returns an associative array containing the bulk action * * @return array */ public function get_bulk_actions() { $actions = [ 'bulk-delete' => 'Delete' ]; return $actions; }The prepare_items method is where the data query and filter, sort handling, pagination, and any other data-manipulation required prior to rendering is carried out.
prepare_items方法是执行数据查询和过滤，排序处理，分页以及渲染之前所需的任何其他数据操作的地方。
Note: the method must include a call to the items parent class properties and the store the array of database data saved against it.
注意：该方法必须包括对items父类属性的调用，并存储针对它保存的数据库数据数组。
/** * Handles data query and filter, sorting, and pagination. */ public function prepare_items() { $this->_column_headers = $this->get_column_info(); /** Process bulk action */ $this->process_bulk_action(); $per_page = $this->get_items_per_page( 'customers_per_page', 5 ); $current_page = $this->get_pagenum(); $total_items = self::record_count(); $this->set_pagination_args( [ 'total_items' => $total_items, //WE have to calculate the total number of items 'per_page' => $per_page //WE have to determine how many items to show on a page ] ); $this->items = self::get_customers( $per_page, $current_page ); }Notice a call to process_bulk_action()? This method takes care of the deleting customers record either when the delete link is clicked or when a group of records is checked and the delete option is selected from the bulk action.
注意调用了process_bulk_action()吗？ 当单击删除链接或选中一组记录并从批量操作中选择删除选项时，此方法将负责删除客户记录。
public function process_bulk_action() { //Detect when a bulk action is being triggered... if ( 'delete' === $this->current_action() ) { // In our file that handles the request, verify the nonce. $nonce = esc_attr( $_REQUEST['_wpnonce'] ); if ( ! wp_verify_nonce( $nonce, 'sp_delete_customer' ) ) { die( 'Go get a life script kiddies' ); } else { self::delete_customer( absint( $_GET['customer'] ) ); wp_redirect( esc_url( add_query_arg() ) ); exit; } } // If the delete bulk action is triggered if ( ( isset( $_POST['action'] ) && $_POST['action'] == 'bulk-delete' ) || ( isset( $_POST['action2'] ) && $_POST['action2'] == 'bulk-delete' ) ) { $delete_ids = esc_sql( $_POST['bulk-delete'] ); // loop over the array of record IDs and delete them foreach ( $delete_ids as $id ) { self::delete_customer( $id ); } wp_redirect( esc_url( add_query_arg() ) ); exit; } }We are done extending the WP_List_Table class for our plugin, up next is building the plugin settings page that will display the data table of customers.
扩展插件的WP_List_Table类已经完成，接下来是构建插件设置页面，该页面将显示客户的数据表。
We create the class for the settings page populated with the constructor method and properties.
我们为填充了构造函数方法和属性的设置页面创建类。
class SP_Plugin { // class instance static $instance; // customer WP_List_Table object public $customers_obj; // class constructor public function __construct() { add_filter( 'set-screen-option', [ __CLASS__, 'set_screen' ], 10, 3 ); add_action( 'admin_menu', [ $this, 'plugin_menu' ] ); }Below are the callback methods for set-screen-option filter and admin_menu action hook.
以下是set-screen-option过滤器和admin_menu操作挂钩的回调方法。
public static function set_screen( $status, $option, $value ) { return $value; } public function plugin_menu() { $hook = add_menu_page( 'Sitepoint WP_List_Table Example', 'SP WP_List_Table', 'manage_options', 'wp_list_table_class', [ $this, 'plugin_settings_page' ] ); add_action( "load-$hook", [ $this, 'screen_option' ] ); }The plugin_menu() methods that creates the settings page includes a callback screen_option() method to create the screen option for setting the default number of data to display in the table.
所述plugin_menu()方法创建的设置页面包括一个回调screen_option()方法来创建为表中的数据的默认数目设置为显示屏幕选项。
/** * Screen options */ public function screen_option() { $option = 'per_page'; $args = [ 'label' => 'Customers', 'default' => 5, 'option' => 'customers_per_page' ]; add_screen_option( $option, $args ); $this->customers_obj = new Customers_List(); }Take note: we instantiated the Customers_List child class and saved the object to the customers_obj property defined earlier at the class declaration.
请注意：我们实例化了Customers_List子类，并将对象保存到先前在类声明中定义的customers_obj属性。
Below is the plugin_settings_page callback method that displays the content of the settings page.
以下是显示设置页面内容的plugin_settings_page回调方法。
/** * Plugin settings page */ public function plugin_settings_page() { ?> <div class="wrap"> <h2>WP_List_Table Class Example</h2> <div id="poststuff"> <div id="post-body" class="metabox-holder columns-2"> <div id="post-body-content"> <div class="meta-box-sortables ui-sortable"> <form method="post"> <?php $this->customers_obj->prepare_items(); $this->customers_obj->display(); ?> </form> </div> </div> </div> <br class="clear"> </div> </div> <?php }From the code above, the customer table is displayed by first calling prepare_items() to prepare the data and then display() to display the table content.
从上面的代码中，首先通过调用prepare_items()准备数据，然后再通过display()显示表内容来显示客户表。
To ensure only one object instance exists, here’s the singleton method.
为确保仅存在一个对象实例，这是单例方法。
/** Singleton instance */ public static function get_instance() { if ( ! isset( self::$instance ) ) { self::$instance = new self(); } return self::$instance; }Finally, we call the singleton method when all plugins have been loaded by WordPress.
最后，当所有插件均已由WordPress加载后，我们将调用singleton方法。
add_action( 'plugins_loaded', function () { SP_Plugin::get_instance(); } );When the plugin is installed and activated, you’ll see the customer data display in the WordPress table UI as depicted in the image below.
安装并激活插件后，您将在WordPress表格UI中看到客户数据显示，如下图所示。
In this tutorial, we’ve covered how to display custom data retrieved from the database in tabular format using the powerful WP_List_Table PHP Class.
在本教程中，我们介绍了如何使用功能强大的WP_List_Table PHP类以表格格式显示从数据库检索的自定义数据。
The plugin source code is available on GitHub. Download, install it in your WordPress powered site and explore the code.
插件源代码可在GitHub上获得 。 下载，将其安装在您的WordPress支持的站点中并浏览代码。
If you have any questions or contributions, let us know in the comments.
如果您有任何疑问或贡献，请在评论中告诉我们。
翻译自: https://www.sitepoint.com/using-wp_list_table-to-create-wordpress-admin-tables/
相关资源：WP-Table Reloaded,WordPress表格插件下载.rar