疑難排解

結論

ZenBlocks 的大多數問題，都可以透過 Clear CSS Cache、重新啟用外掛 與 清除瀏覽器快取 解決。以下依照不同問題提供具體的確認步驟。

區塊未顯示在插入面板中

確認步驟

  1. 確認外掛是否已啟用
  • 在 WordPress 後台開啟 外掛
  • 確認 ZenBlocks 是否出現在清單中且狀態為已啟用
  • 若為停用狀態，請點擊 啟用
  1. 確認 WordPress 版本
  • 在 控制台 > 更新 中確認 WordPress 版本
  • ZenBlocks 需要 WordPress 6.0 以上
  1. 確認 Classic Editor 是否已啟用
  • 若 Classic Editor 外掛已啟用，區塊編輯器可能會被停用
  • 請在 設定 > Writing 中確認預設編輯器為區塊編輯器
  1. 確認是否與其他外掛衝突
  • 暫時停用所有其他外掛，只保留 ZenBlocks 啟用後測試
  • 若區塊重新出現，再逐一重新啟用其他外掛以找出衝突來源

設定面板無法開啟或未顯示

確認步驟

  1. 確認區塊已被選取
  • 點擊區塊使其進入選取狀態
  • 確認區塊周圍有藍色框線
  1. 確認側邊欄是否可見
  • 點擊編輯器右上角的 Settings 圖示（齒輪圖示）
  • 確認側邊欄上方的 Block 分頁已被選取
  1. 確認瀏覽器開發者工具中是否有錯誤
  • 開啟瀏覽器開發者工具（F12）
  • 檢查 Console 分頁是否有 JavaScript 錯誤
  • 若有錯誤，請附上截圖並回報到支援論壇

前端未套用樣式

確認步驟

  1. 清除 CSS 快取
  • 在 WordPress 後台開啟 Settings > ZenBlocks
  • 點擊 Clear CSS Cache
  • 重新儲存有問題的頁面
  1. 清除瀏覽器快取
  • 清除瀏覽器快取
  • 或使用 Ctrl+Shift+R / Cmd+Shift+R 強制重新載入
  1. 重新儲存頁面
  • 在編輯器中開啟目標頁面
  • 點擊 更新
  • CSS 檔案會重新產生
  1. 確認伺服器端快取
  • 若使用 WP Super Cache、W3 Total Cache、LiteSpeed Cache 等快取外掛，也請一併清除其快取
  • 若使用 Cloudflare 等 CDN，也請同步 purge CDN 快取

說明： ZenBlocks 的 CSS 快取會儲存在 /wp-content/uploads/zenblocks/。請確認此目錄具備寫入權限。

響應式設定未生效

確認步驟

  1. 確認是否已設定裝置別數值
  • 在側邊欄各設定面板中，點擊裝置圖示（PC / MD / TB / SP）確認
  • 若特定裝置的值為空，將會使用 PC 的值作為 fallback
  1. 確認 breakpoint 設定
  • 在 Settings > ZenBlocks 中檢查 breakpoint 數值
  • 確認自訂值是否符合預期
  1. 清除 CSS 快取
  • 響應式 CSS 會被快取，因此調整設定後需要清除快取
  • 點擊 Settings > ZenBlocks > Clear CSS Cache
  1. 在瀏覽器響應式模式中確認
  • 開啟瀏覽器開發者工具（F12）
  • 在裝置工具列中調整寬度以符合 breakpoint
  • 檢查各 breakpoint 下的顯示狀態

動畫未運作

確認步驟

  1. 確認 Pro 功能是否已啟用（動畫屬於 Pro 功能）
  • 在 Settings > ZenBlocks 中確認授權狀態為 Active
  • 確認 ZenBlocks Pro 外掛已啟用
  1. 確認動畫設定
  • 開啟側邊欄中的 Animation Settings 面板
  • 確認動畫類型不是 None
  • 確認 Duration 不為 0
  1. 在前端確認
  • 動畫雖然可以在編輯器中預覽，但最終仍應在前端確認
  • 重新載入頁面以確認動畫是否播放
  1. 確認是否與 transition 衝突
  • 若動畫與 transition 同時啟用，可能會出現非預期行為
  • 檢查 transition 面板中是否出現警告提示

Hover 效果未生效

確認步驟

  1. 確認 Hover 分頁中有設定值
  • 在側邊欄設定面板中選擇 Hover 分頁
  • 確認要變更的屬性都已填入值
  1. 確認 transition 設定
  • 確認 transition 面板中的 Duration 不是 0ms
  • 建議值：200ms 到 400ms
  1. 清除 CSS 快取後再次確認

更多資訊請參考 buttonBasic FAQ: hover 樣式未反映。

顯示區塊驗證錯誤

確認步驟

  1. 將外掛更新到最新版本
  • 在 WordPress 後台的 外掛 > 更新 中將 ZenBlocks 更新到最新版本
  1. 修復區塊
  • 在錯誤訊息中點擊 Attempt to recover block
  • 修復後確認設定是否正確，並重新儲存頁面
  1. 若仍未解決
  • 刪除該區塊並重新建立
  • 如果曾儲存為自訂設計，可將 preset 套用到新區塊以恢復原設定

註解： 若外掛更新導致 HTML 輸出格式變更，可能會出現驗證錯誤。使用區塊修復後，內容會自動更新為新格式。

若問題仍然持續

若以上步驟仍無法解決問題，請到 WordPress.org 支援論壇 發文。

發文時請附上以下資訊：

  • WordPress 版本
  • PHP 版本
  • 使用中的佈景主題名稱
  • ZenBlocks / ZenBlocks Pro 版本
  • 問題重現步驟
  • 螢幕截圖或錄影
  • 瀏覽器開發者工具 Console 中顯示的錯誤訊息