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

移动响应表格在wordpress特色

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

但是WordPress还没有把Excel作为核心功能…所以你如何利用你的WordPress网站的表格的力量?使用一个名为wpdatatable的插件。

它可以帮助你为你的WordPress站点创建各种表格。您可以从头开始使用插件的Excel类构建器构建表,或者您可以直接从Excel或谷歌表导入表,只需单击几下。

然后,您可以用许多很酷的方式显示、操作和过滤这些表。

在这篇文章中,我将做两件事:

  • 为您提供关于使用wpdatatable创建可筛选产品比较表的详细教程。虽然这绝不是只有它是最受欢迎的用例之一。
  • 告诉你更多关于插件的特性,以及其他一些用例。

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

wpDataTables特性:为什么它是这项工作的工具

让我们从头开始:

把你的数据带进来。

如果你的表格中没有数据,它们就没什么用了,对吧?wpDataTables让你以两种方式引入数据:

  • 从链接(谷歌表)或文件上传(JSON, CSV, Excel等)
  • 通过仪表板内表构造函数,在类似excel的界面中输入数据

你也可以上传一个文件作为表格的基础,然后在你的WordPress仪表板上进一步编辑它。

一旦你上传了你的表格,你可以显示它在前端使用一个简单的短代码。您的表是响应式的(除非禁用),所以它们看起来总是很好。

你还可以添加详细的筛选选项,这样你的读者就可以钻到他们需要的信息。这种过滤尤其重要,因为wpdatatable被构建为能够处理具有数百万行的大型表。

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

如果您想操作数据,可以根据您的表格轻松地构建各种图表。您甚至可以根据您的表格中的数据创建详细的Word或Excel报告(虽然这需要一个附加保险费附加).

不过,这是大量的抽象特征!让我们亲自动手,这样你就能看到这些特性在现实世界中是如何发挥作用的。

一步一步:创建可筛选的产品比较表

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

如果你经营任何类型的联盟网站,产品对照表可以帮助你的读者找到最适合他们的产品(这意味着更高的转化率和更多的钱在你的口袋里!).

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

我们可以使用产品对比表:

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

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

让我们开始…

步骤1:安装并激活wpdatatable

与WordPress插件的一般情况一样,你的第一步是安装并激活wpdatatable。完成这些之后,就不需要配置什么了马上

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

步骤2:导入数据,设置基本选项

现在已经安装了插件,可以通过指向创建第一个表wpDataTables→添加新的:

wpDataTables添加新

接下来,你需要选择你想要什么样的桌子。你有几个选择,但与我们的目的最相关的是:

  • 链接到现有源的表
  • 手动创建表
  • 从另一个源导入

我喜欢使用谷歌Sheets,因此对于本例,我将从那里导入一个表,然后根据需要使用WPDataTable的编辑界面对其进行调整。

编辑界面

接下来,您可以验证导入列(假设您选择导入您的表):

导入列

确认无误后,可以继续进入下一个屏幕。

如果需要,您可以在表的顶部配置一些基本设置。这些设置处理:

  • 基本的显示细节(例如是否显示标题)
  • 响应设计
  • 全局排序和过滤

我马上就会讲到这些构型。但现在,你可以随意打人保存并抓取短代码:

让商家

步骤3:在您想要显示表格的地方添加短代码

这是它!您有一个可筛选的产品比较表。要在前端显示它,你需要做的就是抓取前面提到的shortcode,并将其添加到你想要显示表格的职位或页面。

然后,在前端,你应该看到你的表:

我的耳机对照表

太酷了!它的存在。但你还没有完全完成。看,在这一点上一切滤过性的。这对于我们的示例的前四列是有意义的,但是这样做有点奇怪购买链接列可滤过的。

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

步骤4:调整各个表列

回到wpDataTables为您的表提供接口。

然后,如果你向下滚动,你应该看到表预览和列设置区域。

