如何在WordPress管理后台创建支持动态数据读取与管理的自定义表格

最适配原生后台的实现方式是复用WordPress自带的WP_List_Table类，该类是后台所有官方列表页（用户、文章、媒体管理等）的底层基类，继承开发可以直接复用原生的分页、搜索、批量操作、排序等功能，最终效果和官方用户管理页完全一致，无需额外开发前端样式。

具体实现步骤 #

• 步骤1：创建自定义列表类，继承WP_List_Table #

  可以将代码放在当前主题functions.php文件或者自定义插件的主文件中，代码示例如下：

  // 后台默认不会自动加载WP_List_Table，需要先引入
  if (!class_exists('WP_List_Table')) {
      require_once ABSPATH . 'wp-admin/includes/class-wp-list-table.php';
  }
  
  class Custom_Data_List_Table extends WP_List_Table {
      // 初始化列表基础参数
      public function __construct() {
          parent::__construct([
              'singular' => 'custom_data',
              'plural'   => 'custom_datas',
              'ajax'     => false
          ]);
      }
  
      // 定义表格展示的列
      public function get_columns() {
          return [
              'cb'         => '<input type="checkbox" />', // 批量操作复选框
              'id'         => 'ID',
              'name'       => '名称',
              'email'      => '邮箱',
              'created_at' => '创建时间'
          ];
      }
  
      // 定义支持排序的列
      public function get_sortable_columns() {
          return [
              'id'         => ['id', true],
              'name'       => ['name', false],
              'created_at' => ['created_at', false]
          ];
      }
  
      // 定义批量操作选项
      public function get_bulk_actions() {
          return [
              'delete' => '批量删除'
          ];
      }
  
      // 渲染复选框列
      public function column_cb($item) {
          return sprintf('<input type="checkbox" name="cid[]" value="%d" />', $item['id']);
      }
  
      // 渲染名称列的操作按钮（编辑、删除）
      public function column_name($item) {
          $actions = [
              'edit'   => sprintf('<a href="?page=%s&action=edit&cid=%d">编辑</a>', $_REQUEST['page'], $item['id']),
              'delete' => sprintf('<a href="?page=%s&action=delete&cid=%d" onclick="return confirm(\'确定删除该数据吗？\')">删除</a>', $_REQUEST['page'], $item['id'])
          ];
          return sprintf('%s %s', esc_html($item['name']), $this->row_actions($actions));
      }
  
      // 普通列默认渲染逻辑
      public function column_default($item, $column_name) {
          return esc_html($item[$column_name]);
      }
  
      // 核心逻辑：读取数据库数据、处理分页、排序、增删操作
      public function prepare_items() {
          global $wpdb;
          $table_name = $wpdb->prefix . 'your_custom_table'; // 替换为自己的数据库表名
  
          $per_page = 20; // 每页显示条数
          // 配置列头
          $columns = $this->get_columns();
          $hidden = [];
          $sortable = $this->get_sortable_columns();
          $this->_column_headers = [$columns, $hidden, $sortable];
  
          // 处理排序参数
          $orderby = (!empty($_GET['orderby'])) ? $_GET['orderby'] : 'id';
          $order = (!empty($_GET['order'])) ? $_GET['order'] : 'desc';
  
          // 处理搜索逻辑
          $search = (!empty($_POST['s'])) ? trim($_POST['s']) : '';
          $where = '';
          if ($search) {
              $where = $wpdb->prepare("WHERE name LIKE %s OR email LIKE %s", '%' . $wpdb->esc_like($search) . '%', '%' . $wpdb->esc_like($search) . '%');
          }
  
          // 处理单条删除逻辑
          if (isset($_GET['action']) && $_GET['action'] == 'delete' && isset($_GET['cid'])) {
              $wpdb->delete($table_name, ['id' => intval($_GET['cid'])]);
          }
          // 处理批量删除逻辑
          if ((isset($_POST['action']) && $_POST['action'] == 'delete') || (isset($_POST['action2']) && $_POST['action2'] == 'delete') && isset($_POST['cid'])) {
              foreach ($_POST['cid'] as $cid) {
                  $wpdb->delete($table_name, ['id' => intval($cid)]);
              }
          }
  
          // 分页处理
          $total_items = $wpdb->get_var("SELECT COUNT(*) FROM $table_name $where");
          $current_page = $this->get_pagenum();
          $offset = ($current_page - 1) * $per_page;
          // 读取当前页数据
          $this->items = $wpdb->get_results($wpdb->prepare("SELECT * FROM $table_name $where ORDER BY $orderby $order LIMIT %d OFFSET %d", $per_page, $offset), ARRAY_A);
  
          // 配置分页参数
          $this->set_pagination_args([
              'total_items' => $total_items,
              'per_page'    => $per_page,
              'total_pages' => ceil($total_items / $per_page)
          ]);
      }
  }
  

