WordPress技巧:不用插件纯代码实现wordpress博客增加表格CSS样式效果

前言

今天暮城发布文章的时候,在编辑器内是表格的形式,但是发布成功后打开文章页面查看,发现表格样式丢失了,经过一番折腾发现wordprss本身并没有很好的支持表格的样式,或者是使用的主题没有支持发布文章表格的样式,这时候可以通过插件的形式增加,但是为了方便我们还是使用直接添加代码的方式比较好。

教程

第一步:找到当前主题样式文件style.css文件,在文件中添加如下代码:

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

第二步:然后找到当前主题下的functions.php文件,在文件中添加如下代码:

// 所有 <table> 变成 <table class="table">
function wp_replace_text($text_wp){
    $replace = array(
        // '原始文字' => '替换为这些'
        '<table>' => '<table class="table">',
        );
    $text_wp = str_replace(array_keys($replace), $replace, $text_wp);
    return $text_wp;
}
add_filter('the_content', 'wp_replace_text'); //正文

然后保存,重新打开文章页面,是不是样式效果就出来了,最后附一张暮城弄好的效果图:

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注