讓W(xué)ordPress塊編輯器外觀與前端設(shè)計(jì)一致！

作為WordPress用戶，您是否也經(jīng)常需要同時(shí)打開兩個(gè)標(biāo)簽頁進(jìn)行文章編輯？一個(gè)標(biāo)簽頁顯示新的Gutenberg塊編輯器，另一個(gè)則預(yù)覽文章前端效果，以確保最終呈現(xiàn)不出錯(cuò)？

WordPress主題樣式僅影響網(wǎng)站前端，后端編輯器通常與前端效果大相徑庭。但這并非不可改變！通過自定義樣式表，您可以讓W(xué)ordPress編輯器幾乎完美地鏡像前端外觀。

這只需兩個(gè)簡單的步驟：

1. 在主題的functions.php文件中添加幾行PHP代碼，告知編輯器加載自定義樣式表。
2. 創(chuàng)建并配置該自定義樣式表。

讓我們開始操作吧！

第一步：修改functions.php文件

如果您使用的是非自行開發(fā)的WordPress主題，強(qiáng)烈建議您先創(chuàng)建一個(gè)子主題，然后再對主要主題進(jìn)行任何修改。

打開主題的functions.php文件（通常位于主題文件夾的根目錄），在文件末尾添加以下代碼：

// Gutenberg自定義樣式表
add_theme_support('editor-styles');
add_editor_style( 'editor-style.css' ); // 確保路徑正確指向樣式表文件

這段代碼告訴WordPress支持使用自定義樣式表與Gutenberg協(xié)同工作，并指定了樣式表文件（editor-style.css）的位置。

第二步：編寫CSS樣式

現(xiàn)在，我們進(jìn)入CSS編寫環(huán)節(jié)。

由于WordPress主題種類繁多，不可能編寫一個(gè)適用于所有主題的樣式表。以下示例基于我網(wǎng)站使用的主題，希望能幫助您理解如何為自己的網(wǎng)站構(gòu)建樣式表。文末將提供一個(gè)模板，幫助您快速上手。

創(chuàng)建一個(gè)名為editor-style.css的新文件，并將其放置在主題的根目錄（或子主題目錄）。

塊編輯器的CSS樣式與標(biāo)準(zhǔn)CSS略有不同。例如，以下代碼無法在文章中正確應(yīng)用文本大?。?/p>

h2 {
  font-size: 1.75em;
}

要正確設(shè)置樣式，需要針對塊編輯器中的塊進(jìn)行定位。這意味著<h2></h2>元素需要使用.rich-text.block-editor-rich-text__editable類進(jìn)行作用域限定：

h2.rich-text.block-editor-rich-text__editable {
  font-size: 1.75em;
}

我已經(jīng)創(chuàng)建了一個(gè)基礎(chǔ)CSS文件，它遵循此模式來設(shè)置常用塊編輯器元素的樣式。您可以從GitHub獲取該文件，并替換樣式以匹配您的主題。

我不會(huì)在此處詳細(xì)展開樣式表的構(gòu)建過程，但模板應(yīng)該能給您一個(gè)清晰的思路。一個(gè)好的起點(diǎn)是從您的前端樣式表中復(fù)制元素，但您可能需要更改一些元素類，以便它們應(yīng)用于塊編輯器窗口。

如有疑問，請使用瀏覽器開發(fā)者工具來檢查元素并確定其對應(yīng)的類名。上述鏈接的模板應(yīng)該涵蓋大部分元素。

效果展示

首先，讓我們看看沒有自定義樣式表的WordPress編輯器：

然后，對比一下我的測試網(wǎng)站前端：

兩者差異顯著，對吧？我的測試網(wǎng)站使用了大量的漸變色、自定義字體、按鈕樣式和引用塊，容器也不是簡單的方形。

無論您喜歡與否，您都會(huì)同意這與默認(rèn)的Gutenberg編輯器UI有很大不同。這就是為什么我需要單獨(dú)打開一個(gè)標(biāo)簽頁來預(yù)覽文章的原因。

現(xiàn)在，讓我們加載自定義樣式并查看效果：

瞧！編輯器UI現(xiàn)在看起來與我的網(wǎng)站前端幾乎完全相同。內(nèi)容寬度、字體、顏色和各種元素都與前端一致。我甚至擁有與文章標(biāo)題相同的精美背景！

這意味著——不再需要在另一個(gè)標(biāo)簽頁中預(yù)覽。是不是很酷？

讓W(xué)ordPress編輯器與前端外觀保持一致，可以極大地提高效率。對我來說，在編輯文章時(shí)頻繁切換標(biāo)簽頁查看前端效果會(huì)打斷我的思路，因此我更傾向于避免這種操作。

希望以上步驟也能幫助您實(shí)現(xiàn)同樣的效果！

以上是讓W(xué)ordPress塊編輯器看起來像前端設(shè)計(jì)的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！