wordpress 彻底解决pre代码块转义问题

热度s:471℃ 评论:0 发布时间:2017-12-22 收录:已收录

关于 wordpress 文章内容被转义的问题已经不是第一次遇到了,每次都用各种方法解决了,我也是受够了这坑爹的问题,所以把完全解决代码转义这个问题的方法总结一下。

在 function.php 中添加如下代码:

//载入样式
add_editor_style('editor-style.css');

在主题根目录新建editor-style.css文件,添加如下样式(你也可以根据你的需要自行添加):

body{font-size:14px;line-height:24px;word-break: break-all; word-wrap: break-word;font-family: microsoft yahei}
img{max-width:100%;padding: 5px;border: solid 1px #e6e6e6;border:none;}
img:hover{background-color: #fbfbfb;border-color: #ddd;}
a{text-decoration: none;}
h2,h3,h4{color:#222;border-bottom:#eee 1px solid;padding-bottom:5px;margin-bottom: 14px;}
h2{font-size:18px;margin-top: 30px}
h3,h4{font-size:14px}
ul{margin:0 0 6px 26px}
ol{margin:16px}
ul li{margin-bottom: 10px;*list-style:disc;*padding-left:0;}
ol li{list-style:decimal;margin-left: 28px;}
p{margin-bottom:14px}
code{padding:1px 4px;border-radius:2px;background-color:#eee;font-family:'courier new';color:#777;margin:0 4px}
table{border-top:solid 1px #ddd;border-left:solid 1px #ddd;width: 100%;margin-bottom: 16px;}
table th{background-color:#f9f9f9;text-align:center}
table td,table th{border-bottom:solid 1px #ddd;border-right:solid 1px #ddd;padding:5px 10px}
.alignleft{float:left;text-align:left;margin-right:10px}
.aligncenter{text-align:center}
.alignright{float:right;text-align:right;margin-left:10px}

pre{margin:15px auto;font:12px/20px 'courier new';border:1px solid #d6d6d6;border-left-width:4px;background:#fbfbfb;padding:10px 15px}
blockquote{margin:15px auto;border:1px solid #d6d6d6;border-top-width:3px;padding:15px 20px 10px;background-color:#fdfdfd;}
blockquote p{margin:0;padding:0;text-indent:24px;margin-bottom:10px;}

其实想要解决wordpress 的内容转义问题很简单,根本不需要写什么正则对pre标签做处理什么的,太繁琐还不能完全解决,想要完全解决,只需要做一次转义就行了,第一次会被转义,而第二次就不会被转义了。
所以,完成了上面代码的步骤,我们只需要在写文章的时候,先创建一个pre标签(文本或者可视化下都可以创建)
wordpress 彻底解决pre代码块转义问题
如上图,创建好了后,我们可以直接在可视化下看到pre块层,在那直接添加代码,然后发布就行了.
如果你喜欢在文本下面编辑的话,那么添加代码的时候你必须切换到可视化下添加代码,然后在切换回文本继续编辑,切换回去你会发现代码被转义了,但是这无关紧要,因为发布后你会发现前台的文章并没有被转移的,一切正常啦。

最后附上两张不同的图,相信你们能看出区别哦:

wordpress 彻底解决pre代码块转义问题


wordpress 彻底解决pre代码块转义问题

本文由 Mr.Wu 创作,除注明转载/出处外,均为本站原创,转载前请注明出处!

发表评论

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

顶部
护眼