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

关于 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块层，在那直接添加代码，然后发布就行了.
如果你喜欢在文本下面编辑的话，那么添加代码的时候你必须切换到可视化下添加代码，然后在切换回文本继续编辑，切换回去你会发现代码被转义了，但是这无关紧要，因为发布后你会发现前台的文章并没有被转移的，一切正常啦。

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