如何在WordPress中添加移动响应表

桌子是强有力的东西。如果你在互联网上搜索，你会发现各种各样的故事，人们基本上通过使用Excel和表格来自动化他们的整个工作。也就是说，表格有可能为您的网站做一些漂亮的事情。

但WordPress尚未将Excel构建到核心中…那么，您如何利用WordPress站点的表格功能呢? 使用名为wpDataTables的插件。

它可以帮助您为WordPress站点创建各种表格。您可以使用插件的类似Excel的生成器从头开始构建表，或者只需单击几下，就可以直接从Excel或Google工作表导入表。

然后，您可以用各种很酷的方式显示、操作和过滤这些表。

在这篇文章中，我将做两件事：

为您提供有关使用wpDataTables创建可过滤产品比较表的详细教程。虽然这绝不是只有用例，它是最流行的。
告诉你更多关于插件的特性，以及其他一些用例。

最后，您不仅应该知道wpDataTables如何帮助您的站点，还应该知道如何创建自己的可过滤数据表！

wpDataTables特性：为什么它是作业的工具

让我们从头开始：

将您的数据带入。

如果表中没有数据，它们就没有多大帮助，对吗？wpDataTables可以通过两种方式引入数据：

从链接（Google Sheets）或文件上传（JSON、CSV、Excel等）
通过仪表板中的表构造函数，在类似Excel的界面中输入数据

您还可以上载一个文件作为表的基础，然后在WordPress仪表板中进一步编辑它。

一旦上传了表，就可以使用简单的短代码在前端显示它。您的桌子反应灵敏（除非禁用），所以它们看起来总是很棒。

此外，您还可以添加详细的筛选选项，以便读者可以深入了解他们所需的信息。这种过滤尤其重要，因为wpDataTables是为了能够处理具有数百万行的大型表而构建的。

您可以使用插件内置的颜色和字体设置或通过插件界面中轻松添加的自定义CSS来设置表格样式。

如果您想操纵数据，可以基于表轻松构建各种图表。您甚至可以更进一步，根据表中的数据创建详细的Word或Excel报告（尽管这需要附加高级附加组件).

不过，这是一大堆抽象特性！让我们动手吧，这样您就可以看到这些功能在现实世界中是如何发挥作用的。

逐步：创建可过滤的产品比较表

好的，让我们进入承诺的教程。下面就是如何使用wpDataTables在WordPress上创建可过滤的产品比较表。正如我所提到的，这绝不是只有wpDataTables的用例。但这绝对是插件的一种流行用法。

如果您运行的是任何类型的分支网站，产品比较表允许您帮助读者找到最适合他们的产品(这意味着更高的转换率和更多的钱在你的口袋里！).

但在我们开始之前，我们需要一些产品进行比较，对吗？那么我们应该研究什么呢？我最近买了一副降噪耳机，所以这似乎是一个很好的具体例子。

我们可以使用产品比较表：

列出价格
指定噪声消除的类型
列出品牌
添加一个在这里购买链接

当然，当您使用插件时，您可以使用自己的标准来比较产品。我们这里只是举个例子。

让我们开始吧…

步骤1：安装和激活wpDataTables

与WordPress插件的正常情况一样，第一步是安装和激活wpDataTables。完成后，就无需进行任何配置马上.

获取wpDataTables

稍后我们将返回到一些可选的样式选项。但现在，您可以直接创建产品比较表。

步骤2：导入数据并设置基本选项

现在已经安装了插件，您可以通过以下方式创建第一个表wpDataTables→ 添加新内容：

接下来，您需要选择您想要的桌子类型。您有多种选择，但与我们的目的最相关的是：

链接到现有源的表
手动创建表
从其他源导入

我喜欢使用Google Sheets，所以在这个示例中，我将从那里导入一个表，然后根据需要使用WPDataTable的编辑界面对其进行调整。

接下来，您可以验证导入列（假设您选择导入表）：

一旦确认情况正确，就可以继续进入下一个屏幕。

如果需要，您可以在表格顶部配置一些基本设置。这些设置处理：

基本显示详细信息（例如是否显示标题）
响应式设计
全局排序和筛选

稍后我将讨论其中一些配置。但现在，你可以随意拯救并获取短代码：

步骤3：添加希望表格显示的快捷码

