13 個常見的 WordPress 塊編輯器問題及其解決方法

2019 年,WordPress 用一款名為 Gutenberg 的全新內容編輯器取代了舊的經典編輯器。該編輯器使用塊在 WordPress 中創建內容。

但是,有時,您在使用它時可能會遇到令人討厭的問題。即使在 WPBeginner,我們在使用塊編輯器時也遇到了多個錯誤。

在本文中,我們將分享如何修復最常見的 WordPress 塊編輯器問題,以便您改善工作流程。

common-block-editor-issues-and-how-to-fix-it

什麼是 WordPress 塊編輯器?

WordPress 塊編輯器(或 Gutenberg)是 WordPress 5.0 版本中引入的內容編輯器。從那時起,WordPress 改進了編輯器並添加了新特性和功能。

與經典編輯器相比,它提供了更多的自定義功能。您可以使用不同的塊來向內容中添加不同的元素,而無需編輯代碼來更改外觀和樣式。

它試圖通過模仿WordPress 主題的相同字體和顏色來實時顯示您的博客和頁面的外觀。

例如,您可以使用圖片塊將圖片添加到您的博客文章中。此外,您還可以使用該塊獲得圖像樣式、大小、對齊方式等選項。

alttitleaddimageblock

除此之外,許多WordPress 插件都會將其區塊添加到內容編輯器中。這樣只需單擊幾下即可輕鬆嵌入表單、社交媒體源和內容表等內容。

儘管如此,塊編輯器並不完美。與任何其他 WordPress 插件一樣,您可能會遇到不同的錯誤或缺陷。

1.修復WordPress塊編輯器不工作錯誤

用戶面臨的最常見問題之一是「WordPress 塊編輯器不工作」。

導致此錯誤發生的原因有很多。例如,可能是由於主題太舊、過時、插件有缺陷或其他技術錯誤。

如果您的網站配置錯誤,WordPress 塊編輯器也可能無法工作,例如在創建用戶配置文件時禁用可視化編輯器。

您可以通過從 WordPress 儀錶板轉到「用戶»個人資料」來檢查這一點。從這裡,只需確保未選擇「寫作時禁用可視化編輯器」選項。

disable-the-visual-editor-when-writing

如果問題仍然存在,那麼您可以嘗試停用網站上的所有插件。這應該有助於排除插件可能引起的任何衝突並阻止塊編輯器工作。

解決此問題的另一種方法是更新您的 WordPress 主題。過時的主題可能會導致塊編輯器無法正常工作的錯誤。您可以查看我們的指南,了解如何在不丟失數據和自定義的情況下更新您的 WordPress 主題。

2. WordPress 塊編輯器不斷崩潰

一些用戶面臨的另一個常見問題是WordPress 塊編輯器意外崩潰。

當它崩潰時,您將看到「編輯器遇到意外錯誤」錯誤消息。然後 WordPress 將顯示 3 個選項,包括嘗試恢復、複製帖子文本和複製錯誤。

block-editor-crashed

此問題可能有多種原因。例如,插件可能會破壞塊編輯器並顯示此錯誤,或者您的 WordPress 版本不是最新的。

您可以通過停用所有插件並逐個重新激活來解決這個問題。另一個解決方法是將 WordPress 更改為默認主題,例如 Twenty Twenty-F​​our,然後查看問題是否仍然存在。

如果檢查 WordPress 插件和主題後仍然遇到此問題,請嘗試更新 WordPress 版本並清除 WordPress 緩存。

3. 刪除內容編輯器中的無效 JSON 錯誤

當您編輯博客文章或頁面時,單擊塊編輯器中的「更新」按鈕可能會導致出現錯誤消息,提示「響應不是有效的 JSON 響應」。

view-json-error-in-block-editor-1

當您在WordPress 博客上編輯帖子時,WordPress 會在後台與網站伺服器持續通信。當 WordPress 無法從伺服器收到響應或響應不是 JSON 格式時,會導致此錯誤。

