WordPress优化之可视化编辑器

WordPress默认的文章编辑器分“可视化”和“HTML”两种模式，前者提供WYSIWYG（What-You-See-Is-What-You-Get ）编辑界面。但是这个可视化编辑器除了提供一些方便快捷的按钮（比如：加粗，下划线，字体大小）之外，并没有显得多么“可视化”：我们在编辑界面看到的文章样式和发布后的简直是“天壤之别”！

编辑界面看到的文章样式和发布后的简直是“天壤之别”！

为什么会出现这种情况呢？所谓的“可视化”编辑器怎么一点都不“可视化”呢！

其实，WordPress的可视化编辑器的确是可视化的，它使得我们用鼠标点击几下就可以达到书写一堆繁琐的HTML代码的效果，也就是说，在后台编辑界面存在的文章和网站前台看到的文章的HTML代码是一模一样的。那么，为什么他们“看起来”区别那么大呢？原因很简单：后台编辑器没有调用主题的CSS文件，而前台调用了。

同样的一段HTML代码，使用CSS渲染和不使用，“看起来”是完全不一样的，WordPress后台默认是不调用主题的CSS的，只调用了WordPress默认的最基本的CSS。既然知道了原因，那么，如果使WordPress后台调用主题CSS并渲染编辑器就可以让编辑器更加“可视化”，甚至和前台看到的样式一样！

如何使WordPress后台调用主题CSS并渲染编辑器？

也许你会说，直接调用主题CSS不就可以啦？干嘛非要指定渲染编辑器？答案是：不能！后台如果都应用了主题的CSS会变得很难看，不信可以试试。我们只是想让编辑器和前台更加相像，这样编辑文章的时候更方便；另一方面，主题CSS中除了文章的CSS之外还有许多其他内容，为了渲染编辑器而调用整个主题CSS文件，未免有点小题大做了！综上所述，【指定编辑器应用相应的CSS而不影响后台其他区域】无疑是最好的方案。

WordPress其实是支持编辑器自定义CSS的，不知道大家有没有注意默认主题Twenty Ten的CSS文件，除了style.css之外，还有一个editor-style.css，这个CSS就是用来个性化编辑器样式了，我们可以创建一个专门用于后台编辑器的CSS文件（将主题里面关于文章样式的CSS提取并导入该文件），然后用<?php add_editor_style( $stylesheet ); ?> 这个函数（参见：WordPress Codex>）指定其为编辑器专用CSS。具体做法如下：

1.在主题根目录下创建editor-style.css 文件，然后在function.php文件中添加以下代码：

// 指定editor-style.css为编辑器CSS
add_editor_style('editor-style.css');

2.将主题style.css中和文章样式相关的代码复制进editor-style.css文件；如果觉得过程繁琐，可以这么做：

查看文章正文源码,如下所示：

<div class="format_text entry-content">
<p>WordPress默认的文章编辑器分“可视化”和“HTML”两种模式，前者提供<strong>WYSIWYG</strong>（What-You-See-Is-What-You-Get ）编辑界面。但是这个可视化编辑器除了提供一些方便快捷的按钮（比如：加粗，下划线，字体大小）之外，并没有显得多么“可视化”：我们在编辑界面看到的文章样式和发布后的简直是“天壤之别”！</p>
<div id="attachment_323" class="wp-caption alignnone" style="width: 500px;">
	<a href="http://uploads.92app.com/2011/05/actual-wysiwyg1.jpg"><img class="size-full wp-image-323" title="Wordpress编辑器可视化" src="http://uploads.92app.com/2011/05/actual-wysiwyg1.jpg" alt="Wordpress编辑器可视化" height="216" width="500"></a>
	<p class="wp-caption-text">编辑界面看到的文章样式和发布后的简直是“天壤之别”！</p>
</div>
<p>为什么会出现这种情况呢？所谓的“可视化”编辑器怎么一点都不“可视化”呢！</p>
<p class="note">其实，WordPress的可视化编辑器的确是可视化的，它使得我们用鼠标点击几下就可以达到书写一堆繁琐的HTML代码的效果，也就是说，在后台编辑界面存在的文章和网站前台看到的文章的HTML代码是一模一样的。那么，为什么他们“看起来”区别那么大呢？原因很简单：<strong>后台编辑器没有调用主题的CSS文件，而前台调用了。</strong></p>
.......

找到前面的<div class=“XXX”> ，就是 = 后面这个class主管文章样式（笔者的是format_text entry-content），接着在function.php文件中加入以下代码：

//向editor-style.css导入渲染的文章的CSS
function mytheme_mce_settings( $initArray ){
 $initArray['body_class'] = 'format_text entry-content';
 return $initArray;
}
add_filter( 'tiny_mce_before_init', 'mytheme_mce_settings' );

将第3行最后的format_text entry-content换成自己主题里面的相应CSS class即可。通过这两步，笔者编辑器成功实现了可视化:

通过指定editor-style.css，实现编辑器可视化

您可能也喜欢这些文章：

• 2011/05/02 — WordPress优化之Optimize the order of styles and scripts (1)
• 2011/04/19 — WordPress优化之Specify a cache validator (4)
• 2011/04/18 — WordPress优化之Gzip压缩CSS和JS文件 (11)
• 2012/03/29 — 纯代码替换All in One SEO Pack 插件，实现SEO优化 (7)
• 2012/03/16 — WordPress配置文件wp-config.php实用技巧 (3)
• 2011/09/29 — WordPress网站.htaccess文件配置技巧 (4)
• 2011/07/26 — CSS文件瘦身(2)—压缩CSS文件 (5)
• 2011/06/17 — 纯代码实现外链自动添加小图标 (7)