频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
改变WordPress 后台编辑器样式实现直接预览
2011-09-12 11:21:16           
收藏   我要投稿

在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的宽度与你的主题正文部分相同。

点击复制链接 与好友分享!回本站首页
相关TAG标签 编辑器 样式 后台
上一篇:CSS实现文字浮雕效果,文字阴影效果
下一篇:DIV+CSS中浏览器兼容方法及div+css的使用技巧
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站