WordPress 一直不太擅长处理表格。基本上，如果你想在 WordPress 中展示数据表，很可能需要手动编写整个演示文稿——使用原始 HTML 和 CSS 来让一切看起来美观。
而且 不，我并没有忘记新的区块编辑器。虽然它确实让表格的创建和显示变得更简单，但它仍然不是一个完美的解决方案，特别是对于大型数据集。
无论如何，既然表格是我们 CodeinWP 在文章中经常使用的东西，我想今天与大家分享一些我们的顶级策略。
在本指南中，我将介绍一些创意方法，教你如何在 WordPress 中使用 HTML 表格/数据表，让它们看起来完美 ✨，同时确保它们针对移动设备进行了优化，并且对 SEO 友好。
我们在 WordPress 中处理数据表的三重方法
为了快速总结我们的方法，我们通过三种不同的方式来处理 WordPress 中的数据表：
(a) 使用简单、响应式且美观的表格来展示基本数据，让文章的部分内容更容易理解。
示例：
(b) 使用我们称之为“中级表格”的功能，允许一些额外功能，如用户排序和鼠标悬停时高亮显示行。
实时示例：
| Hosting Company | Rating / 5 | Survey Popularity | Market Popularity (Alexa) | | — | — | — | — | | GoDaddy | 3.5 | 0.41 | 223 | | Bluehost | 3.3 | 0.26 | 1780 | | HostGator | 3.7 | 0.30 | 1872 | | WPEngine | 4.4 | 0.37 | 4065 | | SiteGround | 4.6 | 1.00 | 5708 | | DreamHost | 4.1 | 0.22 | 10030 | | A2 Hosting | 3.8 | 0.16 | 12709 | | Cloudways | 4.5 | 0.39 | 18544 | | Kinsta | 4.8 | 0.25 | 23350 | | Flywheel | 4.6 | 0.18 | 34689 |
来自 我们的托管调查
(c) 使用自动刷新表格，允许更高级的内部运作，这些在用户面前不太可见。例如，这里的表格是基于 Google 表格构建的，它会自动更新（也就是说，当我们更新表格时，表格也会更新）。
示例：
以下是你如何模仿我们的方法并构建一些很棒的数据表在 WordPress 中：
策略 #1：使用 Visualizer 让你的表格生动起来
让我们从一个可能也是这批方法中最先进的方法开始！随着我们在本文中继续深入，我会让事情变得更简单。
Visualizer 是我们自己的插件之一，是实现第一种处理 WordPress 中数据表的策略的主要工具。
- 🗒️ 什么是 Visualizer？它是一个插件，可让你创建图表、图形和表格，然后通过短代码或区块将它们包含在你的博客文章中。如果你只需要基本功能，它很容易使用，但如果你想进一步探索更多功能，它也非常强大。
Visualizer 的酷炫功能之一是，你可以从多个来源加载数据——无论是表格还是图表。例如，在创建新表格时，你可以从以下方式导入：
- 一个 CSV 文件，
- 一个 URL（包括 Google Sheets），
- 另一个图表，
- WordPress（通过创建过滤器/工作流，然后浏览 WordPress 数据库并调出您想要的数据），
- 直接访问数据库（使用原始 SQL 查询），
- 此外，您也可以手动输入数据。
那么，让您的表格焕发活力 在这里是如何体现的呢？
表格的难点在于，手动创建它们所花的时间与之后更新它们的时间基本相同。我们都希望把表格做成一次性的任务，让所有内容自动保持最新。
使用 Visualizer，您可以选择从 URL 获取表格数据，然后设置导入每 12 小时/每天/每三天重复一次。
这实际上意味着您得到的是一个根据数据源变化自动刷新的表格。换句话说：您无需再次返回手动更新它。
以下是您可以充分利用这一功能的四种创意方式：
让您的案例研究或分析文章自动保持最新
我们深入参与了 WordPress 托管服务市场。我们有大量关于这个主题的文章，其中大多数都需要持续更新。
我们主要的托管服务对比的其中一个版本包含一个动态表格，突出显示所列主机的加载时间。它看起来是这样的（动态表格）：
（您现在访问那篇文章时可能看不到它的运行效果；我们经常更换它，测试很多东西。）
整个表格是从 Google Sheets 自动获取的。甚至 LOGO 和链接也存储在 Google Sheets 中（作为原始 HTML）。例如，每当我们更新加载时间时，表格中也会同步更新。更不用说，用户还可以对表格进行排序。
设置这个并不困难：
- 准备您的 Google Sheets
标准操作。这里有一个示例：
然后，按照本指南"将其发布到网页"。
- 在 Visualizer 中创建表格
首先，安装 Visualizer 插件，当然！
转到 媒体 → Visualizer 库 并点击 新建。选择 表格。
在设置窗口中，选择 从 URL 导入数据，进入计划导入，然后输入导入的 URL 和计划时间。如下所示：
保存表格。
- 将表格添加到文章/页面
通过短代码或使用区块编辑器包含表格，就这样，您在 WordPress 中有了数据表格！
同样，通过这种设置，您可以自动获取表格数据，然后还可以让这些表格自动更新。
让多个文章中的多个表格自动保持最新
这与前面提到的场景相关，但角度略有不同。
基本上，没有什么可以阻止您使用同一个 Google Sheets 作为多个表格的数据源。
这意味着您可以在多个文章/页面中包含相似的表格，而不必担心它们会随着时间的推移而不同步（例如，您更新了其中一个却忘记了更新另一个，等等）。
在 Visualizer 中设置表格时，您可以进入高级设置，调整各种内容，如分页、行数、禁用/启用用户排序、启用搜索等。这意味着您的表格即使使用相同的数据源也可以看起来不同。
让您的流量/用户/销售数据自动保持最新
网络业务中一直存在一种趋势，在他们的网站上分享各种数字/指标，如流量、销售额、服务用户数量等。
然而，并不是每个人都愿意嵌入外部服务，因此无法以任何方式对其进行审核。
理想情况下，即使你非常透明，你也不希望一觉醒来发现你的购物车或流量工具的嵌入显示大幅下降——而你的标题可能仍然写着"看看我们做得有多好！"
如果你添加另一层，先将数据导入到Google表格中，然后你可以在数据被获取到流量/销售表格并在网站上发布之前审核所有更改。
设置与之前的场景相同。只需创建一个新的Google表格，导入或输入你的数字，然后将其连接到Visualizer表格或图表。
查询你的数据库（自动）
Visualizer还有另一个很酷的功能；它可以通过原始SQL查询直接从你的WordPress数据库导入表格数据。
这确实是相当高级的东西，但如果你愿意尝试，它也能给你带来很多可能性。
一些快速的想法：
首先，你可以轻松展示评论最多的帖子。你不仅可以透明报告中使用这样的列表，还可以在归档页面中使用。示例：
要构建这样的表格，只需进入Visualizer，创建一个新表格，然后选择从数据库导入。
在查询窗口中，你可以输入类似这样的内容：
SELECT post_title AS Post, COUNT(DISTINCT c.comment_ID) AS Comments FROM wp_posts p LEFT JOIN wp_comments c ON p.id = c.comment_post_ID GROUP BY p.ID ORDER BY Comments DESC LIMIT 10
这将展示你评论最多的前10个帖子。
你可以使查询更复杂以获取URL，这样就可以让这些帖子标题成为可点击的链接。这只是一个例子。以下是你还可以做的一些其他事情：
- 列出某个分类或某个作者的所有帖子
- 查看其他插件用于存储数据的表格，从中获取相关数据
- 展示你WooCommerce最畅销的产品，以及销售数量、链接、价格或其他你希望展示的内容
- 对Easy Digital Downloads做同样的操作；这里有一些现成的查询
这就是关于Visualizer以及我们如何使用它的全部内容。但如果你不需要这种高级自动化，也有其他解决方案：
使用TablePress进行可靠的排序和表格编辑
我们也是TablePress的忠实粉丝，并在多篇文章中使用它。
例如，这里有一个大型表格——列出了WordPress主题市场的前100名玩家。预览：
我们喜欢TablePress的地方是，我们可以轻松重新排列行、隐藏行、复制行，还可以给用户一些控制来排序表格。
例如，对于那个特定的表格，我们在后端有一些更多的列没有显示（红色的那些）。TablePress不会强迫我们删除它们——我们只需要将它们从显示中隐藏即可。
使用Shortcodes Ultimate美化你的HTML表格
就个人而言，Shortcodes Ultimate（SU）是我有史以来最喜欢的插件之一。
在它的许多短代码中，还有一个可以让你的标准HTML表格看起来更美观。
这是一篇比较顶级VPN服务的文章中的表格：
它是通过原始HTML构建的，然后只是在外面加了一个SU短代码。就是这样：
[ su_table][ /su_table]
你看到的所有行样式和边框都是SU的。
换句话说，如果你的主题没有特别好的CSS来处理表格，那就使用SU吧。
📱 注意；本文讨论的三种解决方案——Visualizer、TablePress和SU，都可以输出适合移动设备和响应式的表格。
结论
我鼓励你尝试这三个插件。我们喜欢Visualizer，因为它是我们的原创，但我们不得不承认，另外两个在特定任务方面也相当不错！
你在WordPress中使用数据表格吗？
你对表格及其在WordPress现代UI中的地位有什么看法？
Gutenberg块编辑器使创建表格变得更加用户友好，所以普通用户现在可能更愿意尝试使用它们。毕竟，表格是每个使用过MS Word的人都非常熟悉经典内容之一。那为什么你不能"直接添加"到WordPress呢，对吧？
你在WordPress中经常使用数据表格吗？如果是这样，你是如何创建它们的？
👉 仍然不信服？为什么不尝试用图表和图形来展示数据呢？
…
别忘了参加我们的WordPress网站加速速成班。学习更多如下：
如何加速你的WordPress网站
通过一些简单的修复，你可以将加载时间减少50-80%🚀
通讯表单 – 侧边栏
名字 *
你的邮箱 *
立即订阅！
如果你是人类，请留空此字段。
Δ
输入你的邮箱即表示你订阅我们的每周通讯。你可以随时改变主意。我们尊重你的收件箱和隐私。
