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

表格是很强大的东西。如果你在互联网上搜索,你会发现各种各样的故事,人们基本上通过使用Excel和表格将他们的整个工作自动化。这就是说……表格可以为你的网站做一些有趣的事情。但是,WordPress还没有把Excel建立在核心中……那么,你怎样才能为你的WordPress网站利用表格的力量呢?用一个叫做wpDataTables的插件。bluehost香港服务器商分享如何在WordPress中添加移动响应表

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

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

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

  • 给你一个详细的教程,用wpDataTables创建一个可过滤的产品比较表。虽然这决不是唯一的用例,但它是最受欢迎的用例之一。
  • 告诉你更多关于这个插件的功能以及一些其他的用例。

到最后,你不仅应该知道wpDataTables是如何帮助你的网站的,而且还应该知道如何创建你自己的可过滤数据表。推荐阅读:《响应式网站对SEO优化有什么影响》

wpDataTables的特点:为什么它是最适合的工具

让我们从头开始:

把你的数据带进来。

如果你的表格中没有数据,它们就没有什么用处,对吗?wpDataTables让你通过两种方式引入数据。

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

从链接(谷歌表)或文件上传(JSON、CSV、Excel等)。

  • 通过一个仪表板内的表格构造器,你可以在一个类似Excel的界面中输入数据。
  • 你也可以上传一个文件作为表格的基础,然后再在WordPress仪表板内进一步编辑它。

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

你还可以添加详细的过滤选项,这样你的读者就可以深入了解他们需要的信息。这种过滤功能特别重要,因为wpDataTables的建立是为了能够处理有数百万行的巨大表格。

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

如果你想操作数据,你可以很容易地在表格基础上建立各种图表。你甚至可以更进一步,根据表格中的数据创建详细的Word或Excel报告(尽管这需要一个额外的高级插件)。

这可是一大堆抽象的功能啊。因此,让我们亲身体验一下,你可以看到这些功能在现实世界中是如何发挥的。

一步一步来:创建一个可过滤的产品比较表

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

如果你正在运行任何类型的联盟网站,产品比较表允许你帮助读者找到最适合他们的产品(这意味着更高的转换率和更多的钱在你口袋里!)。

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

我们可以使用产品比较表来:

  • 列出价格
  • 指定降噪的类型
  • 列出品牌
  • 添加 “在此购买 “链接

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

让我们开始吧…

第一步:安装和激活wpDataTables

与WordPress插件的通常情况一样,你的第一步是安装和激活wpDataTables。一旦完成了这些,你就没有什么真正需要马上配置的了。

我们稍后会回到一些可选的样式选项上。但现在你可以直接开始创建产品比较表了。

第二步:导入数据和设置基本选项

现在你已经安装了这个插件,你可以通过进入wpDataTables → 添加新的来创建第一个表格。

接下来,你需要选择想要的表的类型。你有几个选择,但与我们的目的最相关的是:

  • 与现有源链接的表
  • 手动创建一个表
  • 从其他来源导入

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

接下来,你可以验证导入的列(假设选择了导入的表)。

一旦验证了事情是正确的,你就可以继续进入下一个屏幕。

在那里,如果需要,你可以在表格的顶部配置一些基本设置。这些设置涉及到:

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

我稍后会触及其中一些配置。但现在你可以自由地点击 “保存 “并抓取短代码。

第三步:在你想让表格显示的地方添加短代码

你将有一个可过滤的产品比较表,要在前端显示它,你所需要做的就是抓取上述的短码,并将其添加到你想显示表格的帖子或页面中。推荐阅读:《如何优化网站的响应速度》

然后,在前端你应该就能看到你的表格了。

它就在那里,但你还没有完全完成。在这一点上,实际上所有的东西都是可以过滤的。这对我们例子中的前四列来说是有意义的,但让购买链接这一列可以过滤就有点奇怪了。

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

第四步:调整个别表格列

回到wpDataTables界面,查看你的表格。

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

除了添加新条目或编辑现有条目外,这个界面还让你通过点击每一列的齿轮图标来定制每一列的功能。

要取消对购买链接列的过滤,你只需要点击那个齿轮图标,前往过滤标签并将其关闭就可以了。

你也可以在 “排序 “选项卡上关闭排序功能。

这就解决了这个大问题。让我们来让示例表变得更好。

现在,为了过滤我们的表格,用户需要在每一列的过滤器中实际输入他们自己的搜索词。虽然这很有效,但它不是很方便用户。

因此,让我们来使事情变得更容易。

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

要解决前两个问题,你只需要将过滤器类型改为选择框。

而要解决第三个问题,就要将价格栏的过滤器类型改为数字范围。

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

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

注意–如果你想知道添加更多的过滤功能是什么样子的,这里有一个 “表格中的过滤 “选项,你可以在顶部的排序和过滤标签中启用。

在每一列设置的 “显示 “选项卡中,你可以做的另一件事是为每一列添加自定义CSS类。如果你想为购买链接列添加自定义样式以创建一个按钮或以其他方式吸引注意力,这尤其有帮助。

你还可以添加条件格式化。这允许发挥创意:例如,根据你指定的标准突出不同的项目。

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

还记得我是如何略过wpDataTable的默认设置的吗?在这里,它们可能会派上用场。

如果你对表格的默认外观不满意,你可以通过进入wpDataTables→设置→颜色和字体设置来改变颜色和字体。

第6步:创建一个图表(可选)

还有一个你可能想纳入产品比较表的巧妙功能是自定义图表和图形。虽然降噪耳机的例子并没有什么好处,但我肯定图表会有派上用场的时候。

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

在下一页,选择你想要的图表所基于的表格。

然后,添加一些要在图表中使用的列。在这里,我将使用型号和价格的组合(你需要选择至少两列才能使图表工作)。

在下一个屏幕上,你会得到一个实时预览以及添加一些格式的能力。

然后,你只需要保存你的图表,并抓取短码以在前端显示它。把它和你的可过滤产品比较表放在一起,你就可以给你的读者一个你所比较的所有产品的详细概述。

wpDataTables的其他用途

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

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

  • 为你的运动队、乐队或其他需要列出活动时间和地点的东西创建一个时间表
  • 建立一个定价表来显示自己的产品信息
  • 列出可用的公寓单元
  • 显示一个可过滤的商店/零售地点的列表
  • 创建一个所有产品的可分类目录

如果你能用表来做,你就能用wpDataTables来做。这里有很多创造性的小众用途——你都可以自己想出来。

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

这就是说,表格为你的WordPress网站开辟了大量的功能。加上wpDataTables可以让你以各种有用的方式对你的表格进行分类、过滤和搜索,你可以把这个插件用于各种事情。

收尾工作

到现在,你应该知道:

  • 如何在WordPress上创建一个可过滤的产品比较表了
  • 为什么wpDataTables是一个伟大的工具?
  • 其他一些使用表格来增强WordPress网站的巧妙方法

现在,建立你的第一个表吧!开始使用数据和表的力量来制作一个更实用的WordPress网站吧!推荐相关阅读:《WordPress外部选项介绍》

Add a Comment

您的电子邮箱地址不会被公开。 必填项已用*标注