强化你的 WordPress 后台编辑器
28通常在 WordPress 的后台编辑器上面编辑文章的时候显示的是 WordPress 的默认样式，而我们发布出去的文章内容使用的是 WordPress 主题上的样式。我想在 WordPress 的默认编辑器里面显示 WordPress 主题的文章内容样式。
简单一点通过下面两张图片了解这是什么：
WordPress 编辑器默认的效果（这是在没有自定义的情况下显示的效果）：
通过自定义 CSS 文件实现的 WordPress 编辑器所见即所得效果：
图示的两张图片是我在我的博客上的一篇《给新手的 HTML 进阶秘籍》文章在编辑时的效果，我把 WordPress 主题自带的文章内容样式搬到了 WordPress 后台编辑器上。这样当我想预览编辑的内容在主题上面显示的效果的时候就不用一次一次的去点预览了。在 Windows live writer 上也有类似的功能，不过这篇文章讨论的是如何将这个功能加到你自己的 WordPress 主题上。
实现 WordPress 后台编辑器预览效果
这次操作需要修改你的 WordPress 主题，所以修改之前请注意备份。主要内容是修改 functions.php 以及创建一个 editor.css 的文件。
创建给 WordPress 后台编辑器的 editor.css 文件
这个文件时专门为 WordPress 后台编辑器写的样式文件，你可以从你的 WordPress 主题中的 style.css 文件中提取出你文章内容的样式（重要：提取时请注意修改 CSS 的选择器）。由于 WordPress 的后台编辑器的编辑区用的是 Ifram ，所以编辑样式表的时候只需要直接给类似于 <p> <blockquote> <cite> <h2> <hr />…等标签样式即可。
下面是我博客的一个实例：（需要根据主题编写，请勿照搬）
我的主题在 style.css 中文章内容的样式规则是：
.post .entry {
font-size: 13px;
margin: 6px 0;
line-height: 1.8;
word-spacing: 3px;
}
.entry p {
margin-bottom: 10px;
}
.entry blockquote {
border-left: 2px dashed #DDDDDD;
color: #999999;
margin: 5px 10px 10px;
padding: 0 15px;
}
根据我原来的代码，我新建了一个 editor.css 文件在主题目录下：
body {
font-size: 13px;
margin: 6px 0;
line-height: 1.8;
word-spacing: 3px;
}
p {
margin-bottom: 10px;
}
blockquote {
border-left: 2px dashed #DDDDDD;
color: #999999;
margin: 5px 10px 10px;
padding: 0 15px;
}
其中，我去掉了选择器里一些多于的内容。（以上代码仅供参考）
把样式表添加到 WordPress 编辑器上
既然已经写好了样式表，现在就只剩最后一步——把样式表链接 WordPress 到编辑器上。这个时候需要编辑你的 functions.php ：
function editor_styles($url) {
if (!empty($url)) $url .= ',';
$url .= trailingslashit(get_stylesheet_directory_uri()).'editor.css';
return $url;
}
if(current_user_can('edit_posts')):
add_filter('mce_css', 'editor_styles');
endif;
}
按照上面的形式将代码添加到 functions.php 文件中即可。
WordPress 后台编辑器的其他强化
根据上面的办法，你可以打开你的 WordPress 后台编辑器测试下效果了。这样的预览效果估计能让你的 WordPress 后台编辑文章的时候更方便一点。
还有几个想法：
- 不知 WordPress 的编辑器，其他的编辑器也可以这样弄
- 制作 WordPress 主题的朋友可以参考下
- 不一定要修改主题代码，也可以用 Firefox 的 Stylish 插件实现
- 还可以用 Greasemonkey 这个插件实现
- …
但是现在还有几个问题：
- WordPress 后台编辑器功能太烂
- WordPress 后台编辑器的 HTML 代码编辑器很不方便
- 或许可以使用外部的编辑器，如 notepad++
下个星期三就要参加高二的学业水平测试，考完之后我就是个高三生了，至于这些问题就留到下篇文章吧 :P
顶起～～ 我们 会考 考完鸟～～～
顶起～～ 我们会考 考完鸟 ～～
@Kars
你们会考真快，我们得等到高三的高考完之后才考。
@loo2k
我们 政治 是 高三 会考 ，其他 都是 高二会考、、话说，你的 Ajax 评论 好像 有问题 。。
@loo2k
可能是 我网页 没有 完全载入 、、现在好了、、
Pingback: Tweets that mention 强化你的 WordPress 后台编辑器 | LOO2K -- Topsy.com
:cool: 已阅
WP也是用php的,应该可以使用CKEditor来代替吧?
另外你似乎特别偏爱small caps啊,某些地方感觉可读性不大好…
@Pstrey
这个想法应该是上次在 TWITTER 上面看到你说在 BLOGGER 后台实现这种效果的，后来想在 WordPress 上实现 :razz:
编辑器 CKEditor 不错 ，还没折腾到 WordPress 上去，我记得有个给 WordPress 的插件，话说 WordPress 后台的 HTML 编辑器太诡异了…
很喜欢 small caps，已经尽量放在不是很重要的文本上了。
BTW：很喜欢你的评论 :smile: 刚把你添加到友情链接了 :grin:
高级东西~~ 懒得动后台样式…
我们也下礼拜会考。
额哈哈～我就是想实现这种效果～～去折腾一下先～
水平测试加油！(o^^)oo(^^o)
@Roywoo
hey.学业水平测试加油哦 :smile:
@数数
不知道你们的会考和我们一样不？加油！
@吖Bee
:wink: Thanks
:smile:嗯嗯，这个后台体验好多了~~~
对了，今天你这边好多乱码呢~~~
像左下角的提示：
???? LOO2K ??????
RSS ??????close
@MOPVHS
恩，发现了。上次更新代码的时候用YUICompress压缩的时候忘记弄成UTF-8的编码了。下午改好之后又忘记上传了 :razz:
3.0的主题里面有提到这个 add_editor_style();就好了
@winy
还没有升级3.0的想法呢，哈哈~ :smile:
找时间研究下3.0的函数 :wink:
你这截图不是wp默认的编辑器吧,默认的编辑器很简单的,我看倒像fckedit
不错不错顶下楼主~
插入代码看来主要还是样式上的变动啊。
一个高中生的博客，不错啊。高中就懂那么多东西了
不错不错，顶上去，很不错的文章，学到了很多东西了
也向你学习，高中生做成这样很不错哦！
来学习一下，呵呵。。。
Pingback: 强化 WordPress 后台编辑器 | WordPress体验中心
学习了。。
哈哈，折腾不出来，表示鸭梨很大
恩 最近又折腾了一下这个东西。