Hướng dẫn how to create admin table in wordpress? - cách tạo bảng quản trị trong wordpress?

• 13 phút đọc
• WordPress, Hướng dẫn, Quản trị viên, Kỹ thuật (WP)

Các bảng danh sách WordPress là một yếu tố rất phổ biến của giao diện WordPress Admin nhưng việc tạo ra một trong những bảng đó không thực sự là một điều trực quan để làm khi bạn đã thực hiện nó trước đây. Trong bài viết này, chúng tôi sẽ thấy cách tạo một số bảng quản trị bản địa đúng cách.

Các bảng danh sách là một yếu tố phổ biến trong giao diện quản trị WordPress. Chúng được sử dụng trên gần như tất cả các trang quản trị mặc định có danh sách và các nhà phát triển thường tích hợp chúng vào các plugin của chúng. Nhưng việc tạo ra một trong những bảng này không thực sự trực quan nếu bạn đã thực hiện nó trước đây và tôi đã thấy mọi người cố gắng sao chép nó bằng cách sử dụng các lớp WordPress CSS trong đánh dấu tùy chỉnh và thậm chí bằng cách sao chép CSS từ đầu.

Trong bài viết này, chúng tôi sẽ thấy cách WordPress cung cấp chức năng có thể được sử dụng để tạo các bảng quản trị bản địa. Chúng tôi sẽ xem xét một bảng WordPress điển hình và các thành phần khác nhau của nó và chỉ ra cách thực hiện nó đúng cách.

Đọc thêm về SmashingMag: on SmashingMag:

• Cách tùy chỉnh một quản trị viên WordPress một cách dễ dàng
• Sửa đổi danh sách bài đăng của quản trị viên trong WordPress
• 10 bước để bảo vệ khu vực quản trị viên trong WordPress
  

Thêm sau khi nhảy! Tiếp tục đọc bên dưới & NBSP; ↓

Trình bày bảng WordPress

Để hiểu rõ hơn về các yếu tố khác nhau mà chúng tôi sẽ nói, hãy để lấy trình quản lý liên kết mặc định mà bạn thấy khi bạn nhấp vào liên kết trực tuyến trong menu Quản trị viên. Đây là những gì bạn thấy:

Trang mặc định để quản lý các liên kết trong WordPress 3.2.

Như bạn có thể thấy, một vài yếu tố khác nhau trước bảng cho phép bạn thực hiện các hành động trên bảng. Sau đó, chúng tôi có tiêu đề bàn, các hàng, chân bàn bàn và cuối cùng, một số hành động khác.

Trước và sau bàn

Giao diện quản trị WordPress là nhất quán, vì vậy bạn sẽ quen với việc tìm các yếu tố ở một số nơi nhất định khi bạn điều hướng.

Ví dụ, trước và sau các bảng quản trị là nơi bạn thường tìm thấy các tùy chọn để hành động trên bảng. Chúng bao gồm các hành động số lượng lớn, cho phép bạn chỉnh sửa và xóa nhiều bài đăng và lọc danh sách dựa trên một tiêu chí nhất định.

Chúng tôi sẽ thấy trong phần thứ hai của bài viết này cách tương tác với hai lĩnh vực này và cách hiển thị các tùy chọn ở đó.

Đầu trang và cuối trang

Nói về tính nhất quán, mỗi bảng quản trị trong WordPress đều có tiêu đề và chân trang.

Theo cùng một logic, chúng hiển thị cùng một thông tin: các tiêu đề của các cột. Một số tiêu đề rất đơn giản và một số được liên kết (có nghĩa là bảng có thể được đặt hàng theo cột đó).

Nội dung

Rõ ràng, lý do bạn sẽ tạo một bảng là để đặt một số nội dung vào đó. Nội dung này sẽ đi theo các hàng giữa tiêu đề và chân trang.

Làm thế nào điều này được thực hiện trong WordPress?

Như chúng tôi vừa thấy, một bảng WordPress có ba họ các yếu tố. Hãy cùng xem làm thế nào để đạt được điều này, sử dụng một ví dụ cụ thể.

Bảng ví dụ của chúng tôi

Hầu hết thời gian, dữ liệu chúng tôi muốn hiển thị sẽ ở dạng bảng SQL. Chúng tôi sẽ sử dụng bảng liên kết mặc định trong WordPress làm ví dụ của chúng tôi, nhưng các khái niệm áp dụng cho bất kỳ bảng cơ sở dữ liệu nào và có thể dễ dàng điều chỉnh theo nhu cầu của bạn. Bảng của chúng tôi sẽ có cấu trúc sau:

Bảng này chứa một số dữ liệu mặc định sẽ hoàn hảo để thử nghiệm.

Sử dụng lớp bảng danh sách

Để tạo một bảng HTML trong WordPress, chúng tôi không phải viết nhiều HTML. Thay vào đó, chúng ta có thể dựa vào công việc quý giá của lớp WP_List_Table. Như được giải thích bởi WordPress Codex, lớp này là một công cụ mạnh mẽ để tạo bảng.

Nó được điều chỉnh cho các nhà phát triển back-end, vì vậy chúng tôi có thể tập trung vào nhiệm vụ thiết yếu nhất (xử lý dữ liệu), để lại các nhiệm vụ khác (như kết xuất HTML) cho WordPress.

Lớp WP_List_Table về cơ bản là một khung nhỏ có chức năng mà chúng ta có thể dựa vào để chuẩn bị bảng. Đây là một cách tiếp cận hướng đối tượng, bởi vì chúng tôi sẽ tạo ra một đối tượng mở rộng WP_List_Table và sử dụng điều đó, thay vì sử dụng WP_List_Table trực tiếp.

