許多插件，許多樣式：使用 WordPress 創建一致的用戶體驗

將 WordPress 插件添加到您的網站可以帶來各種精彩的功能。 無論是購物車等大件物品還是相關帖子小部件等較小的增強功能，都有無限可能。

但功能只是包裝的一部分。 許多 WordPress 插件還加載了自己的 CSS。 有時，這些樣式在您網站的前端非常引人注目。

從理論上講，這可能是一件好事。 但是其中一些 CSS 非常固執己見。 它看起來可能與您已經在網站上建立的樣式有很大不同。 因此，您添加的插件越多，您的網站外觀就越不一致。

好消息是有幾種不同的方法可以解決這個問題。 今天，我們將向您介紹一些防止插件的 CSS 破壞您的用戶體驗的技術。

在您的主題中覆蓋插件的 CSS

處理流氓插件樣式的第一種方法相當簡單。 但這確實需要一點耐心。 它涉及查找與您網站的 UI 不匹配的任何特定 CSS 類或 ID。

找到合適的 CSS 需要您對 Web 瀏覽器的開發工具有一定的了解。 通過右鍵單擊頁面上的元素並選擇“檢查”（或 Safari 中的“檢查元素”），它將顯示相關的 HTML 標記和 CSS。

從那裡開始，它需要一些實驗。 例如，有時您右鍵單擊的元素不一定是控製樣式的元素。 這需要在檢查器的 HTML 中導航並單擊父容器或鏈接等內容。

如果你知道你想要改變什麼，它會有所幫助。 例如，CSS background-color或font-size屬性比其他屬性更容易被發現。

找到正確的樣式後，將它們複製並粘貼到主題的style.css文件中。 或者，您也可以在 WordPress 自定義屏幕中使用 Additional CSS 面板並將代碼粘貼到那裡（我們將在下面討論其他選項）。 然後，進行任何所需的更改、上傳或保存。

提示：您只需要將 CSS 屬性包含在您打算更改的類或 ID 中。 其他的都可以省略。

當您想要更改少量樣式時，此技術非常方便。 但是，如果您想進行大規模更改，可能會很麻煩。

出列插件樣式並從頭開始

這種方法需要時間，以及一些中高級 CSS 技能。 您甚至可能希望將它保留在插件樣式真正妨礙您的情況下。

我們正在討論使用 WordPress wp_dequeue_style() 函數，該函數刪除以前排隊的樣式表。 這可以用來有效地關閉任何與插件相關的樣式表。

關閉樣式表後，您可以獲取插件的樣式並根據需要對其進行編輯。 這可能是一項艱鉅的工作，但也是一種確保樣式正是您想要的樣式的方法。

WordPress 開發者資源網站有一個很好的例子來說明如何做到這一點。 這裡成功的關鍵之一是找到樣式表的註冊名稱。 這可以在插件的代碼中找到，或者您也可以在前端頁面的源代碼中找到它，標記為樣式表的 ID。

此外，您還需要與插件關聯的 CSS。 同樣，您需要深入插件的文件夾以查找所需的文件。 需要復制它們的內容，粘貼到您主題的style.css中並進行更改以滿足您的需求。

儘管如此，還是有很多樣式的插件。 WooCommerce 就是一個典型的例子。 它包含大量的 CSS。 這些樣式效果很好，但有時會與您的主題發生衝突。

如果您想將所有或只是特定的 WooCommerce 樣式表出列，他們的文檔可以指導您完成整個過程。

更多提示和故障排除

讓插件的 CSS 符合您的意願可能會很棘手。 事情並不總是按照您第一次的方式進行。 考慮到這一點，這裡有一些其他提示和故障排除思路可供考慮：

檢查插件文檔

在某些情況下，插件的文檔可以為實現樣式自定義提供可靠的建議。 除了上面提到的方法之外，可能還有其他選項——例如後端設置或插件特定的主題。

此外，請務必查看支持論壇。 很可能有人已經問過有關自定義樣式的問題。 在此過程中，可能有一些有價值的信息可以幫助您。

在瀏覽器的開發者工具中進行實驗

我們已經提到了瀏覽器的開發者工具對於找到你想要覆蓋的樣式有多麼重要。 當事情沒有按預期工作時，它們對於故障排除同樣重要。

例如，檢查器工具可以幫助您確定自定義樣式在級聯中的位置。 另一種風格可能是先例，或者您正在查看頁面的緩存版本。

更好的是，您可以直接在檢查器中編輯樣式並立即查看結果。 這將使您在部署更改之前查看更改的外觀。

這些工具可能會成為您消除錯誤的最佳朋友。 認識他們！

以可持續的方式實施變革

如果您要花時間自定義插件的樣式，則需要確保它們以可持續的方式實施。 這意味著將它們放置在不會被擦除或無意更改的位置。

將樣式放置在主題的主樣式表中是可以的——前提是您知道它們在主題更新後不會丟失。 兒童主題是防止這種情況的好方法。

為了更好地組織事情，將所有自定義樣式放入單獨的樣式表中可能是值得的。 這樣，當您需要進行更改時，您將始終能夠找到那些特定的樣式。

此外，請密切關注插件更改日誌。 樣式確實在發展，您今天定制的內容並不能保證永遠有效。

給您的 WordPress 網站一個無縫的外觀

一般來說，WordPress插件很棒。 但是，讓他們的相關樣式與您網站的其他部分相適應可能是一個挑戰。 不過，你可以通過一點點挖掘到達那裡。

借助 Web 瀏覽器的開發工具，您可以找到要更改的 CSS 類和 ID。 從那裡開始，以最適合您需求的方式應用這些更改就是一個問題。

這需要敏銳的眼光，但努力確實可以帶來回報。 當您網站的各個方面看起來和感覺一致時，訪問者就更容易瀏覽。 此外，內容會形成自然流動。 用戶體驗會因為它而變得更好。