在 WordPress後台中處理損壞的 CSS 確實是一件令人頭疼的事情。 這是因為您看到的不是管理儀表面板，而是一個雜亂無章、排版混亂的頁面。
管理區的 CSS 被破壞也會妨礙你在網站上工作，因此這是個很嚴重的問題。 由於可能的原因很多，很多初學者都不知道如何解決這個問題。
在本教程中，我們將説明你修復 WordPress 管理儀錶板中損壞的 CSS。
目錄
什麼原因會導致WordPress管理面板中的 CSS 出錯？
WordPress 管理區中的 CSS 可能會損壞，這有多種原因。
根據我們的經驗，以下是 WordPress 管理面板CSS 損壞的主要原因：
- 外掛程式衝突： 編碼不良的外掛程式擁有自己的 CSS，可能會覆蓋或干擾管理區樣式，從而與 WordPress 的預設樣式發生衝突。
- HTTP/HTTPS 不匹配： 混合內容問題，其中某些檔通過 HTTP 而非 HTTPS 載入，可能導致瀏覽器阻止 CSS 檔。
- 主題干擾：某些主題會在管理區載入 CSS，這可能會導致衝突。 如果您使用的是自定義管理主題，那麼它也會導致樣式問題。
- 緩存問題：瀏覽器緩存中可能保存有過時版本的 CSS 檔。 緩存外掛程式可能會提供舊的 CSS 檔，從而導致樣式問題。
- CDN 問題：配置錯誤的內容交付網路 （CDN） 可能會提供過時版本的 CSS 檔，從而導致樣式丟失或損壞。
- 檔許可權不正確：伺服器可能無法讀取許可權不正確的 CSS 檔。
- 檔損壞： CSS 檔可能在更新或上傳過程中損壞或丟失。
- 瀏覽器擴展：擴展（尤其是內容攔截器）可能會干擾 CSS 的顯示方式。
了解這些原因將有助於您找出 WordPress 管理區出現 CSS 損壞的原因，從而進行實際修復。
步驟 1：檢查外掛程式衝突
根據我們的經驗，編碼不良的 WordPress 外掛程式往往是導致管理區 CSS 出錯的罪魁禍首。 不過，有時編碼良好的外掛程式也可能會遇到 WordPress 網站或伺服器設置方面的問題。
以下是識別和解決外掛程式衝突的方法。
停用所有外掛程式。
首先，您需要進入 WordPress 管理儀錶板並導航到 Plugins “ Installed Plugins 頁面。
現在，選擇所有外掛程式並從 「批量操作 」下拉功能表中選擇 「停用」 然後點擊 「應用」。
之後，只需刷新管理區或重新載入頁面，看看 CSS 問題是否已解決。 如果 CSS 已修復，那麼問題就出在其中一個外掛程式上。
逐個重新啟動外掛程式。
要確定是哪個外掛程式導致了問題，您需要逐個重新啟動。 只需點擊外掛程式下方的 「啟動 」連結即可。
啟動每個外掛程式后，您必須刷新管理區，檢查 CSS 是否再次出現故障。
這將説明你找出導致問題的特定外掛程式。
找到替代方案或更新外掛程式。
確定衝突外掛程式後，您可以檢查該外掛程式是否有更新。 如果更新無法解決問題，那麼請考慮尋找替代外掛程式或聯繫外掛程式開發人員尋求支援。
步驟 2：在 HTTPS HTTP混合
我們的使用者遇到的 CSS 損壞的另一個常見原因是安全 URL 配置不當，從而導致混合內容問題。
當您的網站被設置為使用HTTPS安全協定，但 CSS 是通過 HTTP 或不安全協定提供時，就會出現這種情況。
出現這種情況時，Google Chrome 瀏覽器等常用瀏覽器會自動阻止不安全資源，導致 WordPress 管理區中的 CSS 被破壞。
這個問題可以通過使用瀏覽器中的檢查工具來確認。 只需切換到主控台選項卡，就會看到混合內容錯誤。
要解決這個問題，首先要確保 WordPress 設置中有正確的 URL。
轉到 設置 》 常規頁面，確保 WordPress 位址和網站位址的 URL 中都有 HTTPS。
如果您已經在兩個 URL 中都使用了 HTTPS，那麼您可以手動強制 WordPress 使用 HTTPS 協定。
只需編輯 wp-config.php 檔並新增以下代碼即可：
define('FORCE_SSL_ADMIN', true);
if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false) {
$_SERVER['HTTPS'] = 'on';
}或者，也可以使用 Really Simple SSL 等外掛程式，對所有 URL 執行 HTTPS。
步驟 3：檢查主題干擾
我們發現，不必要的主題干擾也是導致 WordPress 管理區 CSS 損壞的常見原因。
以下是識別和解決主題相關問題的方法。
切換到預設主題。
要查看是否是您的 WordPress 主題導致了 CSS 的損壞，您首先需要切換到預設的 WordPress 主題。
進入 WordPress 面板並導航到 Appearance 》Themes 頁面。
在這裡，您需要啟動一個預設的 WordPress 主題，例如 Twenty Twenty-Four。
注意：如果您沒有安裝任何預設主題，那麼您可以點擊頂部的 「添加新主題 」按鈕安裝一個。 默認 WordPress 主題以年份命名。
切換到默認主題后，刷新管理區，看看 CSS 問題是否已解決。
如果 CSS 現在可以正確載入，那麼問題就出在你之前的主題上。
修復主題衝突
要解決這個問題，您首先需要檢查您的主題是否有可用更新。
轉到 Appearance 主題，選擇您的主題，然後按兩下「立即更新」。
如果這還不能解決問題，那麼您需要檢查對主題所做的任何更改。 檢查所有可能導致 CSS 損壞問題的主題自定義。
尤其要檢查 檔中的任何附加 CSS 或自定義代碼是否有誤。functions.php
在萬不得已的情況下，請聯繫主題開發人員尋求支援，或考慮更換其他主題。
步驟 4：修復緩存問題
通常情況下，WordPress 緩存外掛程式不會緩存 WordPress 管理區。
但是，我們發現不正確的緩存設置會導致與瀏覽器緩存衝突，從而可能造成 CSS 損壞問題。
要解決這個問題，您首先需要清除瀏覽器緩存。
之後，您可以重新載入 WordPress 管理區，看看問題是否得到解決。 如果沒有解決，那麼您需要清除 WordPress 緩存。
這是 WordPress 快取外掛程式生成的緩存。 我們有一個關於如何在不同的 WordPress 緩存外掛程式中清除緩存的詳細教程。
步驟 5：修復 CDN 問題
如果您使用的是內容分發網路（CDN）服務，那麼配置錯誤有時會導致 WordPress 管理區出現 CSS 損壞問題。
以下是識別和解決這些問題的方法。
首先，您需要使用瀏覽器中的檢查工具，然後切換到 「主控台」選項卡。 在這裡，如果您的 CSS 檔被阻止或未找到，您將看到錯誤資訊。
接下來，您需要切換到 CDN 服務網站並登錄到您的帳戶儀錶板。
從這裡，導航到 Caching>Configuration 部分，然後按兩下 Purge Cache 選項下的 「Purge Everything（清除所有內容）」按鈕。
注意：我們向您展示的是 Cloudflare CDN 的屏幕截圖。 不過，您可以在所有CDN供應商中輕鬆找到清除緩存的選項。
之後，您需要返回網站並重新載入管理區，看看問題是否已經解決。
如果沒有修復，請繼續下一步。
步驟 6：修復不正確的文件許可權
我們還注意到，不正確的文件許可權會阻止伺服器讀取 CSS 檔，從而導致 WordPress 管理區中的 CSS 出錯。
以下是檢查和修復檔許可權的方法。
首先，您需要使用 FTP 連接到您的 WordPress 網站。
連接后，您必須導航到 WordPress 根目錄。 該目錄包含、和資料夾。wp-adminwp-includeswp-content
現在，右鍵按下資料夾並選擇 「檔案許可權 」或 「屬性」。wp-admin
首先，您需要確保所有目錄都設置為755。
如果沒有，則更改許可權，並將其遞歸應用到所有子目錄。
現在您可以重複該過程，將許可權設置為 644 並將其遞歸應用到所有檔。
步驟 7：修復損壞的檔
損壞的檔會導致 WordPress 管理區的 CSS 崩潰。
即使您沒有採取任何行動，WordPress 檔也可能損壞。 這可能是由於 WordPress 更新不完整、意外刪除檔或 WordPress 託管服務提供者配置錯誤造成的。
以下是修復或替換損壞檔的方法。
首先，您需要從 WordPress.org 下載一個全新的 WordPress 副本。
然後，將下載的 ZIP 檔解壓縮到電腦中。
接下來，您需要使用 FTP 連接到您的 WordPress ，然後從電腦上傳新的 WordPress 檔。
在出現提示時選擇 「覆蓋」 以確保將新檔上傳到網站。
完成後，您可以訪問 WordPress 管理區，查看是否已經解決了 CSS 損壞的問題。
如果沒有解決，那麼就該進入下一步了。
步驟 8：檢查瀏覽器擴展
瀏覽器擴展，尤其是與內容和廣告攔截相關的擴展，會干擾 CSS 在 WordPress 管理區的顯示方式。
以下是識別和解決瀏覽器擴展引起的問題的方法。
首先，您需要打開瀏覽器並導航到擴展/載入項功能表。
暫時禁用所有擴展程式，尤其是廣告攔截器和安全載入項。
您可以簡單地禁用擴充程式或完全刪除它們。
完成後，您就可以進入 WordPress 管理區查看 CSS 問題是否已解決。
如果問題解決了，那麼你需要找出是哪個擴展導致了這個問題。
逐個重新啟動每個擴展，並在啟用每個擴展后刷新管理區，以找出導致問題的擴展。
一旦確定了有問題的擴展，就可以檢查擴展設置，避免阻塞 WordPress 管理 CSS。
如果還不行，那就嘗試尋找其他擴展。
故障排除技巧
希望上述步驟能解決 WordPress 管理區中的 CSS 問題。 不過，如果上述步驟都不起作用，那麼你可以試試這些額外的提示：
更新永久連結：
刷新您的 WordPress 永久連結以更新 ，而不會冒任何錯誤的風險。 WordPress 重寫規則有時會阻止 CSS 檔正確載入。 此操作有助於清除和重置 URL 重寫規則。.htaccess 文件
掃描惡意軟體：
有時，駭客攻擊或惡意軟體也會導致您的管理區出現故障。 掃描您的 WordPress 網站，查找潛在的惡意軟體，並嘗試清理被駭客攻擊的網站。