Hãy cùng tạo ra một lớp

/**
 * Add extra markup in the toolbars before or after the list
 * @param string $which, helps you decide if you add the markup after (bottom) or before (top) the list
 */
function extra_tablenav( $which ) {
   if ( $which == "top" ){
      //The code that goes before the table is here
      echo"Hello, I'm before the table";
   }
   if ( $which == "bottom" ){
      //The code that goes after the table is there
      echo"Hi, I'm after the table";
   }
}

3 với một hàm tạo đơn giản:

class Link_List_Table extends WP_List_Table {

   /**
    * Constructor, we override the parent to pass our own arguments
    * We usually focus on three parameters: singular and plural labels, as well as whether the class supports AJAX.
    */
    function __construct() {
       parent::__construct( array(
      'singular'=> 'wp_list_text_link', //Singular label
      'plural' => 'wp_list_test_links', //plural label, also this well be one of the table css class
      'ajax'   => false //We won't support Ajax for this table
      ) );
    }

}

Đây là điểm khởi đầu của bảng của chúng tôi. Bây giờ chúng tôi có một đối tượng có quyền truy cập vào các thuộc tính và phương thức của cha mẹ của nó và chúng tôi sẽ tùy chỉnh nó cho phù hợp với nhu cầu của chúng tôi.

Hãy ghi nhớ ba loại yếu tố mà chúng ta đã thấy trước đó, hãy để bây giờ xem những gì cần thêm vào lớp của chúng ta để có được kết quả tương tự.

Cách thêm các phần tử trước và sau bảng

Để hiển thị nội dung trước hoặc sau bảng, chúng tôi cần thêm một phương thức có tên

/**
 * Add extra markup in the toolbars before or after the list
 * @param string $which, helps you decide if you add the markup after (bottom) or before (top) the list
 */
function extra_tablenav( $which ) {
   if ( $which == "top" ){
      //The code that goes before the table is here
      echo"Hello, I'm before the table";
   }
   if ( $which == "bottom" ){
      //The code that goes after the table is there
      echo"Hi, I'm after the table";
   }
}

4 vào lớp của chúng tôi. Phương pháp này có thể được thực hiện như sau:

/**
 * Add extra markup in the toolbars before or after the list
 * @param string $which, helps you decide if you add the markup after (bottom) or before (top) the list
 */
function extra_tablenav( $which ) {
   if ( $which == "top" ){
      //The code that goes before the table is here
      echo"Hello, I'm before the table";
   }
   if ( $which == "bottom" ){
      //The code that goes after the table is there
      echo"Hi, I'm after the table";
   }
}

Điều thú vị ở đây là phương thức

/**
 * Add extra markup in the toolbars before or after the list
 * @param string $which, helps you decide if you add the markup after (bottom) or before (top) the list
 */
function extra_tablenav( $which ) {
   if ( $which == "top" ){
      //The code that goes before the table is here
      echo"Hello, I'm before the table";
   }
   if ( $which == "bottom" ){
      //The code that goes after the table is there
      echo"Hi, I'm after the table";
   }
}

4 lấy một tham số, được đặt tên là

/**
 * Add extra markup in the toolbars before or after the list
 * @param string $which, helps you decide if you add the markup after (bottom) or before (top) the list
 */
function extra_tablenav( $which ) {
   if ( $which == "top" ){
      //The code that goes before the table is here
      echo"Hello, I'm before the table";
   }
   if ( $which == "bottom" ){
      //The code that goes after the table is there
      echo"Hi, I'm after the table";
   }
}

6 và hàm này được gọi hai lần bởi

/**
 * Add extra markup in the toolbars before or after the list
 * @param string $which, helps you decide if you add the markup after (bottom) or before (top) the list
 */
function extra_tablenav( $which ) {
   if ( $which == "top" ){
      //The code that goes before the table is here
      echo"Hello, I'm before the table";
   }
   if ( $which == "bottom" ){
      //The code that goes after the table is there
      echo"Hi, I'm after the table";
   }
}

3, (một lần trước bảng và một lần sau). Khi nó được gọi trước đó, giá trị của tham số

/**
 * Add extra markup in the toolbars before or after the list
 * @param string $which, helps you decide if you add the markup after (bottom) or before (top) the list
 */
function extra_tablenav( $which ) {
   if ( $which == "top" ){
      //The code that goes before the table is here
      echo"Hello, I'm before the table";
   }
   if ( $which == "bottom" ){
      //The code that goes after the table is there
      echo"Hi, I'm after the table";
   }
}

6 là

/**
 * Add extra markup in the toolbars before or after the list
 * @param string $which, helps you decide if you add the markup after (bottom) or before (top) the list
 */
function extra_tablenav( $which ) {
   if ( $which == "top" ){
      //The code that goes before the table is here
      echo"Hello, I'm before the table";
   }
   if ( $which == "bottom" ){
      //The code that goes after the table is there
      echo"Hi, I'm after the table";
   }
}

9 và khi nó được gọi là lần thứ hai, sau bảng, giá trị của nó là

/**
 * Define the columns that are going to be used in the table
 * @return array $columns, the array of columns to use with the table
 */
function get_columns() {
   return $columns= array(
      'col_link_id'=>__('ID'),
      'col_link_name'=>__('Name'),
      'col_link_url'=>__('Url'),
      'col_link_description'=>__('Description'),
      'col_link_visible'=>__('Visible')
   );
}

0.

Sau đó, bạn có thể sử dụng điều này để định vị các yếu tố khác nhau mà bạn muốn xuất hiện trước và sau bàn.

