如何在 WordPress 中編輯 CSS（編輯、添加和自定義網站的外觀）

想嘗試編輯 WordPress CSS，但不知道從哪裡開始？ 使用 CSS 樣式，您可以全局或在某些頁面上編輯網站的外觀。 添加顏色，分隔某些元素，設計佈局，並從根本上改變 WordPress 主題中任何內容的外觀。

如果您想更熟悉 WordPress 的開發環境，或者只是想更好地控製網站的外觀，您需要知道如何在 WordPress 中添加 CSS（以及如何更改已經存在的內容）。

通過編輯您的主題並包含您自己的其他 CSS，您將能夠優化您網站上的每個視覺元素。 今天，我們將仔細研究它。

準備開始？ 我們開始做吧！

喜歡看視頻版？

什麼是 CSS 編輯？

CSS 代表級聯樣式表，它是除 HTML 之外最流行的網絡語言。 兩者相輔相成，因為 CSS 用於設置 HTML 元素的樣式。 HTML 為網站的外觀奠定了基礎，而 CSS 用於進一步設置樣式。

CSS 使您能夠使網站具有響應性、添加顏色、更改字體、修改佈局以及總體上微調網站的視覺呈現。 與 HTML 和 JavaScript 一樣，CSS 是一種前端客戶端語言，這意味著它在用戶端執行，而不是在後端服務器上執行。

在深入研究 WordPress 開發時，HTML、CSS、JavaScript 和 PHP 是您需要了解的語言。 這是核心 CMS 的內置內容，以及它的許多主題和插件。

但是，即使您不是網頁設計師或開發人員，也最好選擇一點 CSS，因為您可以使用它來移動網站上的元素或設置樣式，或者對主題進行小的美學更改以更適合您。

WordPress 和 CSS

在 WordPress 中，CSS 有點不同。 它由主題控制，主題由模板文件、模板標籤，當然還有 CSS 樣式表組成。 雖然由您的主題生成，但所有這些都可以由您編輯。

模板文件將您網站的各個部分拆分為多個部分（例如 header.php 或 archive.php），並且模板標籤用於調用它們以及數據庫中的其他內容。 這些文件實際上主要由 PHP 和 HTML 組成，但如果需要，您可以添加 CSS。

您真正需要的是樣式表或 style.css。 要更改您網站的外觀，您需要了解如何在此文件中添加和編輯代碼。

如何使用 CSS 自定義您的 WordPress 主題

如果您想自定義主題並使用 CSS 更改網站的外觀，您需要添加自己的代碼或編輯已有的代碼。 有很多方法可以添加 CSS，而無需接觸任何主題文件，但要更改現有的主題代碼，您必須訪問您網站的樣式表。

當您進行這些更改時，您應該知道一件事：當您的主題更新時，您對style.css 、 functions.php或其他主題模板文件所做的任何編輯都將被刪除。 一般來說，您不應該在不使用子主題的情況下在編輯器中直接更改您的網站。

樣式表就像您網站的“指令列表”，準確設置其樣式以及 CSS 代碼的處理方式。 這是您進行大部分編輯的地方，但我們還將向您展示如何訪問其他主題模板文件，例如 header.php 和 footer.php。

有兩種方法可以訪問 WordPress 網站的樣式表：通過 WordPress 儀表板或通過 FTP 客戶端。 我們將介紹它們。

自己做這個不方便嗎？ 考慮聘請 WordPress 開發人員為您處理該步驟。

在儀表板中編輯 WordPress CSS

訪問 CSS 樣式表的最簡單、最方便的方法就是在 WordPress 儀表板中。 無需安裝 FTP 程序或代碼編輯器。 您可以使用內置的語法突出顯示和函數文檔直接編輯任何文件。

在對核心文件進行任何重大編輯之前，您應該始終備份您的 WordPress 網站。 如果您是 CSS 新手，很容易意外犯下可能破壞網站外觀的錯誤，並且可能很難弄清楚如何恢復您的更改。

完成備份和子主題後，登錄到您的後端。 您可以通過轉到菜單並單擊外觀 > 主題編輯器來找到編輯器。

您應該會看到一個彈出窗口，警告您不要直接編輯這些文件。 不用擔心，只需單擊“我了解”即可。 在進行任何重大更改之前，使用子主題並備份您的網站只是一個警告。 按照這些步驟操作，就可以安全地進行編輯了。

現在你進來了！ 默認情況下，您應該在樣式表上，但如果沒有，請查看右側的菜單以查看您的主題文件。

除了 style.css，您還可以訪問 functions.php、header.php 和 single.php 等模板文件。 所有這些都會影響您網站上某些頁面的行為方式。

