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

发布时间:2020-05-05

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

 

大熊wordpress凭借多年的wordpress企业主题制作经验,坚持以“为用户而生的wordpress主题”为宗旨,累计为2000多家客户提供品质wordpress建站服务,得到了客户的一致好评。我们一直用心对待每一个客户,我们坚信:“善待客户,将会成为终身客户”。大熊wordpress能坚持多年,是因为我们一直诚信。我们明码标价(wordpress做网站需要多少钱),从不忽悠任何客户,我们的报价宗旨:“拒绝暴利,只保留合理的利润”。如果您有网站建设、网站改版、网站维护等方面的需求,请立即咨询右侧在线客服或拨打咨询热线:18324743309,我们会详细为你一一解答你心中的疑难。

相关文章

写给所有做网站的朋友的一封信

写给所有做网站的朋友的一封信

现在就开始执行“1+N”互联网推广和没有开始执行的人,一两天看不出任何区别; 一两个月看来差异也是微乎其微的;但在2-5年的长远时间来看的时候,你的高质量询盘不断增加,你的互联网资产已经建立完成,对手已经很难匹敌,现在你看到这段文字的时候就是最好的开始,现在就是最好的时候,马上开始“1+N”体系的整体互联网推广吧,我们和你一起,开创互联网大未来!

点击查看详情

准备开启WordPress网站建设推广?

我们相信高端漂亮的网站不应该是昂贵的,这就是wordpress对每个人都是免费的原因
wordpress建站免费入门,并提供价格合理的wordpress建站套餐。