1 問(wèn)題排查

• 2 WordPress文章如何顯示和前臺(tái)相同的文字樣式？
• 3 注意事項(xiàng)

有個(gè)想做網(wǎng)絡(luò)推廣的朋友，最近開(kāi)始學(xué)習(xí)用WordPress建站。

啟用 TinyMCE 編輯器 插件，在 TinyMCE 編輯器 插件的設(shè)置里，遇到這樣的問(wèn)題 ▼

創(chuàng)建CSS樣式菜單

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

若出現(xiàn)以上情況，WordPress可視化編輯器，可能無(wú)法顯示我們想要的代碼樣式風(fēng)格，比如：

• blockquote、pre、code……

問(wèn)題排查

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

當(dāng)我們?cè)赪ordPress后臺(tái)中編輯文章時(shí)，由于css樣式問(wèn)題，所以前臺(tái)和后臺(tái)顯示不一樣……

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

• 即前后樣式可以統(tǒng)一，因此Wordpress后臺(tái)編輯文章時(shí)，也可以看起來(lái)和前臺(tái)一樣。
• 同樣，我們不再需要因?yàn)閃ordpress后臺(tái)編輯的文章和前臺(tái)顯示不同，而來(lái)回修改它了。

如果我們打開(kāi)Wordpress的默認(rèn)主題Twenty Eleven，我們可以看到有一個(gè)這樣的html注釋和代碼?▼

//此主題使用editor-style.css為可視化編輯器設(shè)置樣式，以匹配主題樣式
add_editor_style();

• 此注釋的含義：可視化編輯器與主題editor-style.css樣式匹配。
• 這個(gè)函數(shù)實(shí)現(xiàn)起來(lái)也很簡(jiǎn)單，因?yàn)樗荳ordPress的默認(rèn)功能，我們只需要激活即可。

WordPress文章如何顯示和前臺(tái)相同的文字樣式？

第 1 步：創(chuàng)建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文件，復(fù)制到你的WordPress主題的根目錄中。

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

add_action( 'after_setup_theme', 'my_theme_setup' );
function my_theme_setup() {
add_editor_style();

// 對(duì)于塊編輯器
add_theme_support( 'editor-styles' );
}

第 5 步：刷新WordPress文章編輯頁(yè)面

• 查看并確認(rèn)WordPress前臺(tái)、后臺(tái)的文字樣式，是否一致？

注意事項(xiàng)

如果你的WordPress主題，沒(méi)有給“引用標(biāo)簽 blockquote ”、“代碼標(biāo)簽 pre/code”加上CSS樣式，就需要自己在WordPress主題的 style.css 文件里添加對(duì)應(yīng)的CSS代碼。

詳情請(qǐng)查看以下建站教程?▼

blockquote怎么用？HTML中blockquote標(biāo)簽demo效果

在WordPress文章編輯中，有一個(gè)常見(jiàn)的“塊引用” 按鈕▼使用后，它會(huì)在所選段落中添加一個(gè)<blockquote>標(biāo)記，以調(diào)用一些引用的語(yǔ)句或突出顯示。blockquote是什么意思？以下是陳溈……

CSS樣式里pre是什么？HTML中pre自動(dòng)換行code標(biāo)簽作用

我們用WordPress建站需要學(xué)習(xí)一些CSS?和 HTML的基礎(chǔ)知識(shí)：由于某些WordPress主題的CSS樣式文件，并沒(méi)有加入 pre?和?code?標(biāo)簽樣式。 大多數(shù)瀏覽器目前支持<pre>標(biāo)記。H……

希望我們網(wǎng)站（ https://www.wordpressx.com/ ） 分享的《已禁用:主題未添加名為editor-style.css的樣式表文件?》，對(duì)您有幫助。