在写文章的时候,很多时候会用到wordpress表格,一般我们用简码shortcode来实现。但是默认效果太简陋了,今天就来讲下如何在内容中添加带css样式的wordpress表格。
可能你会觉得奇怪,不是有个插件tablepress可以插入表格吗?因为我觉得只是实现单一的功能,最好摆脱对插件的依赖。
这里我们需要做下面三个工作:
- 在excel表格中编辑好内容
- 打开Tablesgenerator在线编辑器
- 找到wordpress主题的自定义css框
首先,复制做好的excel表格。
然后打开 http://www.tablesgenerator.com/html_tables,在左上角的菜单 File 中,找到并点击 Paste more data...
然后,粘贴表格数据,并点击 Load 。
这样就可以看到表格已经导入。然后,根据在线编辑器提供的功能进行样式设计。
做好表格后,点击表格下面的 Generate 按钮,然后再点击左下角 Layout 里面,点击make the able responsive,给表格加上响应式功能。
然后,选择<style></style>之间的代码,并复制。
然后到 Wordpress后台 - 外观 - 主题设置 - 自定义代码中,粘贴上面复制的代码,并保存。(每个主题提供的自定义代码表框不一样,也可以到 外观 - 自定义 - 主题编辑器视图左侧的 额外CSS中尝试应用。)
再到这个页面的代码框中,复制剩下的所有代码,并回到文章内容编辑器(html文本模式)中,直接粘贴。效果对比如下,
如果你曾经使用过tablepress,对比这个新方法,会否觉得更方便呢?希望你喜欢。
Posted from my blog with SteemPress : https://chakela.me/add-wordpress-form-manually/