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

作者: Cpder 分类: 杂七杂八 发布时间: 2014-08-24 17:13

在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风格相匹配。
关键就是这句。下面以本主题为例,轻松实现这一功能。
首先,新建一个名称为:editor-style.css的文件,将下面样式复制进去,或者直接下载:editor-style.css文件,并放到当前主题的css目录中。

  1. body {
  2. font:14px ‘Microsoft YaHei’, 微软雅黑, Arial, Lucida Grande, Tahomasans-serif;
  3. color:#000;
  4. text-shadow:0 1px 0 #d1d1d1;
  5. width:660px;
  6. }
  7. ul li {
  8. list-style:square inside;
  9. line-height:24px;
  10. }
  11. h1 {
  12. font-size:18px;
  13. line-height:185%;
  14. }
  15. h2 {
  16. font-size:16px;
  17. line-height:185%;
  18. }
  19. h3 {
  20. font-size:14px;
  21. line-height:185%;
  22. }
  23. ul,ol,dd,pre,hr {
  24. margin:0 0 10px;
  25. }
  26. p {
  27. line-height:185%;
  28. text-indent:2em;
  29. margin:0 0 10px;
  30. }
  31. blockquote {
  32. width:640px;
  33. color:#4e6384;
  34. line-height:23px;
  35. clear:both;
  36. border:1px solid #ccc;
  37. margin:5px auto;
  38. padding:10px;
  39. }
  40. code {
  41. width:640px;
  42. font:12px/17px tahomaarialsans-serif;
  43. color:#4e6384;
  44. display:block;
  45. border-left:3px solid #8391A7;
  46. border-right:1px solid #8391A7;
  47. border-top:1px solid #8391A7;
  48. border-bottom:1px solid #8391A7;
  49. margin:5px auto;
  50. padding:10px;
  51. }
  52. blockquote td {
  53. border-bottom:1px solid #ccc;
  54. padding:2px;
  55. }
  56. img.alignnone {
  57. display:inline;
  58. margin:0 0 10px;
  59. }
  60. img.alignright {
  61. display:inline;
  62. margin:0 0 10px 10px;
  63. }
  64. img.alignleft {
  65. display:inline;
  66. margin:0 10px 10px 0;
  67. }
  68. .alignright {
  69. float:rightright;
  70. margin:0 0 10px 10px;
  71. }
  72. .alignleft {
  73. float:left;
  74. margin:0 10px 10px 0;
  75. }
  76. img.centered,.aligncenter {
  77. display:block;
  78. margin-left:auto;
  79. margin-right:auto;
  80. margin-bottom:10px;
  81. }

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

  1. //后台预览   
  2. add_editor_style(‘/css/editor-style.css’);  //这里/css/**是你模板下的目录

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Optimized by WPJAM Basic