在WordPress文章中插入表格的3种方法

2018年7月10日03:55:41 发表评论 14 views
摘要

WordPress 对表格的支持没有我们想像的那么便捷,有时候我们需要在文章中插入表格,让我们的内容显示得更加丰富,下面分享3种经常使用方法

WordPress 对表格的支持没有我们想像的那么便捷,有时候我们需要在文章中插入表格,让我们的内容显示得更加丰富,下面分享3种经常使用方法:

一、使用插件

这里推荐2款插件,他们都可以很便捷的对表格进行管理,插入表格也很方便。

TablePress:https://cn.wordpress.org/plugins/tablepress/

TinyMCE Advancedhttps://cn.wordpress.org/plugins/TinyMCE-Advanced/

 

后台搜索安装插件后,编辑文章时候就可以很方便的选择插入表格,下面做了一个动态图展示:

在WordPress文章中插入表格的3种方法

 

二、添加短代码

在主题 functions.php 中插入下面代码:

  1. /*插入表格按钮*/
  2. function appthemes_add_quicktags() {
  3. ><script type="text/javascript">// <![CDATA[ 
  4. QTags.addButton( 'tables', '表格按钮', '<div class="table-container"><table><tbody><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th><th>Header 5</th><th>Header 6</th><th>Header 7</th><th>Header 8</th></tr><tr><td>row1_cell1</td><td>row1_cell2</td><td>row1_cell3</td><td>row1_cell4</td><td>row1_cell5</td><td>row1_cell6</td><td>row1_cell7</td><td>row1_cell8</td></tr><tr><td>row2_cell1</td><td>row2_cell2</td><td>row2_cell3</td><td>row2_cell4</td><td>row2_cell5</td><td>row2_cell6</td><td>row2_cell7</td><td>row2_cell8</td></tr><tr><td>row3_cell1</td><td>row3_cell2</td><td>row3_cell3</td><td>row3_cell4</td><td>row3_cell5</td><td>row3_cell6</td><td>row3_cell7</td><td>row3_cell8</td></tr></tbody></table></div>' );
  5. // ]]></script><?php } add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

 

需要插入表格时候,先切换至文本模式,点击一下插入表格按钮,再切换到可视化模式,就可以按需编辑表格了,如下图:

在WordPress文章中插入表格的3种方法

 

再次切换到文本选项的时候,会发现代码已经自动整理了,这样很方便去增加和删除表格的行、列。

 

3、第三方工具

我们知道微信编辑器可以用来插入很多精美的图文、同样作为普通的表格也是可以的。这种方式类似第一种使用插件的办法,如下图:

在WordPress文章中插入表格的3种方法

 

将编辑好的表格切换到 html 代码,全选复制到 wordpress 的文本模式下就可以了。

 

以上就分享的 3 种在 WordPress 文章中插入表格的方法,你可以根据自己使用表格的频率选择合适的方法。也就是对表格的依赖程度,如果网站中大量使用表格,或者表格的内容需要经常更改,那么插件法比较适合,使用 TablePress 表格管理插件会非常方便,而且这个插件非常适合对 HTML 编辑不了解的用户;如果只是偶尔插入一个简单的表格,一年都难得用几次,也不经常更改表格内的文字和数据,又懂一些 HTML 表格编辑格式,那就可以用文章分享的另外两种办法(非纯手工,纯手工编写的办法不推荐)。

Liwei

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: