WordPress优化之可视化编辑器

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

Wordpress编辑器可视化

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

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

其实,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://www.jeriffcheng.com/wp-content/uploads/2011/05/actual-wysiwyg1.jpg"><img class="size-full wp-image-323" title="Wordpress编辑器可视化" src="http://www.jeriffcheng.com/wp-content/uploads/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即可。通过这两步,笔者编辑器成功实现了可视化:

wordpress编辑器可视化

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

  9Comments

  1. rollom   •  

    WP自己的可视化编辑很一般,我安装了相关的编辑插件,功能就强大多了。

  2. OneDou   •  

    :shock: 习惯html编辑器。。

    • Jeriff Cheng   •     Author

      :idea: 如果是排版比较简单的文章用HTML就可以;排版比较复杂的就不方便了

  3. 草帽luffy   •  

    这段时间了解了一下几大博客系统,wp作为最主流的博客系统,其强大与另外几个系统相比,无出其右。
    说真的,看得草帽好动心啊!可惜草帽没主机,再加上wp提供的托管功能相对较弱,所以最终投向了blogger——但还是很希望拥有wp主机的。
    虽然没有wp主机,但从你这看了好几篇wp的文章,先学着;不定什么时候用得上,呵呵

    PS:
    帽子的新浪播客弃了,不再更新,新站地址为www.shumabox.tk(由于是blogger,可能需要翻墙)。
    另外,Jeriff Cheng,发表评论的textarea输入域中的图片还是去了吧,发表内容时,与字重叠在一起,看着有些乱啊!

    • Jeriff Cheng   •     Author

      我现在用的是VPS,400/年就可以了。你可以考虑一下;
      额,评论区域那个图片废了好大劲才搞进去的,嘿嘿,丢了蛮可惜的,虽然是有那么点不协调…..

      • 草帽luffy   •  

        不是没想过,问题是LP不同意啊!
        别提了,“城里人”有时候很可怜的,全是眼泪……。

        • Jeriff Cheng   •     Author

          :???: 你的LP怎么就想不通呢,不开明嘛 :smile:

        • Terry Chen   •  

          哈哈,真是烦恼啊! :evil:

Leave a Reply

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