Chức năng này tồn tại trong lớp phụ huynh WP_List_Table trong WordPress, nhưng nó không trả lại bất cứ điều gì, vì vậy nếu bạn không ghi đè lên nó, sẽ không có gì xấu sẽ xảy ra; Chiếc bàn vừa giành chiến thắng có bất kỳ đánh dấu trước hoặc sau đó.

Cách chuẩn bị tiêu đề và chân trang của bàn

Trong tiêu đề và chân trang, chúng tôi có các tiêu đề của cột, và một số trong số chúng có thể sắp xếp.

Chúng tôi sẽ thêm vào phương thức loại A của chúng tôi có tên

/**
 * Define the columns that are going to be used in the table
 * @return array $columns, the array of columns to use with the table
 */
function get_columns() {
   return $columns= array(
      'col_link_id'=>__('ID'),
      'col_link_name'=>__('Name'),
      'col_link_url'=>__('Url'),
      'col_link_description'=>__('Description'),
      'col_link_visible'=>__('Visible')
   );
}

2 được sử dụng để xác định các cột:define the columns:

/**
 * Define the columns that are going to be used in the table
 * @return array $columns, the array of columns to use with the table
 */
function get_columns() {
   return $columns= array(
      'col_link_id'=>__('ID'),
      'col_link_name'=>__('Name'),
      'col_link_url'=>__('Url'),
      'col_link_description'=>__('Description'),
      'col_link_visible'=>__('Visible')
   );
}

Mã trên sẽ xây dựng một mảng dưới dạng

/**
 * Define the columns that are going to be used in the table
 * @return array $columns, the array of columns to use with the table
 */
function get_columns() {
   return $columns= array(
      'col_link_id'=>__('ID'),
      'col_link_name'=>__('Name'),
      'col_link_url'=>__('Url'),
      'col_link_description'=>__('Description'),
      'col_link_visible'=>__('Visible')
   );
}

3. Mảng này sau đó sẽ được lớp của bạn sử dụng để hiển thị các cột trong tiêu đề và chân trang, theo thứ tự bạn đã viết chúng, vì vậy xác định khá đơn giản.

Rất nhiều lĩnh vực nằm trong bảng liên kết, nhưng không phải tất cả chúng đều quan tâm đến chúng tôi. Với phương thức

/**
 * Define the columns that are going to be used in the table
 * @return array $columns, the array of columns to use with the table
 */
function get_columns() {
   return $columns= array(
      'col_link_id'=>__('ID'),
      'col_link_name'=>__('Name'),
      'col_link_url'=>__('Url'),
      'col_link_description'=>__('Description'),
      'col_link_visible'=>__('Visible')
   );
}

2 của chúng tôi, chúng tôi đã chọn chỉ hiển thị một vài trong số chúng: ID, tên, URL, mô tả của liên kết, cũng như có hiển thị liên kết hay không.

Không giống như phương thức

/**
 * Add extra markup in the toolbars before or after the list
 * @param string $which, helps you decide if you add the markup after (bottom) or before (top) the list
 */
function extra_tablenav( $which ) {
   if ( $which == "top" ){
      //The code that goes before the table is here
      echo"Hello, I'm before the table";
   }
   if ( $which == "bottom" ){
      //The code that goes after the table is there
      echo"Hi, I'm after the table";
   }
}

4,

/**
 * Define the columns that are going to be used in the table
 * @return array $columns, the array of columns to use with the table
 */
function get_columns() {
   return $columns= array(
      'col_link_id'=>__('ID'),
      'col_link_name'=>__('Name'),
      'col_link_url'=>__('Url'),
      'col_link_description'=>__('Description'),
      'col_link_visible'=>__('Visible')
   );
}

2 là phương thức cha mẹ phải được ghi đè để hoạt động. Điều này có ý nghĩa, bởi vì nếu bạn không tuyên bố bất kỳ cột nào, bảng sẽ bị hỏng.

Để chỉ định các cột để thêm chức năng sắp xếp, chúng tôi sẽ thêm phương thức cột ____27 vào lớp của chúng tôi:sorting functionality, we’ll add the

/**
 * Define the columns that are going to be used in the table
 * @return array $columns, the array of columns to use with the table
 */
function get_columns() {
   return $columns= array(
      'col_link_id'=>__('ID'),
      'col_link_name'=>__('Name'),
      'col_link_url'=>__('Url'),
      'col_link_description'=>__('Description'),
      'col_link_visible'=>__('Visible')
   );
}

7 columns method to our class:

/**
 * Decide which columns to activate the sorting functionality on
 * @return array $sortable, the array of columns that can be sorted by the user
 */
public function get_sortable_columns() {
   return $sortable = array(
      'col_link_id'=>'link_id',
      'col_link_name'=>'link_name',
      'col_link_visible'=>'link_visible'
   );
}

Ở đây một lần nữa, chúng tôi đã xây dựng một mảng PHP. Mô hình cho cái này là

/**
 * Define the columns that are going to be used in the table
 * @return array $columns, the array of columns to use with the table
 */
function get_columns() {
   return $columns= array(
      'col_link_id'=>__('ID'),
      'col_link_name'=>__('Name'),
      'col_link_url'=>__('Url'),
      'col_link_description'=>__('Description'),
      'col_link_visible'=>__('Visible')
   );
}

8. Nói cách khác,

/**
 * Define the columns that are going to be used in the table
 * @return array $columns, the array of columns to use with the table
 */
function get_columns() {
   return $columns= array(
      'col_link_id'=>__('ID'),
      'col_link_name'=>__('Name'),
      'col_link_url'=>__('Url'),
      'col_link_description'=>__('Description'),
      'col_link_visible'=>__('Visible')
   );
}

