最好的 WordPress 表格和图表插件?
已发表: 2022-02-01需要一种在 WordPress 网站上显示数据、表格或图表的方法? 在我们的实践 wpDataTables 评论中,我们将看看简单或复杂表的最强大的解决方案之一。
一般来说,wpDataTables 是您会发现的最灵活的表格和图表插件之一。 您可以从大量不同来源导入或同步数据,包括 Excel、Google 表格、CSV、JSON、WordPress 网站的数据库、外部数据库等。 如果需要,您可以从任何表格创建各种图表。
或者,使用新的简单表格构建器,您可以设计简单的可视化表格,例如产品比较表或定价表。
最重要的是,前端和后端的用户界面都非常出色,这为您的访问者提供了出色的体验,也使您可以轻松地使用表格和图表。
总的来说,我认为 wpDataTables 插件非常擅长它的功能,所以我们的 wpDataTables 评论通常会非常积极。
在下面的实践部分中,我将重点介绍 wpDataTables 中的关键功能,并向您展示一切是如何工作的,以便您了解积极性的来源。
注意——我们最初在 2018 年发布了这篇评论,但我们在 2021 年 10 月对其进行了全面更新,以说明 wpDataTables 界面的新功能和更改。
wpDataTables 评论:快速了解功能

首先,您使用 wpDataTables 创建的所有表格和图表都是响应式的。 我知道——“响应式”在 2021 年并不是什么性感的东西。但是你会对不能很好地处理响应式设计的表格插件的数量感到惊讶,所以这实际上是一个很大的好处。 您可以设置自己的自定义断点并隐藏平板电脑/移动设备上的特定列。
关于 wpDataTables,您会喜欢的另一件事是它为您提供了多少种方式来创建表格和/或导入内容。 你可以:
- 从头开始创建表
- 将表链接到外部源,如 Excel、Google 表格、JSON、SQL 查询、PHP 数组等。数据将随着源文件的更改而更新。
- 从外部源导入,例如 Excel 或 Google 表格。 与前一个不同,这是一次性导入。 数据不同步。
- 使用数据库查询构建器将 WordPress 内容添加到您的表中,例如帖子、分类法、postmeta 等。
- 使用 MySQL 查询从您自己的外部数据库中提取数据。
虽然我不确定如何测试它,但 wpDataTables 声称它能够处理大表,甚至可以处理数百万行。
要编辑表格数据,您可以使用类似 Excel 的编辑器,只需单击并输入字段即可。 或者,您可以使用“标准”编辑器,让您在弹出窗口中编辑整行。
对于更简单的表,wpDataTables 最近还推出了“简单表”构建器。 您可以使用它来创建更多的可视化表格,例如产品比较表、定价表等。 基本上,您不需要处理大量数据的表格,但您确实希望对设计进行更多控制。
除此之外,您还可以获得大量设置来控制表格的外观和功能,包括:
- 条件格式
- 前端表格编辑
- 排序选项
- 过滤器功能(包括专用小部件)
- 搜索选项
- 将表格导出到 Excel 或 CSV 的前端选项
- 打印表格的前端选项
哦,是的,wpDataTables 不仅适用于表格! 你也可以用它把你的任何一张桌子变成一张漂亮的图表。 您可以从多种图表类型中进行选择,当您更改表格中的数据时,您的图表将自动更新。 以下是一些图表类型的部分列表:
- 折线图
- 条形图
- 柱形图
- 面积图
- 饼形图
- 甜甜圈图
- 直方图
- 仪表图
- 散点图
- 烛台图
如果您想查看实际的表格和图表,可以在此处查看一些演示。
动手实践 wpDataTables:您会喜欢的八件事
好的,现在让我们动手操作 wpDataTables,我将向您展示这些功能的实际工作原理。 我将以一种线性的方式对此进行介绍,以便您还可以了解使用 wpDataTables 创建表格和图表的感觉。
1. 表构造器向导
为了帮助您创建表,wpDataTables 为您提供了一个精心设计的表构造器向导。
首先,您将选择要从何处获取表数据。 您可以看到我上面提到的六个选项——其中五个选项专注于数据表,同时您还可以获得新的“简单表”选项以获取更多可视化表:

我选择从数据源导入。 就我而言,这是一个已发布的 Google Sheets 表格,其中包含每年奥斯卡男性获奖者的年龄。
对于此方法,您只需粘贴 URL:

wpDataTables 然后为您提供它找到的列的摘要。 如果需要,您可以更改每列的数据类型(例如,您可以将列设为数字或日期)。 如果需要,您还可以手动添加新列:

