在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=……..才能用 希望修复一下 或者提供一下方法
来自外部的引用