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

更新日期:2014-09-24

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

 

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

 

用法

add_editor_style( $stylesheet );

 

參數說明

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

 

範例

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' );

發佈留言