关于 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标签(文本或者可视化下都可以创建)
如上图,创建好了后,我们可以直接在可视化下看到pre块层,在那直接添加代码,然后发布就行了.
如果你喜欢在文本下面编辑的话,那么添加代码的时候你必须切换到可视化下添加代码,然后在切换回文本继续编辑,切换回去你会发现代码被转义了,但是这无关紧要,因为发布后你会发现前台的文章并没有被转移的,一切正常啦。
最后附上两张不同的图,相信你们能看出区别哦:
本文作者为Mr.Wu,转载请注明,尊守博主劳动成果!
由于经常折腾代码,可能会导致个别文章内容显示错位或者别的 BUG 影响阅读; 如发现请在该文章下留言告知于我,thank you !