除了允许添加新条目或编辑现有条目外,该界面还允许通过单击齿轮每列图标:

点击齿轮

上删除过滤购买链接列,你只需要点击齿轮图标,前往过滤选项卡,并将其关闭:

过滤

还可以关闭排序排序选项卡。

这就解决了大问题!我们来做个例子表甚至更好的

现在,要过滤我们的表,用户需要在每个列的过滤器中输入他们自己的搜索词。虽然这是可行的,但它不是很友好。

所以,让我们通过允许他们这样做来让事情变得更简单:

  • 从下拉菜单中选择品牌
  • 从下拉菜单中选择取消类型
  • 选择不同的价格范围

要解前两个,你只需要改变过滤器类型选择框:

排序

为了解决第三个问题,改变价格列的过滤器类型数范围:

数量范围

把它们放在一起,你就会在前端得到这样的东西:

前端视图

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

注意-如果你想知道添加更多的过滤会是什么样子,这里有一个“表单过滤”选项,你可以从顶部启用它排序和过滤标签:

排序和过滤

你可以在显示每个列的设置选项卡是添加自定义CSS类到每个列。如果您想要添加自定义样式,这尤其有用购买链接列来创建按钮或以其他方式引起注意。

您还可以添加条件格式,它允许您发挥创造性,例如,根据您指定的条件突出显示不同的项。

第五步:改变颜色和字体(可选)

还记得我是如何忽略wpDataTable的默认设置的吗?这就是它们可能发挥作用的地方。

如果您对表的默认外观不满意,您可以通过以下命令更改颜色和字体wpDataTables→设置→颜色和字体设置:

颜色和字体设置

步骤6:创建图表(可选)

另一个你可能想要也可能不想要加入到你的产品比较表中的漂亮的功能是自定义图表和图形。而降噪耳机的例子并没有真正受益那么多在美国,我当然能想到图表可能会派上用场的时候。

wpDataTables使从现有表创建图表变得超级简单。你要做的就是去创建一个图表在仪表板边栏中。然后,给它一个名字,并选择你的渲染引擎和图表类型:

创建一个图表

在下一页,选择你想要建立图表的表格:

wpDataTables数据源

然后,添加一些列以在图表中使用。对于这个,我将使用组合型号而且价格(你需要选择至少两列的图表工作):

选择列

下一个屏幕,你会看到一个实时预览,以及添加一些格式的功能:

添加格式

然后,您只需要保存图表并抓取短代码,将其显示在前端。将它与可筛选产品比较表放在一起,您就可以为读者提供您正在比较的所有产品的详细概述。

wpdatatable的其他用途

好的,我已经花了大量的篇幅向您展示如何使用wpdatatable创建一个可筛选的产品比较表。但这并不是这个插件的唯一用途。

因为它允许各种字段格式和自定义CSS样式,你可以使用它来做各种事情,比如:

  • 为你的运动队、乐队或其他需要列出活动时间和地点的项目制定时间表
  • 构建一个价格表来显示您自己的产品信息
  • 挂牌待售公寓单位
  • 显示可筛选的商店/零售位置列表
  • 创建所有产品的可分类目录

如果你可以用一个表来做,你也可以用wpDataTables来做。你可以自己想出很多有创意的小众用途。

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

也就是说,表格为你的WordPress站点提供了大量的功能。另外,wpDataTables允许您以各种有用的方式对表进行排序、过滤和搜索,您可以将该插件用于各种各样的事情。

包装起来

到目前为止,你应该知道:

  • 如何在WordPress上创建一个可过滤的产品比较表
  • 为什么wpDataTables是一个很好的工具
  • 还有一些使用表格来增强你的WordPress站点的巧妙方法

现在就开始吧,创建你的第一个表格,并开始使用数据和表格的力量来创建一个功能更强大的WordPress网站!


披露:这篇文章是赞助的,但我们的观点是我们自己的。