以下是可能收到無效 JSON 錯誤的一些原因以及如何修復它們:

  • 在設置中檢查 WordPress URL – 您需要確保網站設置中的 WordPress 地址和網站地址正確無誤。只需轉到設置»常規 頁面並檢查 URL 是否相同。如果網站地址不同,可能會觸發 JSON 錯誤。

ensure-wordpress-and-site-address-are-same

  • 修復 WordPress 中的永久鏈接設置– 在 WordPress 中,您可以為頁面和帖子設置 SEO 友好的 URL。但是,錯誤的設置會使塊編輯器難以獲得有效的 JSON 響應。只需確保選擇正確的永久鏈接格式即可。
  • 檢查 WordPress .htaccess 文件設置– .htaccess 文件在 WordPress 中用作配置文件,用於管理 SEO 友好 URL(永久鏈接)。通常,WordPress 會自動重新生成並更新它。但是,不正確的設置或過期的 .htaccess 文件可能會導致 JSON 錯誤。
  • 查看 REST API 調試日誌– REST API是 WordPress 用於與站點伺服器通信的一組技術。JSON 錯誤也可能意味著 REST API 遇到了錯誤。您可以通過查看 WordPress 中的站點健康頁面上的 REST API 日誌來檢查這一點。
  • 嘗試停用所有插件– 不同 WordPress 插件之間的衝突也會導致無效 JSON 錯誤。嘗試停用您網站上的所有插件,看看錯誤是否再次出現。
  • 切換到經典編輯器– 如果您仍然無法解決 JSON 錯誤,則可以切換回 WordPress 中的經典編輯器。舊內容編輯器不依賴 REST API 從網站伺服器獲取 JSON 響應。

要詳細了解每個技巧,請參閱我們的指南,了解如何修復 WordPress 中的無效 JSON 錯誤。

4. 解決更新失敗/發布失敗錯誤

在 WordPress 塊編輯器中更新或發布博客文章或頁面時,您可能會看到的另一個錯誤是:「更新失敗。您可能處於離線狀態。」

當 WordPress REST API 無法與WordPress 資料庫通信時會出現此問題。

updating-failed-error

如果塊編輯器無法發送和接收來自WordPress 託管資料庫的請求,則您網站的不同部分將無法運行。這包括塊編輯器。

如果您未連接到互聯網或失去連接,REST API 可能會停止工作。要解決此問題,請確保您的互聯網連接正常,然後嘗試更新或發布您的頁面。

除此之外,您還可以從 WordPress 儀錶板轉到「工具」»「站點健康」並查看 REST API 日誌。如果 REST API 存在問題,那麼您將在「建議改進」部分下看到它。

 

錯誤日誌將顯示 REST API 發生的情況,並可能為您提供有關問題原因的線索。

有關解決此問題的信息,您可以查看我們的指南,了解如何修復 WordPress 更新失敗錯誤。

5. 添加或刪除 WordPress 塊之間的空白

使用WordPress 塊編輯器創建自定義頁面和帖子時,您可能會注意到塊之間的空間太多或太少。

通常,WordPress 主題會控制間距。但是,塊編輯器中有一些選項可讓您控制頁面布局並提供更好的用戶體驗。

例如,您可以添加 Spacer 塊來添加空白。只需單擊「+」按鈕,然後在內容中的任何位置添加 Spacer 塊即可。

 

這樣,您可以在塊之間添加額外的空間。

WordPress 還允許您調整間隔塊的大小。您可以通過上下拖動塊來放大或縮小它。

 

如果您想刪除塊之間的多餘空白,那麼您需要在 WordPress 主題中輸入自定義 CSS或使用CSS Hero等 CSS 插件。

該插件可讓您編輯網站的 CSS,而無需編輯代碼。它提供不同的間距選項,您可以使用這些選項來調整塊之間的空白空間。

 

您還可以使用SeedProd在 WordPress 中創建自定義頁面並完全控制設計。

要了解更多信息,請參閱有關如何在 WordPress 塊之間添加或刪除空白的指南。

6. 複製粘貼內容,避免格式問題