9 phải giống như tên cột được xác định trong phương thức

/**
 * Define the columns that are going to be used in the table
 * @return array $columns, the array of columns to use with the table
 */
function get_columns() {
   return $columns= array(
      'col_link_id'=>__('ID'),
      'col_link_name'=>__('Name'),
      'col_link_url'=>__('Url'),
      'col_link_description'=>__('Description'),
      'col_link_visible'=>__('Visible')
   );
}

2 và

/**
 * Decide which columns to activate the sorting functionality on
 * @return array $sortable, the array of columns that can be sorted by the user
 */
public function get_sortable_columns() {
   return $sortable = array(
      'col_link_id'=>'link_id',
      'col_link_name'=>'link_name',
      'col_link_visible'=>'link_visible'
   );
}

1 phải giống như tên của trường tương ứng trong bảng cơ sở dữ liệu.

Mã mà chúng tôi vừa viết chỉ định rằng chúng tôi muốn thêm chức năng sắp xếp vào ba cột (ID ID, tên gọi tên và có thể nhìn thấy được). Nếu bạn không muốn người dùng có thể sắp xếp bất kỳ cột nào hoặc nếu bạn chỉ không muốn thực hiện phương thức này, WordPress sẽ chỉ cho rằng không có cột nào có thể sắp xếp.

Tại thời điểm này, lớp học của chúng tôi đã sẵn sàng để xử lý khá nhiều điều. Bây giờ, hãy nhìn vào cách hiển thị dữ liệu.

Cách hiển thị các hàng bảng trên bảng

Các bước đầu tiên trong việc chuẩn bị bảng danh sách rất nhanh. Chúng tôi chỉ cần giải quyết một vài điều nữa trong việc xử lý dữ liệu.

Để làm cho bảng danh sách hiển thị dữ liệu của bạn, bạn sẽ cần chuẩn bị các mục của mình và gán chúng cho bảng. Điều này được xử lý bằng phương pháp

/**
 * Decide which columns to activate the sorting functionality on
 * @return array $sortable, the array of columns that can be sorted by the user
 */
public function get_sortable_columns() {
   return $sortable = array(
      'col_link_id'=>'link_id',
      'col_link_name'=>'link_name',
      'col_link_visible'=>'link_visible'
   );
}

2:

/**
 * Prepare the table with different parameters, pagination, columns and table elements
 */
function prepare_items() {
   global $wpdb, $_wp_column_headers;
   $screen = get_current_screen();

   /* -- Preparing your query -- */
        $query = "SELECT * FROM $wpdb->links";

   /* -- Ordering parameters -- */
       //Parameters that are going to be used to order the result
       $orderby = !empty($_GET["orderby"]) ? mysql_real_escape_string($_GET["orderby"]) : 'ASC';
       $order = !empty($_GET["order"]) ? mysql_real_escape_string($_GET["order"]) : ’;
       if(!empty($orderby) & !empty($order)){ $query.=' ORDER BY '.$orderby.' '.$order; }

   /* -- Pagination parameters -- */
        //Number of elements in your table?
        $totalitems = $wpdb->query($query); //return the total number of affected rows
        //How many to display per page?
        $perpage = 5;
        //Which page is this?
        $paged = !empty($_GET["paged"]) ? mysql_real_escape_string($_GET["paged"]) : ’;
        //Page Number
        if(empty($paged) || !is_numeric($paged) || $paged<=0 ){ $paged=1; } //How many pages do we have in total? $totalpages = ceil($totalitems/$perpage); //adjust the query to take pagination into account if(!empty($paged) && !empty($perpage)){ $offset=($paged-1)*$perpage; $query.=' LIMIT '.(int)$offset.','.(int)$perpage; } /* -- Register the pagination -- */ $this->set_pagination_args( array(
         "total_items" => $totalitems,
         "total_pages" => $totalpages,
         "per_page" => $perpage,
      ) );
      //The pagination links are automatically built according to those parameters

   /* -- Register the Columns -- */
      $columns = $this->get_columns();
      $_wp_column_headers[$screen->id]=$columns;

   /* -- Fetch the items -- */
      $this->items = $wpdb->get_results($query);
}

Như bạn có thể thấy, phương pháp này phức tạp hơn một chút so với những phương pháp trước đó mà chúng tôi đã thêm vào lớp của chúng tôi. Vì vậy, hãy để Lừa xem những gì đang thực sự xảy ra ở đây:

1. Chuẩn bị truy vấn Điều đầu tiên cần làm là chỉ định truy vấn chung sẽ trả về dữ liệu. Ở đây, nó có một

   /**
    * Decide which columns to activate the sorting functionality on
    * @return array $sortable, the array of columns that can be sorted by the user
    */
   public function get_sortable_columns() {
      return $sortable = array(
         'col_link_id'=>'link_id',
         'col_link_name'=>'link_name',
         'col_link_visible'=>'link_visible'
      );
   }

   3 chung trên bảng liên kết. The first thing to do is specify the general query that will return the data. Here, it’s a generic

   /**
    * Decide which columns to activate the sorting functionality on
    * @return array $sortable, the array of columns that can be sorted by the user
    */
   public function get_sortable_columns() {
      return $sortable = array(
         'col_link_id'=>'link_id',
         'col_link_name'=>'link_name',
         'col_link_visible'=>'link_visible'
      );
   }

   3 on the links table.
