关于 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块层，在那直接添加代码，然后发布就行了.
如果你喜欢在文本下面编辑的话，那么添加代码的时候你必须切换到可视化下添加代码，然后在切换回文本继续编辑，切换回去你会发现代码被转义了，但是这无关紧要，因为发布后你会发现前台的文章并没有被转移的，一切正常啦。
最后附上两张不同的图，相信你们能看出区别哦：
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论