改变WordPress 后台编辑器样式实现直接预览
在WordPress 3.0以后，有一个新的实用功能：你可以更改默认后台编辑器（TinyMCE）的样式，实现一个有趣的功能：在后台可视化编辑器模式下直接预览日志内容的编排，并且与前台浏览样式保持一致 ，不需要转到前台查看日志编辑情况。WordPress 3.21默认主题Twenty Eleven已集成了该功能，默认主题Twenty Eleven功能强大，集成了众多WordPress新功能，到目前为止，我还未研究透，囧......喜欢折腾WP主题的童鞋不妨多研究一下。
打开默认主题Twenty Eleven的functions.php，会看到一句加了明确注释的代码：
- // This theme styles the visual editor with editor-style.css to match the theme style.
- add_editor_style();
注释的中文大概意思为：可视化编辑器与主题editor-style.css风格相匹配。
关键就是这句。下面以HotNews Pro主题为例，轻松实现这一功能。
首先，新建一个名称为：editor-style.css的文件，将下面样式复制进去，或者直接下载：editor-style.css文件，并放到HotNews Pro主题css目录中。
- body {
- font: 13px 'Microsoft YaHei', 微软雅黑, Arial, Lucida Grande, Tahoma, sans-serif;
- color: #000;
- text-shadow: 0px 1px 0px #d1d1d1;
- width: 700px;
- }
- ul li{
- list-style: square inside;
- line-height:24px;
- }
- h1 {font-size: 18px;line-height:185%;}
- h2 {font-size: 16px;line-height:185%;}
- h3 {font-size: 14px;line-height:185%;}
- ul,ol,dd,pre,hr {
- margin: 0 0 10px 0;
- }
- p {
- line-height:185%;
- text-indent:2em;
- margin: 0 0 10px 0;
- }
- blockquote {
- width: 660px;
- color: #4e6384;
- line-height: 23px;
- margin: 5px auto 5px auto;
- padding: 10px;
- clear: both;
- border: 1px solid #ccc;
- }
- code {
- width: 660px;
- font: 12px/17px tahoma, arial, sans-serif;
- color: #4e6384;
- display: block;
- margin: 5px auto 5px auto;
- padding: 10px;
- border-left: 3px solid #8391A7;
- border-right: 1px solid #8391A7;
- border-top: 1px solid #8391A7;
- border-bottom: 1px solid #8391A7;
- }
- blockquote td{
- border-bottom: 1px solid #ccc;
- padding: 2px;
- }
- /** 图文混排 **/
- img.centered {
- display: block;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 10px;
- }
- img.alignnone {
- margin: 0 0 10px 0;
- display: inline;
- }
- img.alignright {
- margin: 0 0 10px 10px;
- display: inline;
- }
- img.alignleft {
- margin: 0 10px 10px 0;
- display: inline;
- }
- .aligncenter {
- display: block;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 10px;
- }
- .alignright {
- float: rightright;
- margin: 0 0 10px 10px;
- }
- .alignleft {
- float: left;
- margin: 0 10px 10px 0;
- }
其次，打开HotNews Pro主题的functions.php模版文件，加入一句：
- //后台预览
- add_editor_style('/css/editor-style.css');
第三，没有第三了呵呵，全部改造成完成！
下图是在后台可视化编辑模式下的截图，看看是不是与前台别无二致。在即将发的HotNews Pro 2.7正式版中已集成该功能