2. Các tham số đặt hàng Phần thứ hai là cho các tham số đặt hàng, bởi vì chúng tôi đã chỉ định rằng bảng của chúng tôi có thể được sắp xếp theo các trường nhất định. Trong phần này, chúng tôi sẽ nhận được trường (nếu có) để đặt hàng hồ sơ của chúng tôi (

   /**
    * Decide which columns to activate the sorting functionality on
    * @return array $sortable, the array of columns that can be sorted by the user
    */
   public function get_sortable_columns() {
      return $sortable = array(
         'col_link_id'=>'link_id',
         'col_link_name'=>'link_name',
         'col_link_visible'=>'link_visible'
      );
   }

   4) và chính thứ tự (

   /**
    * Decide which columns to activate the sorting functionality on
    * @return array $sortable, the array of columns that can be sorted by the user
    */
   public function get_sortable_columns() {
      return $sortable = array(
         'col_link_id'=>'link_id',
         'col_link_name'=>'link_name',
         'col_link_visible'=>'link_visible'
      );
   }

   5). Sau đó, chúng tôi điều chỉnh truy vấn của chúng tôi để tính đến những điều đó bằng cách nối thêm một điều khoản

   /**
    * Decide which columns to activate the sorting functionality on
    * @return array $sortable, the array of columns that can be sorted by the user
    */
   public function get_sortable_columns() {
      return $sortable = array(
         'col_link_id'=>'link_id',
         'col_link_name'=>'link_name',
         'col_link_visible'=>'link_visible'
      );
   }

   6. The second section is for the ordering parameters, because we have specified that our table can be sorted by certain fields. In this section, we are getting the field (if any) by which to order our record (

   /**
    * Decide which columns to activate the sorting functionality on
    * @return array $sortable, the array of columns that can be sorted by the user
    */
   public function get_sortable_columns() {
      return $sortable = array(
         'col_link_id'=>'link_id',
         'col_link_name'=>'link_name',
         'col_link_visible'=>'link_visible'
      );
   }

   4) and the order itself (

   /**
    * Decide which columns to activate the sorting functionality on
    * @return array $sortable, the array of columns that can be sorted by the user
    */
   public function get_sortable_columns() {
      return $sortable = array(
         'col_link_id'=>'link_id',
         'col_link_name'=>'link_name',
         'col_link_visible'=>'link_visible'
      );
   }

   5). We then adjust our query to take those into account by appending an

   /**
    * Decide which columns to activate the sorting functionality on
    * @return array $sortable, the array of columns that can be sorted by the user
    */
   public function get_sortable_columns() {
      return $sortable = array(
         'col_link_id'=>'link_id',
         'col_link_name'=>'link_name',
         'col_link_visible'=>'link_visible'
      );
   }

   6 clause.
3. Thông số phân trang Phần thứ ba liên quan đến phân trang. Chúng tôi chỉ định có bao nhiêu mục trong bảng cơ sở dữ liệu của chúng tôi và số lượng hiển thị trên mỗi trang. Sau đó, chúng tôi nhận được số trang hiện tại (

   /**
    * Decide which columns to activate the sorting functionality on
    * @return array $sortable, the array of columns that can be sorted by the user
    */
   public function get_sortable_columns() {
      return $sortable = array(
         'col_link_id'=>'link_id',
         'col_link_name'=>'link_name',
         'col_link_visible'=>'link_visible'
      );
   }

   7) và sau đó điều chỉnh truy vấn SQL để có được kết quả chính xác dựa trên các tham số phân trang đó. The third section deals with pagination. We specify how many items are in our database table and how many to show per page. We then get the current page number (

   /**
    * Decide which columns to activate the sorting functionality on
    * @return array $sortable, the array of columns that can be sorted by the user
    */
   public function get_sortable_columns() {
      return $sortable = array(
         'col_link_id'=>'link_id',
         'col_link_name'=>'link_name',
         'col_link_visible'=>'link_visible'
      );
   }

   7) and then adapt the SQL query to get the correct results based on those pagination parameters.
4. Đăng ký Phần này của hàm lấy tất cả các tham số chúng tôi đã chuẩn bị và gán chúng cho bảng của chúng tôi. This part of the function takes all of the parameters we have prepared and assigns them to our table.
5. Sẵn sàng để đi bảng danh sách của chúng tôi hiện được đặt với tất cả các thông tin cần thiết để hiển thị dữ liệu của chúng tôi. Nó biết truy vấn nào để thực hiện để có được các bản ghi từ cơ sở dữ liệu; Nó biết có bao nhiêu hồ sơ sẽ được trả lại; Và tất cả các tham số phân trang đã sẵn sàng. Đây là một phương pháp thiết yếu của lớp bảng danh sách của bạn. Nếu bạn không thực hiện nó đúng cách, WordPress won có thể truy xuất dữ liệu của bạn. Nếu phương thức bị thiếu trong lớp của bạn, WordPress sẽ trả về một lỗi cho bạn biết rằng phương thức

   /**
    * Decide which columns to activate the sorting functionality on
    * @return array $sortable, the array of columns that can be sorted by the user
    */
   public function get_sortable_columns() {
      return $sortable = array(
         'col_link_id'=>'link_id',
         'col_link_name'=>'link_name',
         'col_link_visible'=>'link_visible'
      );
   }

   2 phải được ghi đè. Our list table is now set with all of the information it needs to display our data. It knows what query to execute to get the records from the database; it knows how many records will be returned; and all the pagination parameters are ready. This is an essential method of your list table class. If you don’t implement it properly, WordPress won’t be able to retrieve your data. If the method is missing in your class, WordPress will return an error telling you that the

   /**
    * Decide which columns to activate the sorting functionality on
    * @return array $sortable, the array of columns that can be sorted by the user
    */
   public function get_sortable_columns() {
      return $sortable = array(
         'col_link_id'=>'link_id',
         'col_link_name'=>'link_name',
         'col_link_visible'=>'link_visible'
      );
   }

   2 method must be overridden.