但是在深入研究這些特定文件之前，您應該熟悉 PHP。

請記住：您在此處所做的大多數 CSS 更改都是全局性的。 例如，如果您將 H1 標題更改為某種字體，它將對您網站上的每個頁面生效。 您需要使用特殊語法來自定義特定頁面的樣式。

直接編輯主題文件

如果您無法訪問主題編輯器或更喜歡通過 FTP 進行工作怎麼辦？ 使用後端編輯器更容易，但某些主題或插件可能會禁用它。 如果是這種情況，您需要通過 FTP 連接到您的網站。

FTP 或文件傳輸協議允許您遠程訪問和修改網站的文件。 您需要做的第一件事是下載 FileZilla 或任何其他 FTP 客戶端。

接下來，您應該聯繫您的主機並詢問您的 FTP 憑據（主機、端口和用戶名/密碼，如果適用）。 如果您的主機有儀表板，您可以通過登錄找到它們。

Kinsta 用戶的憑據位於 MyKinsta 儀表板中Sites > SFTP/SSH下。

擁有它們後，啟動 FTP 客戶端並輸入該信息。 如果它不起作用，請嘗試將“sftp://”放在主機部分的 URL 之前。

進入後，您可以找到 style.css 文件，方法是單擊wp-content文件夾將其打開，然後單擊主題文件夾（如 T goy Twenty主題），然後滾動直到看到 style.css。

雙擊打開它（或右鍵單擊並選擇View/Edit ）並進行修改。 記得保存並上傳回服務器。

如果您需要編輯 home.php、single.php、archive.php 等其他模板文件，您可以在 style.css 所在的文件夾中找到它們。

並不總是需要通過 FTP 或儀表板來編輯主題文件。 事實上，如果你只是添加一些額外的代碼，最好避免這樣做。

對於少量添加，這是將 CSS 添加到 WordPress 網站的最佳方式。

如何在 WordPress 中添加自定義 CSS

如果您不想編輯現有的 CSS 代碼，而只想添加自己的樣式，強烈建議使用以下方法之一：WordPress 定制器或使用專用插件。

一方面，通過其中一種方法添加的 CSS 代碼更易於訪問和使用。 如果您想稍後進行修改，您無需擔心將新 CSS 放在錯誤的位置或忘記添加它的位置。

訂閱時事通訊

想知道我們是如何將流量提高到 1000% 以上的嗎？

加入 20,000 多人的行列，他們會通過 WordPress 內幕技巧獲得我們的每週時事通訊！

現在訂閱

此外，當您的主題更新時，通過其中一種方法添加的 CSS 不會丟失（儘管如果您更改主題，它可能仍然會消失）。

這意味著您不需要使用子主題，如果出現問題，您所要做的就是刪除剛剛添加的 CSS。

請注意，您仍然應該保留網站的備份，因為有些人報告說在重大更新期間偶爾會丟失他們的 CSS。 不過，這種方法比直接編輯主題文件要可靠得多。

雖然您可以將代碼添加到 style.css 並收工，但如果您不想創建子主題，對主題中的現有 CSS 進行重大編輯，並且最終可能會刪除所有工作，那麼最好在 WordPress 定制器中使用附加 CSS 選項或安裝插件。

1.通過WordPress定制器編輯CSS

不要使用主題編輯器，試試這個。 登錄到您的 WordPress 後端，然後單擊外觀 > 自定義以打開主題自定義屏幕。 您將看到網站的實時預覽，左側有選項可自定義顏色、菜單或其他小部件等元素。

在此菜單的最底部，您應該找到Additional CSS框。

點擊打開它。 您將被帶到一個帶有代碼輸入框和一些說明的新屏幕。 附加 CSS 屏幕包括語法突出顯示，就像主題編輯器一樣，以及讓您知道代碼是否錯誤的驗證。

您編寫的任何代碼都會自動出現在右側的預覽區域中，除非它有錯誤（儘管您可以選擇發布它）。

完成工作後，您可以發布代碼、安排其生效時間，或將其保存為草稿以供日後處理。 您甚至可以獲得預覽鏈接以與他人分享。

如您所見，Additional CSS 頁面在許多方面都比主題編輯器更強大，並且更適合添加代碼而不是弄亂核心文件。

您在此處編寫的 CSS 代碼會覆蓋主題的默認樣式，並且不會在主題更新時消失。 如果您無法在預覽中看到它“實時”，請仔細檢查您是否在 CSS 代碼中使用了正確的選擇器。

就像主題編輯器一樣，默認情況下 CSS 是全局的，但您可以編寫針對特定頁面的代碼。

一個缺點是，如果你切換主題，你寫的任何東西都會被刪除。 確保在遷移到新主題之前備份您的 CSS，否則您最終可能會丟失大量工作。

