将WordPress管理表添加到具有WP_LIST_Table的插件

技术教程 2022年3月3日
552 0

WordPress管理表或列表表在管理区域中广泛使用，以列出帖子，页面，用户等.

如果您想要使用自己的数据添加此类列表表，WordPress提供了使用WP_List_table类执行的效果.

在本文中，我将向您展示如何使用WordPress API将WordPress管理表或列表表添加到您的插件的管理屏幕中.

继续阅读，或使用以下链接跳转:

  • WordPress管理表-背景

    • 何时使用WordPress管理表


  • wp_list_table类的解剖学
  • 用户元操作的自定义列表表插件
  • 继承wp_list_table类
  • 渲染列表表

    • 添加插件菜单页面
    • 验证鞍圆柱列表表设置


  • 覆盖wp_list_table类的方法

    • wp_list_table :: get_columns()
    • wp_list_table :: prepaster_items()
    • wp_list_table :: column_default()
    • wp_list_table :: column_cb()
    • wp_list_table :: get_sortable_columns()
    • wp_list_table :: set_pagination_args()
    • wp_list_table :: search_box()
    • wp_list_table :: get_bulk_actions()
    • 将行操作链接添加到列表表



WordPress列表表几乎在仪表板中的任何地方使用.您将发现它们用于显示帖子，页面，用户，评论等以及许多流行插件.多年来，他们成为在WordPress中显示表格信息的事实标准.

对于本文，我在使用面向对象构造的插件的帮助下构建了一个自定义管理表.可以从此处下载插件以跟随文章.但在我们进入这一点之前，让我们了解Admin表真的是什么.

我也将在物品的其余部分中互换使用术语Admin Tables和List Tables.

注意:本文适用于中级高级WordPress开发人员.在继续之前，您将需要WordPress，PHP和WordPress插件API的工作知识.如果您不确定或想要进修，我建议您通过以下内容读取:

  • 初学者的Wordpress开发:入门
  • 初学者的WordPress开发:小部件和菜单
  • 初学者的WordPress开发:建筑插件
  • 高级WordPress开发:面向对象编程的简介

wordpress管理表-背景

您已在访问仪表板中的帖子和用户等页面时与管理表一起互动.使用位于/wp-admin/includes/class-wp-list-table.php的C2>类来实现WordPress管理表.它提供了必要的框架，以便以表格方式显示信息，并直观地操纵数据.以下是典型的WordPress管理表需要的概述:

wordpress admin table wordpress admin表

您将注意到熟悉的批量动作，使用HOVER链接，分页和屏幕选项的行动操作，所有这些都是WordPress以来的一个组成部分.

虽然Screen Options不是WP_List_Table的一部分，它们与它密切合作.它们允许控制列的可见性以及通过限制页面上显示的信息来控制分页.

何时使用WordPress管理表

只是因为WordPress API提供了构建本机列表表的方法并不意味着必须使用它.在我看来，决定使用WordPress的大因素提供了管理表应该是用户体验.使用WP_List_Table类，WordPress为您定制表格UI.使用管理表(遍布WordPress)和本机外观的熟悉元素是肯定会帮助用户以无缝方式与表数据交互.

WP_LIST_TABLE类的解剖学

自WordPress版本3.1.0的成立以来，WP_List_Table类越来越多地增长开发人员之间的普及.WP_LIST_TABLE的WordPress Codex类参考提供有关其方法，属性和使用的全面信息.

下面的信息图表概述了来自类参考的管理表的构建块.

anatomy-wp-list-table-class wp_list_table 的构建块

一个更复杂的管理表还将采用额外的下拉滤波器和表格上方的操作链接，例如用于显示"已发布的帖子"和"草稿"的表.

现在我们现在对一个管理表和WP_List_Table类进行了公平的理解，让我们把这些知识与自定义插件的帮助进行使用.

用户元操作的自定义列表表插件

在我进入列表表的实现细节之前，我想简要触摸我为此文章做好准备的自定义插件.您可以从这里下载它来跟随.我建议您在合适的编辑器中打开，并在本地开发wordpress设置中安装它仅.

插件基于我自己的插件模板，它是原始WordPress插件样板项目的叉子.它与原始项目类似于许多方面，但也支持名称空间和自动加载.这样，我不需要为每个类或函数都有唯一的前缀，而不是很多include和require语句.但是，我的插件的最低所需的PHP版本为5.6.0.