6. Hiển thị các hàng Đây là nó! Cuối cùng, chúng tôi có được phương thức chịu trách nhiệm hiển thị các bản ghi dữ liệu. Nó được đặt tên là

   /**
    * Decide which columns to activate the sorting functionality on
    * @return array $sortable, the array of columns that can be sorted by the user
    */
   public function get_sortable_columns() {
      return $sortable = array(
         'col_link_id'=>'link_id',
         'col_link_name'=>'link_name',
         'col_link_visible'=>'link_visible'
      );
   }

   9 và được thực hiện như sau. This is it! Finally, we get to the method responsible for displaying the records of data. It is named

   /**
    * Decide which columns to activate the sorting functionality on
    * @return array $sortable, the array of columns that can be sorted by the user
    */
   public function get_sortable_columns() {
      return $sortable = array(
         'col_link_id'=>'link_id',
         'col_link_name'=>'link_name',
         'col_link_visible'=>'link_visible'
      );
   }

   9 and is implemented as follows.

/**
 * Display the rows of records in the table
 * @return string, echo the markup of the rows
 */
function display_rows() {

   //Get the records registered in the prepare_items method
   $records = $this->items;

   //Get the columns registered in the get_columns and get_sortable_columns methods
   list( $columns, $hidden ) = $this->get_column_info();

   //Loop for each record
   if(!empty($records)){foreach($records as $rec){

      //Open the line
        echo '< tr id="record_'.$rec->link_id.'">';
      foreach ( $columns as $column_name => $column_display_name ) {

         //Style attributes for each col
         $class = "class='$column_name column-$column_name'";
         $style = "";
         if ( in_array( $column_name, $hidden ) ) $style = ' style="display:none;"';
         $attributes = $class . $style;

         //edit link
         $editlink  = '/wp-admin/link.php?action=edit&link_id='.(int)$rec->link_id;

         //Display the cell
         switch ( $column_name ) {
            case "col_link_id":  echo '< td '.$attributes.'>'.stripslashes($rec->link_id).'< /td>';   break;
            case "col_link_name": echo '< td '.$attributes.'>'.stripslashes($rec->link_name).'< /td>'; break;
            case "col_link_url": echo '< td '.$attributes.'>'.stripslashes($rec->link_url).'< /td>'; break;
            case "col_link_description": echo '< td '.$attributes.'>'.$rec->link_description.'< /td>'; break;
            case "col_link_visible": echo '< td '.$attributes.'>'.$rec->link_visible.'< /td>'; break;
         }
      }

      //Close the line
      echo'< /tr>';
   }}
}

Hàm này có được dữ liệu được chuẩn bị bằng phương thức

/**
 * Decide which columns to activate the sorting functionality on
 * @return array $sortable, the array of columns that can be sorted by the user
 */
public function get_sortable_columns() {
   return $sortable = array(
      'col_link_id'=>'link_id',
      'col_link_name'=>'link_name',
      'col_link_visible'=>'link_visible'
   );
}

2 và các vòng lặp qua các bản ghi khác nhau để xây dựng đánh dấu của hàng bảng tương ứng.

Với phương pháp này, bạn có quyền kiểm soát tuyệt vời cách hiển thị dữ liệu. Nếu bạn không muốn thêm phương thức này vào lớp của mình, thì lớp sẽ sử dụng phương thức cha mẹ để hiển thị dữ liệu theo kiểu mặc định của WordPress.

Lớp bảng danh sách của bạn hiện đã hoàn thành và sẵn sàng để được sử dụng trên một trong các trang của bạn.

Tất cả các phương pháp mà chúng tôi đã thêm vào lớp của chúng tôi đã tồn tại trong lớp phụ huynh WP_List_Table. Nhưng để lớp con của bạn làm việc, bạn phải ghi đè ít nhất hai trong số chúng:

/**
 * Define the columns that are going to be used in the table
 * @return array $columns, the array of columns to use with the table
 */
function get_columns() {
   return $columns= array(
      'col_link_id'=>__('ID'),
      'col_link_name'=>__('Name'),
      'col_link_url'=>__('Url'),
      'col_link_description'=>__('Description'),
      'col_link_visible'=>__('Visible')
   );
}

2 và

/**
 * Decide which columns to activate the sorting functionality on
 * @return array $sortable, the array of columns that can be sorted by the user
 */
public function get_sortable_columns() {
   return $sortable = array(
      'col_link_id'=>'link_id',
      'col_link_name'=>'link_name',
      'col_link_visible'=>'link_visible'
   );
}

2.

Thực hiện

Bây giờ, lớp bảng danh sách của chúng tôi đã sẵn sàng, hãy để xem cách chúng tôi có thể sử dụng nó trên một trang mà chúng tôi lựa chọn.

Chúng ta viết nó ở đâu?

Mã mà chúng tôi bao gồm trong phần này phải được viết trên trang nơi bạn muốn hiển thị bảng quản trị.

Chúng tôi sẽ tạo ra một plugin trình diễn rất đơn giản, có tên là bảng danh sách WP thử nghiệm. Về cơ bản, plugin này sẽ thêm một liên kết trong các plugin WordPress plugin phụ. Do đó, mã của chúng tôi sẽ được viết trong tệp plugin.

Trước khi chúng tôi bắt đầu

Quan trọng: Lớp WP_List_Table không có sẵn trong các plugin theo mặc định. Bạn có thể sử dụng đoạn trích sau đây để kiểm tra xem nó có ở đó không: the WP_List_Table class is not available in plugins by default. You can use the following snippet to check that it is there:

