强化 WordPress 后台编辑器样式

网站APP, 转自点点 13 年前 回复

, , , ,

通常在 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 中文章内容的样式规则是：

body{
background:url("images/page-bg.jpg") repeat-x scroll 0 1px #ECEEEF;
border-top:1px solid #FFFFFF;
color:#0A0A0A;
font:12px Arial,Helvetica,"Lucida Grande","Verdana","Helvetica Neue",sans-serif;
margin:0 0 40px;
}
/*POST*/
.post .p-entry,.post .entry{
font-size:14px;
font-family:Georgia,Arial,serif,sans-serif;
}
.post .p-entry p{
margin:10px 0;
}
#container #content .post .p-entry h2{
border-bottom:1px solid #EDEDED;
font-size:16px;
margin:20px 0 15px;
}
#container #content .post .p-entry h3{
border-bottom:1px solid #EDEDED;
font-size:14px;
margin:15px 0 10px;
}
#container #content .post .p-entry table {
background:none repeat scroll 0 0 #FFFFFF;
border:2px solid #CCCCCC;
border-collapse:collapse;
margin:10px auto;
}
#container #content .post .p-entry th, .post .entry td {
border:1px solid #CCCCCC;
padding:3px 10px;
text-align:left;
vertical-align:top;
}
#container #content .post .p-entry tr.even td {
background:none repeat scroll 0 0 #F7F7F7;
}
#container #content .post .p-entry th {
background:none repeat scroll 0 0 #EDEFF0;
}
.post .p-entry blockquote{
border-left:5px dashed #CCCCCC;
color:#777777;
margin:5px 10px;
padding-left:15px;
}
.post .p-entry p code{
background-color:#F8F8F8;
border:1px dashed #CCCCCC;
color:#666666;
font:11px/180% "Lucida Console";
padding:2px 3px;
margin:0 2px;
}
.post .p-entry code.block{
background-color:#F8F8F8;
border:1px dashed #CCCCCC;
color:#666666;
display:block;
overflow:auto;
font:12px/180% "Lucida Console";
margin:10px 20px;
padding:5px 10px;
}
.post .p-entry p cite{
color:#888888;
padding:2px 5px;
}
.post .p-entry img{
border:1px solid #CCCCCC;
display:block;
margin:10px auto;
padding:3px;
}
.post .p-entry img.wp-smiley {
border:none;
display:inline;
margin:0;
padding:0;
vertical-align:middle;
}
.post .entry object,.post .p-entry object{
display:block;
margin:0 auto;
}
.post .entry img{
display:block;
margin:5px auto;
}
.post .p-entry a{
color:#27BCEE;
}
.post .p-entry ul li,.post .p-entry ol li{
margin-left:25px;
}
.post .p-entry strong{
font-weight:bold;
color:#0099ff;
}

根据我原来的代码，我新建了一个 editor.css 文件在主题目录下：

/* LOO2K editor styles */
*{margin:0;padding:0;}
#htmlSource{
border-collapse:collapse;
font:13px/180% "lucida Grande",Verdana;
height:515px;
padding:5px;
white-space:pre-wrap;
width:702px;
word-wrap:break-word;
}
body{
font:14px/28px Georgia,Arial,serif,sans-serif !important;
}
p{
margin:10px 0;
}
h2{
border-bottom:1px solid #EDEDED;
font-size:16px;
margin:20px 0 15px;
}
h3{
border-bottom:1px solid #EDEDED;
font-size:14px;
margin:15px 0 10px;
}
table {
background:none repeat scroll 0 0 #FFFFFF;
border:2px solid #CCCCCC;
border-collapse:collapse;
margin:10px auto;
}
td {
border:1px solid #CCCCCC;
padding:3px 10px;
text-align:left;
vertical-align:top;
}
td {
background:none repeat scroll 0 0 #F7F7F7;
}
th {
background:none repeat scroll 0 0 #EDEFF0;
}
blockquote{
border-left:5px dashed #CCCCCC;
color:#777777;
margin:5px 10px;
padding-left:15px;
}
code{
background-color:#F8F8F8;
border:1px dashed #CCCCCC;
color:#666666;
font:11px/180% "Lucida Console";
padding:2px 3px;
margin:0 2px;
}
code.block{
background-color:#F8F8F8;
order:1px dashed #CCCCCC;
color:#666666;
display:block;
overflow:auto;
font:12px/180% "Lucida Console";
margin:10px 20px;
padding:5px 10px;
}
cite{
color:#888888;
padding:2px 5px;
}
img{
border:1px solid #CCCCCC;
display:block;
margin:10px auto;
padding:3px;
}
object{
display:block;
margin:0 auto;
}
img{
display:block;
margin:5px auto;
}
a{
color:#27BCEE;
}
ul li,ol li{
margin-left:25px;
}
b,strong{
font-weight:bold;
color:#0099ff;
}

其中，我去掉了选择器里一些多于的内容。#htmlSource相当于编辑器的body。（以上代码仅供参考）

把样式表添加到 WordPress 编辑器上

既然已经写好了样式表，现在就只剩最后一步——把样式表链接 WordPress 到编辑器上。这个时候需要编辑你的 functions.php ：

<?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;
/******************/
?>

直接添加add_editor_style('editor.css');即可

//2011.12.6更新
按照上面的形式将代码添加到 functions.php 文件中即可。

WordPress 后台编辑器的其他强化

  • 不知 WordPress 的编辑器，其他的编辑器也可以这样弄
  • 制作 WordPress 主题的朋友可以参考下
  • 不一定要修改主题代码，也可以用 Firefox 的 Stylish插件实现
  • 还可以用 Greasemonkey这个插件实现
  • …

    • 但是现在还有几个问题：

    • WordPress 后台编辑器功能太烂
    • WordPress 后台编辑器的 HTML 代码编辑器很不方便
    • 或许可以使用外部的编辑器，如 notepad++

    文章来源:http://loo2k.com/wordpress-editor/

    声明：本文采用 BY-NC-SA 协议进行授权，如无注明均为原创，转载请注明转自 你好！刘
    本文地址：强化 WordPress 后台编辑器样式
    赏 支付宝打赏微信打赏

    如果此文对你有帮助，欢迎打赏作者。

    发表评论

    欢迎回来 (打开)

    (必填)