讓WordPress塊編輯器看起來像前端設計

讓WordPress塊編輯器外觀與前端設計一致！

作為WordPress用戶，您是否也經常需要同時打開兩個標籤頁進行文章編輯？一個標籤頁顯示新的Gutenberg塊編輯器，另一個則預覽文章前端效果，以確保最終呈現不出錯？

WordPress主題樣式僅影響網站前端，後端編輯器通常與前端效果大相徑庭。但這並非不可改變！通過自定義樣式表，您可以讓WordPress編輯器幾乎完美地鏡像前端外觀。

這只需兩個簡單的步驟：

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

讓我們開始操作吧！

第一步：修改functions.php文件

如果您使用的是非自行開發的WordPress主題，強烈建議您先創建一個子主題，然後再對主要主題進行任何修改。

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

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

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

第二步：編寫CSS樣式

現在，我們進入CSS編寫環節。

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

創建一個名為editor-style.css的新文件，並將其放置在主題的根目錄（或子主題目錄）。

塊編輯器的CSS樣式與標準CSS略有不同。例如，以下代碼無法在文章中正確應用文本大小：

 h2 {
  font-size: 1.75em;
}

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

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

我已經創建了一個基礎CSS文件，它遵循此模式來設置常用塊編輯器元素的樣式。您可以從GitHub獲取該文件，並替換樣式以匹配您的主題。

我不會在此處詳細展開樣式表的構建過程，但模板應該能給您一個清晰的思路。一個好的起點是從您的前端樣式表中復制元素，但您可能需要更改一些元素類，以便它們應用於塊編輯器窗口。

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

效果展示

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

然後，對比一下我的測試網站前端：

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

無論您喜歡與否，您都會同意這與默認的Gutenberg編輯器UI有很大不同。這就是為什麼我需要單獨打開一個標籤頁來預覽文章的原因。

現在，讓我們加載自定義樣式並查看效果：

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

這意味著——不再需要在另一個標籤頁中預覽。是不是很酷？

讓WordPress編輯器與前端外觀保持一致，可以極大地提高效率。對我來說，在編輯文章時頻繁切換標籤頁查看前端效果會打斷我的思路，因此我更傾向於避免這種操作。

希望以上步驟也能幫助您實現同樣的效果！

以上是讓WordPress塊編輯器看起來像前端設計的詳細內容。更多資訊請關注PHP中文網其他相關文章！