您是否注意到,將桌面應用程序或網頁中的內容複製並粘貼到塊編輯器中也會導致不必要的格式?

您會發現粘貼內容的字體和顏色與您的 WordPress 主題不匹配。如果您使用 Microsoft Word 或Google Docs編寫內容,然後將其輸入到塊編輯器中,這種情況很常見。

保留原始格式的一些簡單技巧包括使用 Word 和 Google Docs 標題樣式。這樣,當您將內容粘貼到塊編輯器中時,WordPress 會自動選擇標題級別。

除此之外,粘貼內容後,您應該檢查頁面或帖子的HTML 代碼。在 WordPress 內容編輯器中,您可以選擇一個塊,然後單擊 3 個垂直點選項。

從下拉菜單中,只需選擇「以 HTML 格式編輯」選項。

 

這樣,您應該能夠找到任何格式錯誤,例如不正確的粗體和斜體、不需要的文本等等。

有關更多詳細信息,您可以查看我們的指南,了解如何在 WordPress 中複製和粘貼而不會出現格式問題。

7. 修復 WordPress 中的圖片上傳問題

接下來,您可能會在 WordPress 塊編輯器中上傳圖片時看到錯誤。這是WordPress 中最常見的圖片問題之一。

此錯誤的主要原因是文件許可權不正確。您網站的所有文件都存儲在您的網路託管服務上,需要特定的文件和目錄許可權才能運行。

如果這些許可權不正確,可能會阻止 WordPress 讀取文件並將其上傳到託管伺服器。因此,您會注意到上傳時圖像會從媒體庫中消失,或者您可能會看到一條錯誤信息:

『Unable to create directory wp-content/uploads/2019/04. Is its parent directory writable by the server?』

要解決此問題,您需要編輯文件許可權。您可以使用FTP 客戶端並訪問 /wp-content/ 文件夾。從這裡,您可以右鍵單擊該文件夾並更改文件許可權。

 

按照我們關於如何修復 WordPress 中圖像上傳問題的分步指南,以獲取有關此修復的更多信息。

8.修復 HTTP 圖像上傳錯誤

在 WordPress 塊編輯器上傳圖像時可能會遇到的另一個問題是HTTP錯誤。

當您在媒體庫中上傳圖像時,WordPress 將顯示通用的「HTTP」錯誤,並且您將無法看到圖片的預覽。

 

有多種因素可能導致此問題。令人沮喪的是,錯誤消息並未提供實際原因的線索。

要解決此問題,您可以嘗試多種方法。首先,您可以等待幾分鐘,然後嘗試重新上傳圖片。有時,您的網站伺服器可能會遇到流量異常和伺服器資源不足等問題。

除此之外,您還可以增加WordPress 的內存限制,防止內存不足導致 HTTP 錯誤。您可以嘗試的其他方法包括更改 WordPress 使用的圖像編輯器庫和編輯 .htaccess 文件。

此外,您的登錄信息可能已過期,有時只需轉到登錄屏幕並再次輸入您的用戶名和密碼,此錯誤就會消失。

您可以在我們的指南中詳細閱讀有關如何修復 WordPress 中的 HTTP 圖像上傳錯誤的每個提示。

9. 刪除 WordPress 中錯過的發布時間表錯誤

您是否知道 WordPress 提供了安排博客文章的內置選項?

在WordPress 內容編輯器中,您可以更改發布博客文章的日期和時間。但是,有時,您預定的內容可能不會在設定的時間發布。

draftpublishschedule

此錯誤的主要原因是由於 WordPress 託管環境或插件衝突。WordPress 使用一種名為「cron」的技術在稍後自動發布您的帖子。

如果插件或網站託管伺服器影響了 cron 作業,那麼就會導致 WordPress 中錯過計劃發布錯誤。

您可以通過檢查 WordPress 網站的時區來解決此問題。您的網站時區可能與您想要用於安排博客的時區不匹配。

只需從 WordPress 管理面板前往設置»常規,然後向下滾動到時區部分。

 

