免插件实现WordPress文章中插入表格效果附CSS样式

2021-05-22 0 1,775 百度已收录

今天遇到一个小同伴,用表格方式放文字广告,自己也试过多种方式在WordPress文章内里插入表格,有代码也有插件的方式,各有利弊。WordPress作为博客系统来说,插入表格照样对照少用的。但也有同伙会有这个需求,今天禀享一下的一个css+html代码实现在WordPress中插入表格的效果,有时间了可以再把博客折腾一下,为此我弄了下给人人看看方案。

一、增添表格样式

若是在wordrpess中没有表格样式,就需要自己增添一个样式到 style.css 当中了:(以下内容增添到主题的样式文件: style.css )

  1. .table{width:100%;border-top:1px solid #d8d8d8;border-left:1px solid #d8d8d8;margin-bottom:20px}
  2. .table th{text-align:center;background-color:#f6f5f2;font-weight:normal}
  3. .table td,.table th{text-align:center;padding:10px 15px;font-size:14px;border-right:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8}

二、复制word表格

你可以使用word文档,把你需要的表格编辑好
免插件实现WordPress文章中插入表格效果附CSS样式
直接复制粘贴到你的文章内里去,注主要在可视化模式下添加

三、添加css样式

切换到文本模式,给table添加一个样式class=”table”
免插件实现WordPress文章中插入表格效果附CSS样式
固然,你也可以凭证自己的需要,对css举行一定的美化,让表格的样式更厚实,更雅观。
免插件实现WordPress文章中插入表格效果附CSS样式
固然,若是是和我一样懒到一定境界,不愿意进入wordpress后台修改的话,可以增添以下代码至 functions.php ,自动将所有 <table >酿成 <table class=”table”>:(以下内容增添到主题的样式文件: functions.php )

  1. // 所有 <table> 酿成 <table class="table">
  2. function wp_replace_text($text_wp){
  3. $replace = array(
  4. // '原始文字' => '替换为这些'
  5. '<table>' => '<table class="table">',
  6. );
  7. $text_wp = str_replace(array_keys($replace), $replace, $text_wp);
  8. return $text_wp;
  9. }
  10. add_filter('the_content', 'wp_replace_text'); //正文

以上就是免插件实现WordPress文章中插入表格效果附CSS样式的实现方式,实在很简朴基本不需要编程基础。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 免插件实现WordPress文章中插入表格效果附CSS样式 https://zhutizhen.com/14854.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章