一旦您对事物的外观感到满意,您就告诉 wpDataTables 导入表,它将引入所有数据。
2. 两种不同的数据表编辑器,包括类 Excel 编辑器
除了用于可视化表格的简单表格构建器(稍后我将与您分享)之外,wpDataTables 还为您提供了两种不同的编辑器来处理数据:
- 类似 Excel 的编辑器——听起来就是这样。 您可以在浏览器中编辑数据,就像在 Excel 单元格中键入一样。
- 标准编辑器——您将获得更直观的界面,以及用于管理列设置等详细信息的弹出窗口。
下面是类似 Excel 的编辑器的工作方式 - 要编辑字段,您只需双击并键入(就像在 Excel 中工作一样):

对于非文本字段,您将获得其他选择器。 例如,您可以为具有日期数据类型的列打开日期选择器。
您还可以打开一个列列表视图,让您快速配置列或对数据进行排序/过滤:

以下是使用标准编辑器的工作原理:

这里的一件好事是,当您在标准编辑器中工作时,您可以快速打开列的设置作为滑出。
总体而言,当您实际处理数据时,类似 Excel 的编辑器会很有帮助。 但标准编辑器的好处是可以轻松访问详细的列控件。 说起…
3.详细的栏目设置
在标准编辑器中,您可以访问每列的详细设置,以便您控制设置,例如:
- 数据类型
- 自定义 CSS 类
- 是否允许排序
- 是否允许过滤。 如果是,如何使用过滤器
- 条件格式。 例如,您可以根据单元格的数据添加自定义 CSS 类(它确实很像 Excel 或 Google 表格中的条件格式)

4.详细的整体表设置
在表格数据上方,您可以获得表格的整体设置集合。
在这里,您可以控制:
- 过滤器、排序和搜索的表范围设置。
- 前端编辑——人们是否可以从前端编辑表格。
- 表格工具——这些让用户可以打印您的表格或将其导出到 Excel/CSV。
这也是您可以打开在各种设备上隐藏某些列的功能的地方:

当您打开响应式折叠时,您会获得新的列设置,可让您在移动设备或平板电脑设备上隐藏各个列。
在最近的版本中,wpDataTables 还添加了一个新的自定义选项卡,可让您自定义表格的设计。 您可以从选择基础“皮肤”开始。 然后,您可以使用其他选项来控制颜色、版式、边框和其他设置:

5. 从表格创建图表
除了表格功能之外,wpDataTables 还包括非常强大的图表功能,可让您将任何一张表格转换为由几个不同图表引擎提供支持的各种类型的图表。

当您创建图表时,您将首先选择要使用的渲染引擎。 您的选择是:
- 谷歌图表
- 高图
- 图表.js
然后,您可以从所选渲染引擎支持的类型中选择要创建的图表类型。 例如,使用 Google Charts,您可以从 14 种不同的图表类型中进行选择:

选择图表类型后,您可以选择现有表之一作为图表的数据源:

然后,您可以准确选择要使用该表中的哪些数据。
例如,您可以只选择两个或三个特定列。
您还可以输入要包含的行的范围,并选择是否遵循表格过滤选项(这很酷,因为如果您的一位访问者在您的网站前端更改了他们的过滤选项,图表实际上会重新呈现自己):

选择要使用的数据后,wpDataTables 将为您提供图表的实时预览,以及控制选项:
- 响应式图表宽度
- 分组
- 颜色
- 边框
- 标签
- 其他一些较小的设置

一旦您对自己的设置感到满意,wpDataTables 就会生成一个简码,您可以在网站的任何地方使用它。 或者,您也可以使用专用块。
6. 专用过滤器小部件
如果您不想在表格上方包含过滤器选项,wpDataTables 还带有自己的专用过滤器小部件,您可以将其放置在任何小部件区域中。 这适用于 WordPress 经典小部件系统和新的基于块的小部件编辑器。
添加小部件时,它将包括活动表的过滤器控件:

7.很多全局设置
除了特定于表格/图表的设置之外,wpDataTables 还在wpDataTables → 设置区域中为您提供了大量选项。 在这里,您可以配置以下内容:
- 是否解析表格中的简码
- 响应式断点
- 颜色
- 字体
- 自定义 CSS 和 JavaScript
- 独立的数据库连接