• 步骤2：创建后台菜单挂载表格 #

  同位置添加后台菜单和页面渲染逻辑：

  // 注册后台菜单
  add_action('admin_menu', 'add_custom_data_menu');
  function add_custom_data_menu() {
      add_menu_page(
          '自定义数据管理',
          '自定义数据',
          'manage_options', // 仅管理员可访问，可按需修改权限
          'custom-data-manage',
          'render_custom_data_page',
          'dashicons-list-view',
          25
      );
  }
  
  // 渲染菜单页面内容
  function render_custom_data_page() {
      global $wpdb;
      $table_name = $wpdb->prefix . 'your_custom_table'; // 替换为自己的数据库表名
  
      // 处理新增/编辑表单提交
      if (isset($_POST['custom_data_submit'])) {
          $data = [
              'name' => sanitize_text_field($_POST['name']),
              'email' => sanitize_email($_POST['email'])
          ];
          if (isset($_POST['cid']) && $_POST['cid']) {
              // 更新已有数据
              $wpdb->update($table_name, $data, ['id' => intval($_POST['cid'])]);
          } else {
              // 新增数据
              $wpdb->insert($table_name, $data);
          }
      }
  
      // 渲染编辑/新增表单页面
      if (isset($_GET['action']) && $_GET['action'] == 'edit') {
          $item = [];
          if (isset($_GET['cid'])) {
              $item = $wpdb->get_row($wpdb->prepare("SELECT * FROM $table_name WHERE id = %d", intval($_GET['cid'])), ARRAY_A);
          }
  ?>
      <div class="wrap">
          <h1><?php echo isset($item['id']) ? '编辑数据' : '新增数据'; ?></h1>
          <form method="post">
              <input type="hidden" name="cid" value="<?php echo isset($item['id']) ? esc_attr($item['id']) : ''; ?>">
              <table class="form-table">
                  <tr>
                      <th>名称</th>
                      <td><input type="text" name="name" value="<?php echo isset($item['name']) ? esc_attr($item['name']) : ''; ?>" required class="regular-text"></td>
                  </tr>
                  <tr>
                      <th>邮箱</th>
                      <td><input type="email" name="email" value="<?php echo isset($item['email']) ? esc_attr($item['email']) : ''; ?>" required class="regular-text"></td>
                  </tr>
              </table>
              <p class="submit">
                  <button type="submit" name="custom_data_submit" class="button-primary">保存</button>
                  <a href="?page=custom-data-manage" class="button">返回列表</a>
              </p>
          </form>
      </div>
  <?php
          return;
      }
  
      // 渲染数据列表页面
  ?>
      <div class="wrap">
          <h1 class="wp-heading-inline">自定义数据管理</h1>
          <a href="?page=custom-data-manage&action=edit" class="page-title-action">新增数据</a>
          <form method="post">
              <?php
              $list_table = new Custom_Data_List_Table();
              $list_table->prepare_items();
              $list_table->search_box('搜索数据', 'search_custom');
              $list_table->display();
              ?>
          </form>
      </div>
  <?php
  }
  

• 步骤3：替换适配自己的业务逻辑 #

  代码中需要根据实际需求修改的部分：

  • 将$wpdb->prefix . 'your_custom_table'替换为自己的数据库表名
  • 修改get_columns方法中的列配置，和自己的数据库字段对应
  • 修改编辑表单的字段配置，适配自己的业务字段

• 注意事项 #

  • 所有用户提交的数据都做了原生安全校验，避免SQL注入和XSS漏洞，无需额外处理
  • 建议将代码放在自定义插件中，避免主题更新时代码丢失
  • 权限参数manage_options可以按需替换为其他角色的权限标识，适配不同角色的访问需求

内容的提问来源于stack exchange，提问作者Juan Carlos Garcia