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

知更鸟
知更鸟
知更鸟
1632
文章
6930
评论
2011年9月11日16:03:015213K6

在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 删除xmlrpc.php防DDOS攻击 WordPress

WordPress 删除xmlrpc.php防DDOS攻击

可能很多WordPress用户都不知道这个xmlrpc.php是什么,简单地说就是Wordpress 为手机等客户端提供的接口文件,早期的Wordpress 这个接口就是个万恶之源,虽然经过多次的升级...
WordPress 5.6.1 维护更新 WordPress

WordPress 5.6.1 维护更新

WordPress 5.6.1 维护更新,修复20个错误及7个区块编辑器问题,无安全更新,中文版同期发布。 看了一下更新日志,只有少数几个程序的错误,基本都是修正默认主题的错误。 该版本是一个短周期维...
登录用户显示不同的 WordPress 菜单 WordPress

登录用户显示不同的 WordPress 菜单

如果让登录用户与未登录浏览者,显示不同的菜单,可以通过下面的代码实现: 登录用户显示不同的 WordPress 菜单 将下面代码添加到当前主题函数模板functions.php中: if( is_us...