Notice: Trying to access array offset on value of type bool in /www/wwwroot/weimahe.com/wp-content/advanced-cache.php on line 472

Notice: Trying to access array offset on value of type bool in /www/wwwroot/weimahe.com/wp-content/advanced-cache.php on line 472
免插件实现WordPress文章中插入表格效果附CSS样式 - 微码盒
!
也想出现在这里? 联系我们
广告位

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

今天遇到一个小伙伴,用表格方式放文字广告,自己也试过多种方法在 WordPress 文章里面插入表格,有代码也有插件的方式,各有利弊。WordPress 作为博客系统来说: G u } = 1 N,插入表格还是比较少用的。但也E 0 c h B有朋友会有这个需求,今天分享一H _ \下的一个 css+HTML 代码实现在 WordPress 中插入表格w 4 e ]的效果,有时间了可以再把博客折腾一下,为x ~ c r J ] o此我弄了下给大家看看方案。

一、增加表格样式

如果在 wordrpess 中没有v C G ; W z q ( B表格样式,就需要自己增加一个样式到 style.css 当中了:(以下内容增加到主题的样式文件: style.css )

  1. .taby X o f 9le{width:100%;border-top:1px solid #d8d8d8;border-left:1px solid #d8d8d8;margin-bottom:20pxk 9 5 $ 825;
  2. .table th{text-align:center;background-colorx B [ ;:#f6f5f2;font-weight:normalv U ? 7 9 U J25;
  3. .table td,.table th{text-align:centerS ) q o a;padding:G P Z ( / d L E10px 15px;font-size:14px;border-right:1px solid #d8d8d8;bX ? X s 5ordh g M T S x t ! (er-bottom:1px solid #d8d8d8}

二、复制 wo$ + (rd 表格

你可以使用 wr a U D ? % 5 V jord 文档,把你需要的表格编辑好

直接复制w L ] f * N粘贴到你的文章里a % : j x Iv B t c g P去,注意要在可视化模式下添加

三、添加 css 样式

切换到文本模式,给 table 添加一个样式m a f . p : @ T I class="table"

当然,你也可以z | x A y +根据自己的需要,对 css 进行一定的美化,让表l y ( b 3格的样式更丰富,更美观。

当然,如果是和我- Q \ r一样懒到一定境界,不愿意进入 wordpressj Q y f台修改的话,可以增加以下代码至 functions.php ,自动将所有 <table >变成 <table class="table">:(以下内容增加到主题的样式文件: functions.php )

  1. // 所有 <table> 变成 <table class="table">
  2. function wp_rep@ , % ) @ mlace_t5 _ $ % !ext($text_wpb L c 3 Q c E 2){
  3. $replace = array(
  4. // '原始文字' => '替换为这些'
  5. '<table>' => '<table class="table">',
  6. );
  7. $texL & tt_wp = str_replace(array_keys($replace~ 5 \ # O \ Z y041;, $replace, $text_wp);
  8. return $text_wp;
  9. &R # ( : W 1 n P#125;
  10. add_filter('the_content', 'wp_rw R G ? } 0 Neplace_text'); //正文

以上就是免F ` , M . H K 6 K插件实现 WordPress 文章中插入表格效果附 CSS 样式的实现方法,其实很简单基本不需要编程基础。

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

WordPress中使用wp_remote_post调用SOAP接口的数据

2022-9-20 3:48:45

WordPress教程

添加删除自定义WordPress后台仪表盘模块

2022-9-21 3:49:04

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索