一杯茶的功夫
享受赚刀的乐趣

手动添加WordPress表格

在写文章的时候,很多时候会用到wordpress表格,一般我们用简码shortcode来实现。但是默认效果太简陋了,今天就来讲下如何在内容中添加带css样式的wordpress表格。

可能你会觉得奇怪,不是有个插件tablepress可以插入表格吗?因为我觉得只是实现单一的功能,最好摆脱对插件的依赖。

这里我们需要做下面三个工作:

  1. 在excel表格中编辑好内容
  2. 打开Tablesgenerator在线编辑器
  3. 找到wordpress主题的自定义css框

那我们开始动手做吧!

首先,复制做好的excel表格。

excel配置表

 

然后打开 http://www.tablesgenerator.com/html_tables,在左上角的菜单 File 中,找到并点击 Paste more data…

导入剪贴板内容

然后,粘贴表格数据,并点击 Load 。

读取数据

这样就可以看到表格已经导入。然后,根据在线编辑器提供的功能进行样式设计。

编辑好的样式

做好表格后,点击表格下面的 Generate 按钮,然后再点击左下角 Layout 里面,点击make the able responsive,给表格加上响应式功能。

添加功能

然后,选择<style></style>之间的代码,并复制。

复制特定代码

然后到 WordPress后台 – 外观 – 主题设置 – 自定义代码中,粘贴上面复制的代码,并保存。(每个主题提供的自定义代码表框不一样,也可以到 外观 – 自定义 – 主题编辑器视图左侧的 额外CSS中尝试应用。)

插入代码

再到这个页面的代码框中,复制剩下的所有代码,并回到文章内容编辑器(html文本模式)中,直接粘贴。效果对比如下,

文本模式下的代码效果

可视化模式下的表格效果

最终显示效果

如果你曾经使用过tablepress,对比这个新方法,会否觉得更方便呢?希望你喜欢。

 

 

 

 

 

 

 

 

 

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:茶克拉驿站 » 手动添加WordPress表格

分享到: 更多 (0)

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址