如何使用带有 Elementor 的 TablePress(小部件 + 短码)

主要外卖

• TablePress 通过两种方式与 Elementor 配合使用:TablePress 3.4 添加到 Elementor 面板的名为 TablePress 表的小部件,以及短代码小部件中放置的短代码 [表 id=1 /]。
• Elementor 中的 TablePress 表小部件具有表下拉和配置参数字段,并且没有样式选项卡。
• TablePress 默认打开访问者的排序、搜索和分页,每页 10 行。
• TablePress中默认是水平滚动关闭的,因此一个390px的手机上会溢出一个五列的表,直到你在表的设置中勾选它。
• 对于应在 Elementor 内编辑和样式的短表,Master Addons Dynamic Table 等表小部件的工作量比 TablePress 少。

TablePress 和 Elementor 一起工作,无需任何桥接插件。您在 TablePress 中构建表,然后将其放置在带有 TablePress 表小部件或短代码的 Elementor 页面上。该表保留其排序、搜索和分页。

本指南涵盖了两种方法、造型和固定手机宽桌子的设置,还说明了当普通桌子小部件是更好的选择时,这里的一切都经过了 TablePress 3.4 和 Elementor 4.3 的测试。

步骤 1:在 TablePress 中创建或导入表

表本身是在 Elementor 外部、WordPress 仪表板中的 TablePress 屏幕上制作的。

1. 安装并激活 桌面压机 从插件添加新内容。
2. 打开 桌面压机 在仪表板菜单中。
3. 要键入表格,请单击 添加新、输入名称,设置行数和列数,并填写单元格。
4. 要输入电子表格,请单击 进口的,选择 文件上传,选择文件,保留 添加为新表 然后单击 进口.
5. ID 注意表,第一个表是 ID 1。

TablePress导入Excel、CSV、HTML和JSON文件,我们导入了六行CSV的运费,它到达时已经将第一行设置为头。

步骤 2:将其与 TablePress 表小部件一起添加

TablePress 注册自己的 Elementor 小部件,因此此方法不需要短代码。

1. 使用 Elementor 编辑您的页面。
2. 搜索小部件面板 表按压表.
3. 将小部件拖入容器中。
4. 打开 表格 dropdown 并选择您的表格。表格按 ID 和名称列出。
5. 发布页面。

的 高级 下拉部分包含一个字段, 配置参数。它接受您将放入短代码中的相同参数,对于一个页面应显示具有不同选项的表的情况。

或者用短代码添加它

短代码执行相同的工作,并且可以在短代码执行的任何地方工作。

1. 拖动元素器 短代码 小部件放入容器中。
2. 类型 [table id=1 /]1,用表的 ID 替换 1。
3. 单击 申请 加载预览。

在我们的测试页面上,小部件和短代码打印了同一个表。尽可能使用小部件,因为从下拉中选择可以避免 ID 中的拼写错误。

排序、搜索和分页

这些为每个新表打开。您在指定的框中更改每个表 面向网站访问者的表格功能 表的编辑屏幕上。

6行的表,搜索和分页是杂乱的,取消勾选,表显示为一个普通的网格。

在 Elementor 中对 TablePress 表进行造型

TablePress 表小部件在 Elementor 中没有表样式控制,因此外观设置在其他三个位置。

• 表选项 表编辑屏幕上:哪些行是页眉和页脚, 交替行颜色, 行悬停突出显示并且一个 额外的 CSS 课程 场。
• 自定义CSS for colors,字体和边框。TablePress 根据每个表的 ID 给它一个类,所以你可以针对一个表。
• 小部件的高级选项卡 在 Elementor 中,用于桌子周围的边距、填充物和宽度。

CSS 的一个简短示例,它重新设置了表 1 的标头:

.tablepress-id-1 thead th {
  background: #101223;
  color: #ffffff;
}
.tablepress-id-1 tbody td {
  padding: 12px 16px;
}

将其粘贴到外观、自定义、附加 CSS 中,或粘贴到您的设置具有的任何自定义 CSS 框中。 Elementor Pro 每个元素都有一个,并且主插件 自定义 CSS 扩展 还添加一个。

修复手机上的桌子

390px宽的手机上,我们的五列桌子跑过屏幕的右边缘,最后一列无法读取。

1. 编辑 TablePress 中的表格。
2. 下 面向网站访问者的表格功能,滴答 水平滚动.
3. 单击 保存更改 并重新加载手机上的页面。

TablePress 还在其 Pro 计划中销售响应式表格功能(我们检查时每年 89 美元),其模式可在小屏幕上堆叠或折叠行。其他处理宽表的方法请参阅我们的指南 elementor 中的响应表.

当表小部件是更好的选择时

TablePress是为数据而构建的,对于一个真正属于页面设计一部分的小表,它添加了步骤:第二个管理屏幕,另一个地方的CSS,以及一个保持更新的插件。

只需要一张小桌子? 的 动态表小部件 elementor面板中构建它,带有样式选项卡和堆叠在手机上的行。

Dynamic Table 没有排序、搜索或导入,因此使用 TablePress 进行数据,使用小部件进行布局表(例如时间表或规格表)。其他选项在我们的中进行了比较 Elementor 表插件综述.

常见问题

最后的想法

TablePress 和 Elementor 很好地适合数据表:导入文件, 掉入 TablePress 表小部件, 记得打开手机的水平滚动。造型需要一点 CSS, 因为小部件没有样式选项卡。

对于应该看起来像页面一部分的短表, 动态表 将细胞和造型保留在 Elementor 内。

相关阅读

• 如何用 Elementor 创建表格(4 种方式)
• WordPress 的最佳目录插件