改变WordPress 后台编辑器样式实现直接预览

2011年09月11日16:03:01 52 11,881

WordPress 3.0以后,有一个新的实用功能:你可以更改默认后台编辑器(TinyMCE)的样式,实现一个有趣的功能:在后台可视化编辑器模式下直接预览日志内容的编排,并且与前台浏览样式保持一致 ,不需要转到前台查看日志编辑情况。WordPress 3.21默认主题Twenty Eleven已集成了该功能,默认主题Twenty Eleven功能强大,集成了众多WordPress新功能,到目前为止,我还未研究透,囧......喜欢折腾WP主题的童鞋不妨多研究一下。

打开默认主题Twenty Eleven的functions.php,会看到一句加了明确注释的代码:

  1. // This theme styles the visual editor with editor-style.css to match the theme style.
  2. add_editor_style();

注释的中文大概意思为:可视化编辑器与主题editor-style.css风格相匹配。

关键就是这句。下面以HotNews Pro主题为例,轻松实现这一功能。

首先,新建一个名称为:editor-style.css的文件,将下面样式复制进去,或者直接下载:editor-style.css文件,并放到HotNews Pro主题css目录中。

  1. body {
  2.     font13px 'Microsoft YaHei', 微软雅黑, Arial, Lucida Grande, Tahomasans-serif;
  3.     color#000;
  4.     text-shadow0px 1px 0px #d1d1d1;
  5.     width700px;
  6.     }
  7. ul li{
  8.     list-stylesquare inside;
  9.     line-height:24px;
  10.     }
  11. h1 {font-size18px;line-height:185%;}
  12. h2 {font-size16px;line-height:185%;}
  13. h3 {font-size14px;line-height:185%;}
  14. ul,ol,dd,pre,hr {
  15.     margin: 0 0 10px 0;
  16.     }
  17. p {
  18.     line-height:185%;
  19.     text-indent:2em;
  20.     margin: 0 0 10px 0;
  21.     }
  22. blockquote {
  23.     width660px;
  24.     color#4e6384;
  25.     line-height23px;
  26.     margin5px auto 5px auto;
  27.     padding10px;
  28.     clearboth;
  29.     border1px solid #ccc;
  30.     }
  31. code {
  32.     width660px;
  33.     font12px/17px tahomaarialsans-serif;
  34.     color#4e6384;
  35.     displayblock;
  36.     margin5px auto 5px auto;
  37.     padding10px;
  38.     border-left3px solid #8391A7;
  39.     border-right1px solid #8391A7;
  40.     border-top1px solid #8391A7;
  41.     border-bottom1px solid #8391A7;
  42.     }
  43. blockquote td{
  44.     border-bottom1px solid #ccc;
  45.     padding2px;
  46.     }
  47. /** 图文混排 **/
  48. img.centered  {
  49.     displayblock;
  50.     margin-leftauto;
  51.     margin-rightauto;
  52.     margin-bottom10px;
  53.     }
  54. img.alignnone {
  55.     margin: 0 0 10px 0;
  56.     displayinline;
  57.     }
  58. img.alignright {
  59.     margin: 0 0 10px 10px;
  60.     displayinline;
  61.     }
  62. img.alignleft {
  63.     margin: 0 10px 10px 0;
  64.     displayinline;
  65.     }
  66. .aligncenter {
  67.     displayblock;
  68.     margin-leftauto;
  69.     margin-rightauto;
  70.     margin-bottom10px;
  71.     }
  72. .alignright {
  73.     floatrightright;
  74.     margin: 0 0 10px 10px;
  75.     }
  76. .alignleft {
  77.     floatleft;
  78.     margin: 0 10px 10px 0;
  79.     }

其次,打开HotNews Pro主题的functions.php模版文件,加入一句:

  1. //后台预览
  2. add_editor_style('/css/editor-style.css');

第三,没有第三了呵呵,全部改造完成!

在即将发的HotNews Pro 2.7正式版中已集成该功能。