如果您正在努力使用此選項，或者想要一個跨主題的解決方案並且可以更輕鬆地定位某些頁面，您應該嘗試使用插件。

2. 使用插件向 WordPress 添加自定義 CSS

您可能想使用插件將 CSS 添加到 WordPress 有幾個原因。 雖然該功能類似於附加 CSS 菜單，但即使您切換/更新主題，樣式通常也會保持不變。

您可能還更喜歡他們的 UI，或者喜歡自動完成等額外功能。 一些插件甚至允許您通過下拉菜單構建 CSS，而不必自己編寫。

簡單的自定義 CSS

Simple Custom CSS 是最流行的 CSS 編輯器插件，因為它易於使用、最小的界面和輕量級的後端。 簡而言之，它是一個非常小巧的 WordPress 插件，但功能強大。

設置輕而易舉，您不會看到對性能的負面影響。 它適用於任何主題，包括語法突出顯示和錯誤檢查。

簡單的自定義 CSS 和 JS

簡單的自定義 CSS 和 JS 是一個不錯的選擇。 它還允許您定位頁眉、頁腳、前端，甚至是管理後端。

網站起源 CSS

SiteOrigin CSS 是另一個選項，它還包括一個傳統的 CSS 編輯器。 您可以隨時在它和可視化編輯器之間切換。

WP 添加自定義 CSS

如果您正在努力將 CSS 添加到特定頁面，WP Add Custom CSS 將自定義 CSS 框添加到編輯屏幕，並且還帶有全局樣式。

CSS英雄

您可能還想考慮嘗試使用可視化 CSS 編輯器。 這些將所有復雜的編碼轉化為一系列易於使用的輸入字段和下拉菜單，為您處理所有編程。

CSS Hero 是一個高級視覺編輯插件，具有一些非常強大的功能（動畫、特定設備編輯和非破壞性編輯等等）。

在哪裡學習 CSS

準備好為自己深入研究 CSS 了嗎？ 這些初學者教程將建立基礎知識並教您編寫自己的函數式 CSS 代碼所需了解的語法。

這可能令人生畏，但除非您嘗試做一些真正高級的事情，否則 CSS 並不太難！ 更改背景顏色或設置字體樣式等簡單的事情相當容易，網上有很多例子。

（建議閱讀：50 多種現代字體可在您的 WordPress 網站上使用）

您可以在 Internet 上找到的大多數編程教程也是完全免費的。 那裡有很多信息，而且免費/成本很低。

這裡有幾個例子，涵蓋了適合初學者的最佳 CSS 教程。

• W3Schools CSS 教程：在這裡可以找到大量信息：深入的教程、示例和參考資料供您使用。 W3Schools 的教程盡可能簡單易學，因此即使您是初學者，這也是一個很好的起點。
• Codeacademy 學習 CSS：通過六個免費的實踐課程，您將學習 CSS 的基礎知識。 這不是簡單的視頻教程，而是讓您使用實際代碼的交互式課程。 使用專業版，您還可以進行測驗和自由形式的項目。
• 在一小時內學習 CSS：很多人想學習一門新的編程語言，但他們只是沒有時間投入。 但是，如果您只留出一小時，您可以通過這個免費的 20 部分課程來學習 CSS。 即使你最終不是大師，你也應該很好地掌握基礎知識。
• 面向 WordPress 用戶的基本 HTML 和 CSS 簡介：正在尋找特定於 WordPress 的內容？ 如果您一直在為編寫 HTML 和 CSS 而苦苦掙扎，那麼本課程非常適合您。 它是付費的，但有 52 節課和 5 小時的視頻可供學習。

概括

作為 WordPress 用戶，一開始接觸 CSS 可能會讓人感到困惑。 但是一旦你知道如何編輯你的主題文件以及在哪裡添加樣式，你應該沒有更多的麻煩。

可以從後端或通過 FTP 編輯主題文件以更改站點的外觀，但通常應避免這種情況，除非您需要編輯現有代碼。

如果您只想添加自己的 CSS，請使用外觀 > 自定義下的附加 CSS 頁面，或者如果您需要更強大的功能，請嘗試使用插件。

除非您使用子主題，否則對樣式表的編輯將在主題更新時丟失。 附加 CSS 並非如此。 您的代碼不會更新，但不要忘記：當您更改主題時，只有插件會保留 CSS。

無論您選擇哪種方法，您都應始終定期備份您的網站，包括您添加的樣式表和自定義代碼。 現在是時候使用我們提供的資源來複習您的 CSS 基礎知識了。

快樂造型！

推薦閱讀：在線最佳網頁設計課程