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

小马哥

在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. 
   
3. add_editor_style();

复制代码

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

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

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

1. body {
   
2. 
   
3. font: 13px 'Microsoft YaHei', 微软雅黑, Arial, Lucida Grande, Tahoma, sans-serif;
   
4. 
   
5. color: #000;
   
6. 
   
7. text-shadow: 0px 1px 0px #d1d1d1;
   
8. 
   
9. width: 700px;
   
10. 
    
11. }
    
12. 
    
13. ul li{
    
14. 
    
15. list-style: square inside;
    
16. 
    
17. line-height:24px;
    
18. 
    
19. }
    
20. 
    
21. h1 {font-size: 18px;line-height:185%;}
    
22. 
    
23. h2 {font-size: 16px;line-height:185%;}
    
24. 
    
25. h3 {font-size: 14px;line-height:185%;}
    
26. 
    
27. ul,ol,dd,pre,hr {
    
28. 
    
29. margin: 0 0 10px 0;
    
30. 
    
31. }
    
32. 
    
33. p {
    
34. 
    
35. line-height:185%;
    
36. 
    
37. text-indent:2em;
    
38. 
    
39. margin: 0 0 10px 0;
    
40. 
    
41. }
    
42. 
    
43. blockquote {
    
44. 
    
45. width:660px;
    
46. 
    
47. color: #4e6384;
    
48. 
    
49. line-height: 23px;
    
50. 
    
51. margin: 5px auto 5px auto;
    
52. 
    
53. padding:10px;
    
54. 
    
55. clear: both;
    
56. 
    
57. border: 1px solid #ccc;
    
58. 
    
59. }
    
60. 
    
61. code {
    
62. 
    
63. width: 660px;
    
64. 
    
65. font: 12px/17px tahoma, arial, sans-serif;
    
66. 
    
67. color: #4e6384;
    
68. 
    
69. display: block;
    
70. 
    
71. margin: 5px auto 5px auto;
    
72. 
    
73. padding: 10px;
    
74. 
    
75. border-left: 3px solid #8391A7;
    
76. 
    
77. border-right: 1px solid #8391A7;
    
78. 
    
79. border-top: 1px solid #8391A7;
    
80. 
    
81. border-bottom: 1px solid #8391A7;
    
82. 
    
83. }
    
84. 
    
85. blockquote td{
    
86. 
    
87. border-bottom: 1px solid #ccc;
    
88. 
    
89. padding: 2px;
    
90. 
    
91. }
    
92. 
    
93. /** 图文混排 **/
    
94. 
    
95. img.centered {
    
96. 
    
97. display: block;
    
98. 
    
99. margin-left: auto;
    
100. 
     
101. margin-right: auto;
     
102. 
     
103. margin-bottom: 10px;
     
104. 
     
105. }
     
106. 
     
107. img.alignnone {
     
108. 
     
109. margin:0 0 10px 0;
     
110. 
     
111. display: inline;
     
112. 
     
113. }
     
114. 
     
115. img.alignright {
     
116. 
     
117. margin: 0 0 10px 10px;
     
118. 
     
119. display: inline;
     
120. 
     
121. }
     
122. 
     
123. img.alignleft {
     
124. 
     
125. margin: 0 10px 10px 0;
     
126. 
     
127. display: inline;
     
128. 
     
129. }
     
130. 
     
131. .aligncenter {
     
132. 
     
133. display: block;
     
134. 
     
135. margin-left: auto;
     
136. 
     
137. margin-right: auto;
     
138. 
     
139. margin-bottom: 10px;
     
140. 
     
141. }
     
142. 
     
143. .alignright {
     
144. 
     
145. float: rightright;
     
146. 
     
147. margin: 0 0 10px 10px;
     
148. 
     
149. }
     
150. 
     
151. .alignleft {
     
152. 
     
153. float: left;
     
154. 
     
155. margin: 0 10px 10px 0;
     
156. 
     
157. }

复制代码

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

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

复制代码

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