讓wordpress後台的文章編輯器預覽樣式和前台一致

WordPress 的文章編輯器也是一套所見即所得(What You See Is What You Get，簡稱 WYSIWYG)的 TinyMCE 編輯器，但是我們知道它跟前台最終呈現的結果會有一些些不同，例如字體的顏色、大小、間距等等，大部分是CSS樣式造成前後台不一致的結果。我們知道原生的 TinyMCE 編輯器，是可以自行加入自定CSS樣式來解決這個問題，但是在 wordpress 要怎麼解決呢？

在 wordpress 中，利用一個函數叫做 add_editor_style()，它可以讓你的編輯器引入 css 檔來改變編輯的效果。而我們需要先將前台文章區塊內，所有相關的 css 樣式抓出來另存成一個 css 檔，再利用 add_editor_style() 呼叫這個檔案使用即可。

用法

[php]
add_editor_style( $stylesheet );
[/php]

參數說明

$stylesheet（字串或陣列，可填或不填），當不填寫時，表示使用該佈景下的 editor-style.css 檔案。若是想要使用自定名稱的檔案，則填寫該檔案名稱即可，例如：『sig-editor-style.css』。當然也可以填寫在外部的css檔，例如：『//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css』。

範例

[php]
function sig_add_editor_styles() {
add_editor_style( ‘sig-editor-style.css’ );
add_editor_style( ‘//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css’ );
}
add_action( ‘init’, ‘sig_add_editor_styles’ );
[/php]