//Our class extends the WP_List_Table class, so we need to make sure that it's there
if(!class_exists('WP_List_Table')){
   require_once( ABSPATH . 'wp-admin/includes/class-wp-list-table.php' );
}

Ngoài ra, nếu bạn đã tạo lớp

/**
 * Prepare the table with different parameters, pagination, columns and table elements
 */
function prepare_items() {
   global $wpdb, $_wp_column_headers;
   $screen = get_current_screen();

   /* -- Preparing your query -- */
        $query = "SELECT * FROM $wpdb->links";

   /* -- Ordering parameters -- */
       //Parameters that are going to be used to order the result
       $orderby = !empty($_GET["orderby"]) ? mysql_real_escape_string($_GET["orderby"]) : 'ASC';
       $order = !empty($_GET["order"]) ? mysql_real_escape_string($_GET["order"]) : ’;
       if(!empty($orderby) & !empty($order)){ $query.=' ORDER BY '.$orderby.' '.$order; }

   /* -- Pagination parameters -- */
        //Number of elements in your table?
        $totalitems = $wpdb->query($query); //return the total number of affected rows
        //How many to display per page?
        $perpage = 5;
        //Which page is this?
        $paged = !empty($_GET["paged"]) ? mysql_real_escape_string($_GET["paged"]) : ’;
        //Page Number
        if(empty($paged) || !is_numeric($paged) || $paged<=0 ){ $paged=1; } //How many pages do we have in total? $totalpages = ceil($totalitems/$perpage); //adjust the query to take pagination into account if(!empty($paged) && !empty($perpage)){ $offset=($paged-1)*$perpage; $query.=' LIMIT '.(int)$offset.','.(int)$perpage; } /* -- Register the pagination -- */ $this->set_pagination_args( array(
         "total_items" => $totalitems,
         "total_pages" => $totalpages,
         "per_page" => $perpage,
      ) );
      //The pagination links are automatically built according to those parameters

   /* -- Register the Columns -- */
      $columns = $this->get_columns();
      $_wp_column_headers[$screen->id]=$columns;

   /* -- Fetch the items -- */
      $this->items = $wpdb->get_results($query);
}

5 của mình trong một tệp bên ngoài, hãy đảm bảo bao gồm nó trước khi bạn bắt đầu khởi tạo.

Khởi tạo bảng

Bước đầu tiên là tạo một thể hiện của lớp bảng danh sách của chúng tôi, sau đó gọi phương thức

/**
 * Decide which columns to activate the sorting functionality on
 * @return array $sortable, the array of columns that can be sorted by the user
 */
public function get_sortable_columns() {
   return $sortable = array(
      'col_link_id'=>'link_id',
      'col_link_name'=>'link_name',
      'col_link_visible'=>'link_visible'
   );
}

2 để tìm nạp dữ liệu vào bảng của bạn:

//Prepare Table of elements
$wp_list_table = new Links_List_Table();
$wp_list_table->prepare_items();

Hiển thị nó

Đối tượng

/**
 * Prepare the table with different parameters, pagination, columns and table elements
 */
function prepare_items() {
   global $wpdb, $_wp_column_headers;
   $screen = get_current_screen();

   /* -- Preparing your query -- */
        $query = "SELECT * FROM $wpdb->links";

   /* -- Ordering parameters -- */
       //Parameters that are going to be used to order the result
       $orderby = !empty($_GET["orderby"]) ? mysql_real_escape_string($_GET["orderby"]) : 'ASC';
       $order = !empty($_GET["order"]) ? mysql_real_escape_string($_GET["order"]) : ’;
       if(!empty($orderby) & !empty($order)){ $query.=' ORDER BY '.$orderby.' '.$order; }

   /* -- Pagination parameters -- */
        //Number of elements in your table?
        $totalitems = $wpdb->query($query); //return the total number of affected rows
        //How many to display per page?
        $perpage = 5;
        //Which page is this?
        $paged = !empty($_GET["paged"]) ? mysql_real_escape_string($_GET["paged"]) : ’;
        //Page Number
        if(empty($paged) || !is_numeric($paged) || $paged<=0 ){ $paged=1; } //How many pages do we have in total? $totalpages = ceil($totalitems/$perpage); //adjust the query to take pagination into account if(!empty($paged) && !empty($perpage)){ $offset=($paged-1)*$perpage; $query.=' LIMIT '.(int)$offset.','.(int)$perpage; } /* -- Register the pagination -- */ $this->set_pagination_args( array(
         "total_items" => $totalitems,
         "total_pages" => $totalpages,
         "per_page" => $perpage,
      ) );
      //The pagination links are automatically built according to those parameters

   /* -- Register the Columns -- */
      $columns = $this->get_columns();
      $_wp_column_headers[$screen->id]=$columns;

   /* -- Fetch the items -- */
      $this->items = $wpdb->get_results($query);
}

7 hiện đã sẵn sàng để hiển thị bảng bất cứ nơi nào bạn muốn.

Xây dựng trang của bạn đánh dấu và bất cứ nơi nào bạn quyết định hiển thị bảng, hãy thực hiện cuộc gọi đến phương thức

/**
 * Prepare the table with different parameters, pagination, columns and table elements
 */