8. 用于可视化表的新简单表构建器
过去,wpDataTables 几乎专门用于关注数据而不是表设计的数据表。 例如,在过去,您不会将 wpDataTables 用于产品比较表或定价表。
2021 年,当 wpDataTables 推出其新的简单表格构建器时,这种情况发生了变化。 使用简单的表格构建器,您可以获得更直观的表格构建体验,其中包括有用的功能,例如:
- 合并单元格
- 造型
- 星级
- 等等
您可以更好地控制格式,但您会失去使用更高级的数据表选项获得的排序、过滤和分页规则。 您也不能从使用简单表构建器创建的表中创建图表。
出于这些原因,我认为简单的表构建器最适合没有大量数据的表,但如何呈现数据是关键。 同样,一个常见的例子是您自己的产品或您正在推广的附属产品的产品比较表。
下面是一个示例 - 再次,您可以看到您获得了更多格式化选项。 您还可以轻松地将简码插入任何单元格。

在页面下方,您还将获得已完成表格的实时预览。
快速了解导入图表数据的其他方法
上面,我向您展示了如何从 Google 表格中导入数据。 但是 wpDataTables 的一大优点是它在导入数据时非常灵活。
因此,在我完成这篇 wpDataTables 评论之前,让我带您了解可以将数据放入表中的其他方法。
查询生成器
查询生成器允许您查询:
- 来自 WordPress 网站数据库的数据(帖子、分类法等)
- 来自外部 MySQL 数据库的任何数据
如果您选择 WordPress 网站的数据库,wpDataTables 会为您提供这个非常有用的查询构建器,您可以在其中浏览各种帖子类型并创建有针对性的过滤器:

同样,wpDataTables 可以帮助您使用相同的可视化界面生成对外部数据库的查询。
与外部源同步
另一个巧妙的选择是与外部源同步。 使用这种方法,插件将自动更新每次页面重新加载的表(或者如果您使用缓存插件,则每次清除缓存时)。
在这里,您可以从一系列来源中进行选择:
- SQL查询
- CSV 文件
- Excel文件
- 谷歌电子表格
- XML 文件
- JSON文件
- 序列化的 PHP 数组

手动创建表
最后,您始终可以从头开始创建表。 当您走这条路时,您将首先设置要使用的列及其关联的数据类型:

然后,您可以使用类似 Excel 的编辑器或标准编辑器输入数据。
wpDataTables 定价:有限免费版/专业版 59 美元起
WordPress.org 上有一个有限版本的 wpDataTables。 然而,也只是——“有限”。 您可以使用简单表构建器将它用于简单表,但对于严肃的数据表来说,它并不是真正的选择。
如果您特别需要用于数据表或图表的免费表插件,则最好使用不同的选项。
但是,wpDataTables 真正闪耀的地方在于高级版本。
您可以购买具有一年支持和更新的许可证,也可以购买具有终身支持和更新的许可证。 所有许可证都包含所有功能; 唯一的区别是您可以使用它的网站数量:
- 一个站点- 一年许可证 59 美元或终身许可证 189 美元。
- 三个站点- 一年许可证 109 美元或终身许可证 389 美元。
- 无限站点——一年许可证 249 美元或终身许可证 589 美元。
您还可以使用我们独家的 wpDataTables 优惠券代码节省一些钱。
注意– 确保直接从开发商的网站购买。 过去,wpDataTables 仅通过 Envato 的 CodeCanyon 市场销售。 开发者仍然在 CodeCanyon 维护列表页面,但价格比直接从开发者那里购买要高得多,因此我们不建议再通过 CodeCanyon 进行。
wpDataTables 评论:我们的最终想法
在使用了很多 WordPress 表格插件之后,我很有信心地说 wpDataTables 绝对是最好的解决方案之一。
导入表格数据的方式很灵活。 界面使原本可能很复杂的过程变得异常简单。
除此之外,由于有两个不同的编辑器,编辑表格很容易。 您可以在各种设置区域中对整个表格或各个列进行大量控制。
使用新的简单表构建器,您还可以将 wpDataTables 用于更多数据表。 您还可以将其用于更直观的产品比较表、定价表等。
最后,能够从同一个插件创建图表很方便,并且图表功能非常易于使用。
一个缺点是 WordPress.org 上 wpDataTables 的免费版本非常有限,因此您需要为高级版本付费才能访问大多数功能。
话虽如此,如果您愿意为 Pro 版本付费,这绝对是您应该考虑的。
如果您想查看在 WordPress 中使用表格的其他选项,请查看我们的 TablePress 教程。
获取 wpDataTables
️ 不要忘记使用我们独家的 wpDataTables 优惠券来获得 20% 的折扣。
您对 wpDataTables 或我们的 wpDataTables 评论还有任何疑问吗? 请在评价部分留下您的意见。