已禁用:主題未添加名為editor-style.css的樣式表文件?

有個想做網絡推廣的朋友，最近開始學習用WordPress建立站。

啟用TinyMCE 編輯器插件，在TinyMCE 編輯器插件的設置裡，遇到這樣的問題▼

創建CSS樣式菜單

• 加載editor-style.css中使用的CSS樣式，並替換“格式”菜單。
• 禁用： editor-style.css的樣式表文件。
• 禁用： A stylesheet file named editor-style.css was not added by your theme.

若出現以上情況，WordPress可視化編輯器，可能無法顯示我們想要的代碼樣式風格，比如：

• blockquote、pre、code…

問題排查

1. 請問editor-style.css文件，是否在WordPress主題的根目錄中？
2. 你在使用子主題（child）嗎？

當我們在WordPress後台中編輯文章時，由於css樣式問題，所以前台和後台顯示不一樣……

但Wordpress 3.0之後的版本，具有非常好的功能：

• 即前後樣式可以統一，因此Wordpress後台編輯文章時，也可以看起來和前台一樣。
• 同樣，我們不再需要因為Wordpress後台編輯的文章和前台顯示不同，而來回修改它了。

如果我們打開Wordpress的默認主題Twenty Eleven，我們可以看到有一個這樣的html註釋和代碼 ▼

//此主题使用editor-style.css为可视化编辑器设置样式，以匹配主题样式
add_editor_style();

• 此註釋的含義：可視化編輯器與主題editor-style.css樣式匹配。
• 這個函數實現起來也很簡單，因為它是WordPress的默認功能，我們只需要激活即可。

WordPress文章如何顯示和前台相同的文字樣式？

第1步：創建editor-style.css文件

第2步：將以下代碼添加到editor-style.css文件裡▼

@import url('../style.css');

body {
margin: 14px;
max-width: 702px;
}

.post-content {
font-size: 14px;
}

第3步：將editor-style.css文件，複製到你的WordPress主題的根目錄中。

第 4 章 步：添加以下代碼到functions.php文件裡▼

//此主题使用editor-style.css为可视化编辑器设置样式，以匹配主题样式 
add_action( 'after_setup_theme', 'my_theme_setup' );
function my_theme_setup() {
add_editor_style();

// 对于块编辑器
add_theme_support( 'editor-styles' );
}

第5步：刷新WordPress文章編輯頁面

• 查看並確認WordPress前台、後台的文字樣式，是否一致？

注意事項

如果你的WordPress主題，沒有給“引用標籤blockquote ”、“代碼標籤pre/code”加上CSS樣式，就需要自己在WordPress主題的style.css 文件裡添加對應的CSS代碼。

詳情請查看以下建站教程 ▼

blockquote怎麼用？ HTML中blockquote標籤demo效果

在WordPress文章編輯中，有一個常見的“塊引用” 按鈕▼使用後，它會在所選段落中添加一個標記，以調用一些引用的語句或突出顯示。 blockquote是什麼意思？以下是陳溈……

CSS樣式裡pre是什麼？ HTML中pre自動換行code標籤作用

我們用WordPress建站需要學習一些CSS 和HTML的基礎知識：由於某些WordPress主題的CSS樣式文件，並沒有加入pre 和 code 標籤樣式。大多數瀏覽器目前支持標記。 H……