在WordPress 3.0以后，有一个新的实用功能：你可以更改默认后台编辑器（TinyMCE）的样式，实现一个有趣的功能：在后台可视化编辑器模式下直接预览日志内容的编排，并且与前台浏览样式保持一致 ，不需要转到前台查看日志编辑情况。WordPress 3.21默认主题Twenty Eleven已集成了该功能，默认主题Twenty Eleven功能强大，集成了众多WordPress新功能，到目前为止，我还未研究透，囧......喜欢折腾WP主题的童鞋不妨多研究一下。
打开默认主题Twenty Eleven的functions.php，会看到一句加了明确注释的代码：
- // This theme styles the visual editor with editor-style.css to match the theme style.
- add_editor_style();
注释的中文大概意思为：可视化编辑器与主题editor-style.css风格相匹配。
关键就是这句。下面以HotNews Pro主题为例，轻松实现这一功能。
首先，新建一个名称为：editor-style.css的文件，将下面样式复制进去，或者直接下载：editor-style.css文件，并放到HotNews Pro主题css目录中。
- body {
- font: 13px 'Microsoft YaHei', 微软雅黑, Arial, Lucida Grande, Tahoma, sans-serif;
- color: #000;
- text-shadow: 0px 1px 0px #d1d1d1;
- width: 700px;
- }
- ul li{
- list-style: square inside;
- line-height:24px;
- }
- h1 {font-size: 18px;line-height:185%;}
- h2 {font-size: 16px;line-height:185%;}
- h3 {font-size: 14px;line-height:185%;}
- ul,ol,dd,pre,hr {
- margin: 0 0 10px 0;
- }
- p {
- line-height:185%;
- text-indent:2em;
- margin: 0 0 10px 0;
- }
- blockquote {
- width: 660px;
- color: #4e6384;
- line-height: 23px;
- margin: 5px auto 5px auto;
- padding: 10px;
- clear: both;
- border: 1px solid #ccc;
- }
- code {
- width: 660px;
- font: 12px/17px tahoma, arial, sans-serif;
- color: #4e6384;
- display: block;
- margin: 5px auto 5px auto;
- padding: 10px;
- border-left: 3px solid #8391A7;
- border-right: 1px solid #8391A7;
- border-top: 1px solid #8391A7;
- border-bottom: 1px solid #8391A7;
- }
- blockquote td{
- border-bottom: 1px solid #ccc;
- padding: 2px;
- }
- /** 图文混排 **/
- img.centered {
- display: block;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 10px;
- }
- img.alignnone {
- margin: 0 0 10px 0;
- display: inline;
- }
- img.alignright {
- margin: 0 0 10px 10px;
- display: inline;
- }
- img.alignleft {
- margin: 0 10px 10px 0;
- display: inline;
- }
- .aligncenter {
- display: block;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 10px;
- }
- .alignright {
- float: rightright;
- margin: 0 0 10px 10px;
- }
- .alignleft {
- float: left;
- margin: 0 10px 10px 0;
- }
其次，打开HotNews Pro主题的functions.php模版文件，加入一句：
- //后台预览
- add_editor_style('/css/editor-style.css');
第三，没有第三了呵呵，全部改造完成！
在即将发的HotNews Pro 2.7正式版中已集成该功能。
由于后台编辑器与前台处于不同的样式框架中，所以如果你想改造其它主题，只需将主题style.css中与正文相关的样式复制出来，并去掉具体的选择器即可，比如我上面的样式代码，也可以参考默认主题Twenty Eleven中的editor-style.css，关键是要设置body的宽度与你的主题正文部分相同。
本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
1F
我是沙发，我去看看Twenty Eleven啥样去
2F
沙发没了，正式版什么时候发布？
B1
@ 强哥 应该会很快，赶在放假这三天，完善一下，因为平时上班不会有太多时间
3F
wp果然强大。。看来有必要换了
4F
看不明白- -#
5F
老大，你不是说没有正式版么！
6F
鸟哥每次的技巧分享都与众不同，非常感谢鸟哥的用心，永久支持！期待2.7正式版早日完善和发布！祝鸟哥中秋节快乐！
7F
学习了
8F
用上鸟~~~
9F
祝博主中秋节快乐，工作重要，写博客重要，过节和家人团聚更重要哦！祝你们全家安康，快乐度过节日，呵呵！
10F
祝鸟哥中秋快乐，身体健康，工作顺利，阖家欢乐！
B1
@ 看得见风的人 同乐
11F
中秋快乐！
B1
@ Bob 祝愿大家天天快乐
12F
也祝鸟哥天天快乐
13F
期待鸟哥得2.7正式版发布。。
14F
很好，学习下。
15F
我所见到 最好看的wordpress
16F
嗯嗯 很好 方便折腾了。。
17F
这个要留名，以前就想过要有这种所见所得功能。
18F
怎么设置网站页面底部分类只显示最大的分类 友情链接那也变形了
19F
对代码还不太懂，有待学习啊
20F
等待2.7版本出现，技术是没有止境的
学习了
21F
鸟哥，给你咱的模板提个建议，cms模式下分栏里题目前的“绿黄蓝橘”四个小色块给取消了？因为整体感觉颜色偏多了，看时间长了对视觉造成很大压力，显得有些乱。
B1
@ 福橘 只是你自己的感觉
22F
不错啊！！学习了！！！
23F
其他主题就不支持了吧
24F
据说微软现在已经释出入门套件在windows phone7的Marketplace是哪个，让开发 WordPress 的行动软件变得更为简易快速。希望以后手机对wordpress的后台管理更加强大啊..
25F
这个很不错。收藏下了。
26F
我习惯用代码模式进行编辑，预览模式感觉太耗费资源。
B1
@ 调皮鬼 耗费什么资源？
B2
@ 知更鸟 后台预览模式下，会耗费一部分浏览器内存，虽然极少
27F
鸟哥， 你好， 使用你的模版体验了很好的感觉。 我的记录浏览次数的wp-postviews 插件 统计单篇日志出错，刷新一下页面，浏览次数就增加两次。返回首页他又增加了一次。 比如刷新 http://www.52liao8.com/archives/1636.html 这篇文章。在线求解，麻烦鸟哥了。
B1
@ 我爱聊吧 补充下，在谷歌浏览器下出现这样的情况，其余浏览器显示正常。 但是你的网站在谷歌是正常的。
B2
@ 我爱聊吧 wp-postviews 插件设置中Count Views From:选择Guests Only
一种满足虚荣心的插件不要当真
28F
就少这个东东
29F
又来看看偶像
30F
用上了，可后台自动空两字没问题，前台缺老样子没空，除非后台空将近5个字，前台才基本两个字，在哪里可以修改一致？
31F
用了hotnews就是觉得好，第一眼就知道是我想要的。
32F
预览模式感觉太耗费资源。
B1
@ 屈臣氏官网 只加载了7K的CSS样式文件，耗费什么资源？
33F
好牛啊，学习了
34F
这么实用的文章刚看见，捶胸顿足，今晚就折腾去！
35F
好牛啊，学习了
36F
很不错的博客，我们喜欢。你可能对我们提供的服务感兴趣。我们提供北京时装设计课, 提供北京数码摄影课, 同时也提供北京网页设计和开发课帮助中国朋友融入国际市场，不仅仅是我们的责任，更是我们的乐趣。如果能对你有所帮助，那我们高兴得很。我们虽然从法国到北京，但我们认为知识和学习没有国界。谢谢webmaster：）
37F
我就是用 的2.7 的非常好!支持了谢谢鸟哥!
38F
你好博主，主题本身是默认首行缩进2格的，但是有时并部需要缩2格，所以我干脆把首行缩进2格给去了，在style.css删除了text-indent:2em;代码，可是后台编辑器里还是显示首行缩进2格，我想应该是在这修改，所以请问楼主该怎么修改啊，我试着删除上面的 text-indent:2em;语句，可是还是失败了，还是问问博主把，希望博主抽空回答一下，谢谢
B1
@ keke 打开主题editor-style.css删除text-indent:2em
39F
知更鸟啊 用了你的主题，在首页那里那个登录登录不进去了，成了个无效连接了啊
求解决啊
40F
具体的选择器是什么？请教下博主。
41F
鸟哥 你的主题后台编辑 可视化插入或编辑链接不可用 只有在html里面手动输入<a herf=……..才能用 希望修复一下 或者提供一下方法
来自外部的引用