由于后台编辑器与前台处于不同的样式框架中,所以如果你想改造其它主题,只需将主题style.css中与正文相关的样式复制出来,并去掉具体的选择器即可,比如我上面的样式代码,也可以参考默认主题Twenty Eleven中的editor-style.css,关键是要设置body的宽度与你的主题正文部分相同。

 

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:52   其中:访客  43   博主  8   引用   1

    • 马啃菠箩 1

      我是沙发,我去看看Twenty Eleven啥样去

      • 强哥 4

        沙发没了,正式版什么时候发布?

          • 知更鸟 Admin

            @强哥 应该会很快,赶在放假这三天,完善一下,因为平时上班不会有太多时间

          • 济南装修 1

            wp果然强大。。看来有必要换了

            • pekko薇 2

              看不明白- -#

              • 四川人 6

                老大,你不是说没有正式版么!

                • shtion 3

                  鸟哥每次的技巧分享都与众不同,非常感谢鸟哥的用心,永久支持!期待2.7正式版早日完善和发布!祝鸟哥中秋节快乐!

                  • 熊猫大侠 5

                    学习了

                    • ruantoo 4

                      用上鸟~~~

                      • 九江博客 2

                        祝博主中秋节快乐,工作重要,写博客重要,过节和家人团聚更重要哦!祝你们全家安康,快乐度过节日,呵呵!

                        • 看得见风的人 6

                          祝鸟哥中秋快乐,身体健康,工作顺利,阖家欢乐!

                          • Bob 5

                            中秋快乐!

                            • 合肥SEO 4

                              也祝鸟哥天天快乐

                              • 强龙网 3

                                期待鸟哥得2.7正式版发布。。

                                • 北京艺术摄影 1

                                  很好,学习下。

                                  • 汽轮机 1

                                    我所见到 最好看的wordpress

                                    • 小小鱼 4

                                      嗯嗯 很好 方便折腾了。。

                                      • 嘉林 4

                                        这个要留名,以前就想过要有这种所见所得功能。

                                        • 1

                                          怎么设置网站页面底部分类只显示最大的分类 友情链接那也变形了

                                          • 影楼 4

                                            对代码还不太懂,有待学习啊

                                            • 草根创业 3

                                              等待2.7版本出现,技术是没有止境的
                                              学习了

                                              • 福橘 5

                                                鸟哥,给你咱的模板提个建议,cms模式下分栏里题目前的“绿黄蓝橘”四个小色块给取消了?因为整体感觉颜色偏多了,看时间长了对视觉造成很大压力,显得有些乱。

                                                • 无锡股票培训 3

                                                  不错啊!!学习了!!!

                                                  • 网站备案 2

                                                    其他主题就不支持了吧

                                                    • 我的移动互联 2

                                                      据说微软现在已经释出入门套件在windows phone7的Marketplace是哪个,让开发 WordPress 的行动软件变得更为简易快速。希望以后手机对wordpress的后台管理更加强大啊..

                                                      • wmtimes 7

                                                        这个很不错。收藏下了。

                                                        • 调皮鬼 3

                                                          我习惯用代码模式进行编辑,预览模式感觉太耗费资源。

                                                          • 我爱聊吧 4

                                                            鸟哥, 你好, 使用你的模版体验了很好的感觉。 我的记录浏览次数的wp-postviews 插件 统计单篇日志出错,刷新一下页面,浏览次数就增加两次。返回首页他又增加了一次。 比如刷新 http://www.52liao8.com/archives/1636.html 这篇文章。在线求解,麻烦鸟哥了。

                                                              • 我爱聊吧 4

                                                                @我爱聊吧 补充下,在谷歌浏览器下出现这样的情况,其余浏览器显示正常。 但是你的网站在谷歌是正常的。

                                                                  • 知更鸟 Admin

                                                                    @我爱聊吧 wp-postviews 插件设置中Count Views From:选择Guests Only
                                                                    一种满足虚荣心的插件不要当真

                                                                • lcr99 0

                                                                  就少这个东东

                                                                  • 若名 1

                                                                    又来看看偶像

                                                                    • 落幕的戏子 3

                                                                      用上了,可后台自动空两字没问题,前台缺老样子没空,除非后台空将近5个字,前台才基本两个字,在哪里可以修改一致?

                                                                      • 子明 2

                                                                        用了hotnews就是觉得好,第一眼就知道是我想要的。

                                                                        • 屈臣氏官网 5

                                                                          预览模式感觉太耗费资源。

                                                                          • 韩都衣舍旗舰店 0

                                                                            好牛啊,学习了

                                                                            • soping 0

                                                                              这么实用的文章刚看见,捶胸顿足,今晚就折腾去!

                                                                              • 淘宝折扣网 1

                                                                                好牛啊,学习了

                                                                                • ssa 1

                                                                                  很不错的博客,我们喜欢。你可能对我们提供的服务感兴趣。我们提供北京时装设计课, 提供北京数码摄影课, 同时也提供北京网页设计和开发课帮助中国朋友融入国际市场,不仅仅是我们的责任,更是我们的乐趣。如果能对你有所帮助,那我们高兴得很。我们虽然从法国到北京,但我们认为知识和学习没有国界。谢谢webmaster:)

                                                                                  • 爱子鱼 1

                                                                                    我就是用 的2.7 的非常好!支持了谢谢鸟哥!

                                                                                    • keke 1

                                                                                      你好博主,主题本身是默认首行缩进2格的,但是有时并部需要缩2格,所以我干脆把首行缩进2格给去了,在style.css删除了text-indent:2em;代码,可是后台编辑器里还是显示首行缩进2格,我想应该是在这修改,所以请问楼主该怎么修改啊,我试着删除上面的 text-indent:2em;语句,可是还是失败了,还是问问博主把,希望博主抽空回答一下,谢谢

                                                                                        • 知更鸟 Admin

                                                                                          @keke 打开主题editor-style.css删除text-indent:2em

                                                                                        • alexxiaoxie 1

                                                                                          知更鸟啊 用了你的主题,在首页那里那个登录登录不进去了,成了个无效连接了啊
                                                                                          求解决啊

                                                                                          • 3

                                                                                            具体的选择器是什么?请教下博主。

                                                                                            • 小昊 0

                                                                                              鸟哥 你的主题后台编辑 可视化插入或编辑链接不可用 只有在html里面手动输入<a herf=……..才能用 希望修复一下 或者提供一下方法

                                                                                            • 来自外部的引用: 1

                                                                                              • 改变WordPress 后台编辑器样式实现直接预览 – 蓝枫博客