function prepare_items() {
   global $wpdb, $_wp_column_headers;
   $screen = get_current_screen();

   /* -- Preparing your query -- */
        $query = "SELECT * FROM $wpdb->links";

   /* -- Ordering parameters -- */
       //Parameters that are going to be used to order the result
       $orderby = !empty($_GET["orderby"]) ? mysql_real_escape_string($_GET["orderby"]) : 'ASC';
       $order = !empty($_GET["order"]) ? mysql_real_escape_string($_GET["order"]) : ’;
       if(!empty($orderby) & !empty($order)){ $query.=' ORDER BY '.$orderby.' '.$order; }

   /* -- Pagination parameters -- */
        //Number of elements in your table?
        $totalitems = $wpdb->query($query); //return the total number of affected rows
        //How many to display per page?
        $perpage = 5;
        //Which page is this?
        $paged = !empty($_GET["paged"]) ? mysql_real_escape_string($_GET["paged"]) : ’;
        //Page Number
        if(empty($paged) || !is_numeric($paged) || $paged<=0 ){ $paged=1; } //How many pages do we have in total? $totalpages = ceil($totalitems/$perpage); //adjust the query to take pagination into account if(!empty($paged) && !empty($perpage)){ $offset=($paged-1)*$perpage; $query.=' LIMIT '.(int)$offset.','.(int)$perpage; } /* -- Register the pagination -- */ $this->set_pagination_args( array(
         "total_items" => $totalitems,
         "total_pages" => $totalpages,
         "per_page" => $perpage,
      ) );
      //The pagination links are automatically built according to those parameters

   /* -- Register the Columns -- */
      $columns = $this->get_columns();
      $_wp_column_headers[$screen->id]=$columns;

   /* -- Fetch the items -- */
      $this->items = $wpdb->get_results($query);
}

8:

//Table of elements
$wp_list_table->display();

Gọi phương thức

/**
 * Prepare the table with different parameters, pagination, columns and table elements
 */
function prepare_items() {
   global $wpdb, $_wp_column_headers;
   $screen = get_current_screen();

   /* -- Preparing your query -- */
        $query = "SELECT * FROM $wpdb->links";

   /* -- Ordering parameters -- */
       //Parameters that are going to be used to order the result
       $orderby = !empty($_GET["orderby"]) ? mysql_real_escape_string($_GET["orderby"]) : 'ASC';
       $order = !empty($_GET["order"]) ? mysql_real_escape_string($_GET["order"]) : ’;
       if(!empty($orderby) & !empty($order)){ $query.=' ORDER BY '.$orderby.' '.$order; }

   /* -- Pagination parameters -- */
        //Number of elements in your table?
        $totalitems = $wpdb->query($query); //return the total number of affected rows
        //How many to display per page?
        $perpage = 5;
        //Which page is this?
        $paged = !empty($_GET["paged"]) ? mysql_real_escape_string($_GET["paged"]) : ’;
        //Page Number
        if(empty($paged) || !is_numeric($paged) || $paged<=0 ){ $paged=1; } //How many pages do we have in total? $totalpages = ceil($totalitems/$perpage); //adjust the query to take pagination into account if(!empty($paged) && !empty($perpage)){ $offset=($paged-1)*$perpage; $query.=' LIMIT '.(int)$offset.','.(int)$perpage; } /* -- Register the pagination -- */ $this->set_pagination_args( array(
         "total_items" => $totalitems,
         "total_pages" => $totalpages,
         "per_page" => $perpage,
      ) );
      //The pagination links are automatically built according to those parameters

   /* -- Register the Columns -- */
      $columns = $this->get_columns();
      $_wp_column_headers[$screen->id]=$columns;

   /* -- Fetch the items -- */
      $this->items = $wpdb->get_results($query);
}

8 sẽ tạo ra sự đánh dấu đầy đủ của bảng danh sách, từ khu vực trước và sau đến nội dung bảng và bao gồm cả tiêu đề và chân trang của bảng. Nó cũng tự động tạo tất cả các liên kết phân trang cho bạn, vì vậy kết quả sẽ trông như thế này:

Trong quá trình tải xuống kèm theo bài viết này, bạn sẽ tìm thấy tệp PHP hoàn chỉnh chứa định nghĩa lớp và ví dụ về việc triển khai của nó. Nó được đặt tên là testwplisttable.php và nó được viết dưới dạng một plugin đơn giản mà bạn có thể đặt trong thư mục plugin WordPress của mình và kích hoạt nếu bạn muốn xem nó làm gì.

Sự kết luận

Tạo một lớp PHP chỉ để hiển thị một bảng dữ liệu có vẻ như quá mức cần thiết. Nhưng lớp này rất dễ dàng để tạo và tùy chỉnh. Và một khi nó đã hoàn thành, bạn sẽ rất vui vì các phần của các bảng khó thực hiện, chẳng hạn như phân trang và sắp xếp lại, hiện được chăm sóc.

Ngoài ra, vì đánh dấu được tạo chính xác là những gì WordPress hỗ trợ, nếu một bản cập nhật được phát hành một ngày, các bảng của bạn sẽ vẫn ở trong tình trạng tốt.

Mã PHP mà chúng tôi đã sử dụng là sạch sẽ và dễ hiểu. Và làm chủ các chức năng mặc định đã giành được một thời gian dài.

Những gì chúng tôi đã thấy ngày hôm nay là việc triển khai cơ bản của bảng danh sách WordPress, nhưng bạn có thể thêm các phương thức được hỗ trợ khác vào lớp để có thêm chức năng.

Để biết thêm thông tin, hãy đọc trang Codex dành riêng cho các bảng danh sách WordPress và xem xét một ví dụ bảng danh sách tùy chỉnh khác.

Tôi hy vọng bạn đã tìm thấy bài viết này hữu ích, và tôi chúc bạn may mắn với các bảng danh sách!

(al)

Chúng ta có thể tạo bảng quản trị trong WordPress không?

Làm cách nào để tạo một bảng danh sách trong WordPress?

Làm cách nào để tạo một bảng đơn giản trong WordPress?

Làm cách nào để tạo một bảng động trong WordPress?