我们主要使用以下目录中的文件:

  • inc/core/* -用于插件的核心功能
  • inc/admin/* -在管理区域中显示列表表
  • inc/libraries/* -插件的库

根据自己的编码和布局偏好，可以自由地构建插件.我更愿意使用Boilerplate起点，因为它们是WordPress插件手册中列出的许多最佳实践中.

目的

自定义插件在自己的管理表中显示所有已注册的WordPress用户，并控制屏幕选项，分页和行动链接，以在用户元数据上执行操作.每个行操作都会导致插件页面执行这些操作.

此用例肯定不是我无法使用user_row_actions添加到默认WordPress用户页面的唯一功能的情况;但是，它是从头开始实现列表表的目的.让我们开始吧.

继承wp_list_table类

要创建管理表，您需要在插件中定义一个子类，它扩展WordPress提供的Core WP_List_Table类.因此，在您应该做的第一件事中，将文件class-wp-list-table.php拆分为/wp-admin/includes/到您的插件.我强烈推荐这是因为核心类已经被标记为私有，因此，WordPress的类别或其方法的任何潜在变化都不会破坏您的插件.

在我的插件中，我已将文件复制到inc/libraries并添加了Namespace指令.如果您不使用名称空间，则需要为所有内容进行前缀.

importing the wp-list-table class manually 复制wp列表表类文件

然后我在inc/admin/class-user-list-table.php中定义了我自己的php子类User_List_Table，它在我的插件的文件夹inc/libraries下扩展的基本WP_List_Table类.

上面的代码段是一个鞍骨实现，具有两种方法必须覆盖.显然，在儿童班上需要完成很多，但我想首先渲染空名单表开始.

呈现列表表

在此阶段，您可以选择将构造函数和其他方法添加到子类;但是，我更喜欢首先渲染空名单表.我发现这种自上而下的方法相当有效，因为我可以看到每个阶段的列表表的输出，使得熨烫可能蠕变的错误.

渲染列表表通常需要三个步骤:

  • 实例化子列表表类
  • 呼叫prepare_items() -在渲染表

    • 之前处理数据准备

  • 调用display() -表格的实际渲染

这两种方法将轮子设置在运动中.所以让我们来看看插件中调用这些方法的位置和方式.

添加插件菜单页面

插件在用户下有一个子菜单页面，这是显示自定义用户列表表的位置.

user-menu for the list table 列表表 的菜单页面

要查看如何添加用户子菜单页面，请在插件的inc/admin/class-admin.php中查看inc/core/class-init.php中的define_admin_hooks()方法和add_plugin_admin_menu()方法.

注意GIST中的回调load_user_list_table()为add_users_page().这是调用方法prepare_items()和display()的地方.

但是，我在load_user_list_table_screen_options()中实例化子类，而是是页面钩的回调.它只是在加载插件页面之前执行，并在此处创建我的子类的实例将允许WordPress自动在屏幕选项面板中自动添加列表表的列.控制列表表中的分页也在此处添加了screen options.

还请注意，如果要利用批量操作等功能，则需要以HTML表单包裹.我更愿意混合HTML，这就是为什么我使用include_once指令加载partials-wp-list-table-demo-display.php，其中最终调用该方法.

验证鞍圆柱列表表设置

当我在"用户"菜单下打开插件页面时，WordPress注意到正在请求列表表，并且由于没有提供给它的数据，因此呈现出一个消息"未找到项目".

barebone-list-table-implementation 鞍骨用户列表表

注意Wordpress如何填充HTML form元素，以及Inspect视图中的列表表.它还自动添加class属性以控制样式以符合WordPress用户界面标准.使用表格正确渲染，让我们来看看其他方法来完成用户列表表.

注意:在此阶段，由于子类的不完整实现，WordPress将在调试日志中生成大量警告.使用像developer的插件以在WordPress日志中保持手表.

WP_LIST_TABLE类的覆盖方法

继续我的自上而下的方法，我继续前进并添加了表列.为此，您需要在子类中覆盖get_columns().

wp_list_table :: get_columns()

该方法预期包含key-value对的数组，其中键是列slug，值是列表表中列标题的文本.

注意列cb，这是一个特殊列，使复选框呈现与批量动作一起使用.我还通过覆盖no_items()方法来修改"找不到找到的项目"消息.在添加列详细信息后，这是我的表.

wp-list-table-get-columns method retering get_columns() 之后检索列

与桌面塑造得很好，然后我将必要的代码添加到prepare_items()以将数据从数据库填充到列表表中.

wp_list_table :: prepass_items()

您必须提供自己的prepare_items()来处理表数据.在呈现表之前，应明确调用该方法.因此，必须在将在显示表之前处理诸如获取，排序，分页，过滤等的所有数据相关操作.

要加载表数据，我在fetch_table_data()中查询wordpress数据库，并在将其分配给父类的items变量之前存储阵列中的结果.

但是，这是足以在表中显示数据的足以.要完成显示，还需要使用column_*()方法提供特定于列的实现.

wp_list_table :: column_default()

在上面的方法get_columns()中，我提供了每列的柱塞.这些块可用于识别各个列方法.虽然为每个列提供专用方法是一个很好的做法，但您也可以简单地使用column_default()方法.WP_List_Table类默认为column_default()时无法找到特定列的方法.

这呈现了列，我能够在我的列表表中看到数据.

wp-list-table-display-column-data 在添加column_default()方法后列表表数据

wp_list_table :: column_cb()

如果要使用批量操作来处理行，您还需要为column_cb()提供一个实现，这是特定列方法的特殊情况.

在我的列表表中呈现的所有行呈现复选框.复选框字段的值应该是唯一的user_login或id，以便您可以明确识别记录.

我在列表表中添加了对排序和分页的支持.

使用wp_list_table :: get_sortable_columns()

覆盖get_sortable_columns()将使指定的列在列表表中排序.但是，要在prepare_items()中写入数据的代码需要写入数据.在我的示例中，我在SQL本身中执行了在fetch_table_data()中的数据中进行排序，如上所示.

当在列上执行排序时，其引用可通过SuperGLoabls $_GET['orderby']和$_GET['order']获得.

wp-list-table-sortable-columns 定义列表表中的排序列

处理与wp_list_table的分页:: set_pagination_args()

我早期添加的屏幕选项已经有控件限制表中的数据.要将这些与表链接，我使用get_items_per_page()和set_pagination_args()来设置prepare_items()中的分页参数.

渲染各个表页的数据子集，我在渲染之前在我的结果数组上使用array_slice().

wp-list-table-pagination 添加分页列表表

下一个，我将搜索框，批量操作和行动操作添加到我的列表表中.

要添加搜索框，则需要将其包裹在一个表单上以及隐藏的字段中，以确保它提交到插件的页面.我在display()之前在partials-wp-list-table-demo-display.php中添加了这些.在prepare_items()中完成搜索数据的处理.

wp-list-table-search-data 将搜索框添加到列表表

当执行搜索时，搜索键将通过SuperGlobal $_REQUEST['s']可用.在我的示例中，我使用array_filter和搜索键操纵结果数组.

wp_list_table :: get_bulk_actions()

通过覆盖get_bulk_actions()添加批量操作，并且需要在关联数组中指定操作.需要在prepare_items()中执行操作的实际处理.

在提交批量操作时，将设置两个变量action和action2.该值将取决于您申请的bulk action，上面或下方的一个.

wp-list-table-bulk-actions 列表表中的批量操作和行动操作

在我的插件中，handle_table_actions()方法调用prepare_items()负责处理用户操作.

一旦验证了OnCE，我加载了inc/admin/views/下的partials-wp-list-table-demo-bulk-download.php以处理批量动作.

最后，我添加了表行动作链接.

向列表表添加行操作链接

要添加行操作链接，您需要为应显示应显示操作链接的表列提供特定于列的实现.在我的插件中，我将两个动作链接- Add Meta和View Meta添加到user_login列.

在我的示例中，当执行行动操作时，用户ID，自定义ONCE和操作都作为URL参数的一部分提供./users.php?page=nds-wp-list-table-demo&action=view_usermeta&user_id=11&_wpnonce=9c38dd6c2c
这些用于处理prepare_items()中的用户动作.我处理了相同方法handle_table_actions()的行动操作，因为批量动作.

您可以识别使用current_action()的动作，并相应地引导用户.查看<C85下的partials-wp-list-table-demo-view-usermeta.php>以查看如何处理视图元动作的请求.

就是这样！这是完成的列表表.

custom-user-list-table 用wp_list_table类组建的自定义用户列表表

包装

我希望你发现这篇文章很有用.以下是在流行插件中使用的wp_list_table类的一些示例:

  • Woocommerce
  • 事件日历
  • 轻松数字下载

list(1)WordPress(893)wp(22)
♥赞7

相关文章

发表评论