您還可以嘗試通過清除 WordPress 緩存和增加 WordPress 內存限制來解決此問題。

請參閱我們的指南,了解如何修復 WordPress 中錯過的預定帖子錯誤。

10. 修復 WordPress 塊編輯器中的對齊問題

您可能會遇到的另一個常見的 WordPress 塊編輯器是您的內容和圖像可能未正確對齊。

例如,假設您在博客文章中添加了一個項目符號列表並將其居中對齊。但是,在編輯文章時,列表在塊編輯器中顯示為左對齊。同樣,居中對齊的圖像塊可能會顯示為左對齊或右對齊。

如果您在 WordPress 網站上安裝並激活了 Gutenberg 插件,則可能會導致塊對齊問題。我們建議您停用 Gutenberg 插件,看看它是否能解決問題。

另一個解決方案是為您想要居中對齊的文本添加以下自定義 CSS 代碼:

123 .has-text-align-center {text-align: center;}

由WPCode ❤️ 託管在 WordPress 中一鍵使用

您還可以查看我們的指南,了解如何在 WordPress 塊編輯器中添加和對齊圖像。

11.解決Facebook不正確的縮略圖問題

您是否注意到,當您在 Facebook 上分享文章時,帖子縮略圖不正確?

該問題可能是由插件衝突、內容分發網路 (CDN)問題或 Facebook 缺少 Open Graph 元標記引起的。

現在,這不是您在 WordPress 塊編輯器中看到的問題。但是,您可以使用內容編輯器為 Facebook 指定 Open Graph 圖像。

您可以使用All in One SEO (AIOSEO)插件快速修復此問題。它是WordPress 的最佳 SEO 插件,可幫助您針對搜索引擎和社交媒體優化網站。

激活後,您將在 WordPress 內容編輯器中看到 AIOSEO 設置元框。只需轉到「社交」選項卡即可。

head-to-the-social-tab

接下來,您可以向下滾動到「圖像源」部分。

從下拉菜單中,您可以選擇在分享文章時在 Facebook 和其他社交媒體網站上顯示哪些圖片。

select-image-source

您可以按照我們的指南了解如何修復 WordPress 中的 Facebook 錯誤縮略圖問題,並了解解決此問題的其他方法。

12. 修復 Facebook 和 Instagram oEmbed 問題

您將面臨的另一個與社交媒體相關的塊編輯器問題是將 Facebook 和 Instagram 內容添加到 WordPress。

過去,您可以輕鬆地在 WordPress 中嵌入 Instagram 或 Facebook 的帖子。但是,Facebook 現在已經改變了 oEmbed 的工作方式。

您無法再在 WordPress 中嵌入視頻、圖片、更新和其他內容。它將改為顯示內容的純 URL。

facebook-oembed-error

您可以使用Smash Balloon等社交媒體 WordPress 插件輕鬆解決此問題。它可以幫助您使用 oEmbed 輕鬆嵌入來自 Facebook 和 Instagram 的內容,並且您還可以在您的網站上顯示社交媒體提要。

有關更多詳細信息,請參閱我們的指南,了解如何修復 WordPress 中的 Facebook 和 Instagram oEmbed 問題。

13. 無法在塊編輯器中看到嵌入內容預覽

這是在 WordPress 5.7 版本中出現的問題。每當您嵌入來自 YouTube 和 Vimeo 的視頻或添加來自 Spotify 和 SoundCloud 的音頻時,預覽都不會出現在塊編輯器中。

相反,您只會看到塊中寫著「預覽不可用」或「此塊遇到錯誤,無法預覽」。此問題的主要原因是默認的延遲載入功能。

在WordPress 5.5中,iFrames 默認是延遲載入的,這意味著嵌入的內容(如圖片)只有在訪問者向下滾動到內容位置時才會載入。

解決此問題的一個簡單方法是更新您的 WordPress 版本。此錯誤現已解決。如果您使用的是 5.7 或更低版本,我們強烈建議您將 WordPress 更新到最新版本。

相關文章