在 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 正式版中已集成該功能。
由於後台編輯器與前台處於不同的樣式框架中，所以如果你想改造其它主題，只需將主題 style.css 中與正文相關的樣式複製出來，並去掉具體的選擇器即可，比如我上面的樣式代碼，也可以參考默認主題 Twenty Eleven 中的 editor-style.css，關鍵是要設置 body 的寬度與你的主題正文部分相同。