就这样！您有一个可筛选的产品比较表。要在前端显示它，您只需抓取前面提到的短代码，并将其添加到希望表格显示的帖子或页面。

然后，在前端，您应该看到您的桌子：

凉的就在那里。但你还没完成。看，在这一点上，字面上每件事可过滤。这对于我们示例的前四列是有意义的，但是采购链接色谱柱可过滤。

所以…让我们来解决这个问题！

步骤4：调整各个表列

返回到wpDataTables表的界面。

然后，如果向下滚动，您将看到表格预览和列设置地区

除了允许您添加新条目或编辑现有条目外，此界面还允许您通过单击排挡每列图标：

删除上的筛选采购链接列中，您只需单击该齿轮图标，转到过滤选项卡，然后将其关闭：

您还可以从排序选项卡。

这就解决了大问题！但让我们做一个示例表甚至更好.

现在，要过滤我们的表，用户实际上需要在每个列的过滤器中输入自己的搜索词。虽然这样做有效……但它不是很方便用户。

因此，让我们通过允许他们：

从下拉列表中选择品牌
从下拉列表中选择取消类型
选择不同的价格范围

要解决前两个问题，只需更改过滤器类型到选择框：

要解决第三个问题，请更改价格列的过滤器类型到编号范围：

将所有这些放在一起，您将在前端看到如下内容：

现在，访问者可以从下拉列表中选择并输入自己的价格范围，以真正利用过滤功能。

注意–如果您想知道添加更多过滤是什么样子，下面是一个可以从顶部启用的“在表单中过滤”选项排序和筛选选项卡：

在陈列每列设置的选项卡是向每列添加自定义CSS类。如果您想将自定义样式添加到采购链接列创建按钮或以其他方式引起注意。

您还可以添加条件格式，这允许您发挥创造性，并根据指定的条件突出显示不同的项目。

步骤5：更改颜色和字体（可选）

还记得我是如何掩盖wpDataTable的默认设置的吗？这是它们可能有用的地方。

如果您对表格的默认外观不满意，可以继续更改颜色和字体，方法是转到wpDataTables→ 设置→ 颜色和字体设置：

步骤6：创建图表（可选）

另一个您可能想或不想纳入产品比较表的漂亮特性是自定义图表和图形。虽然噪音消除耳机的例子并没有真正受益那么多，我当然可以想到图表可能会派上用场的时候。

wpDataTables使从现有表创建图表变得非常简单。你所需要做的就是去创建图表在仪表板侧栏中。然后，为其命名并选择渲染引擎和图表类型：

在下一页中，选择图表所基于的表格：

然后，添加一些列以在图表中使用。为此，我将使用型号和价格（您需要选择至少两列才能使图表工作）：

在下一个屏幕上，您将获得实时预览，并能够添加一些格式：

然后，您只需保存图表并获取短代码即可将其显示在前端。将其与可过滤的产品比较表放在一起，您可以为读者提供您正在比较的所有产品的详细概述。

wpDataTables的其他用途

好的，我花了本文的大部分时间向您展示了如何使用wpDataTables创建可过滤的产品比较表。但这远远不是这个插件的唯一用途。

因为它允许各种字段格式和自定义CSS样式，所以您可以将其用于各种情况，例如：

为您的运动队、乐队或任何其他需要列出活动时间和地点的项目创建时间表
构建定价表以显示您自己的产品信息
列出可用公寓单元
显示可筛选的门店/零售位置列表
创建所有产品的可排序目录

真的……如果可以用一个表来完成，那么就可以用wpDataTables来完成。有很多创造性的利基用途，你可以自己想出来。

例如，我在我的一个网站上使用一个表格来帮助人们了解越南的生活成本。它本质上是一个普通商品价格数据库。读者可以按类型、英文名称等进行筛选。

也就是说，表格为您的WordPress站点打开了大量功能。此外，wpDataTables允许您以各种有用的方式对表进行排序、筛选和搜索，您可以将该插件用于各种用途。

打包东西

现在，您应该知道：

如何在WordPress上创建可过滤的产品比较表
为什么wpDataTables是一个很好的工作工具
使用表格增强WordPress站点的其他一些简洁方法

现在开始，构建您的第一个表，并开始使用数据和表的强大功能来创建一个功能更强大的WordPress网站！