想嘗試編輯WordPress CSS，但不知道從哪裡開始？使用CSS樣式，您可以全域性或在某些頁面上編輯網站的外觀。新增顏色，分隔某些元素，設計佈局，並從根本上改變WordPress主題中任何內容的外觀。
如果您想更熟悉WordPress的開發環境，或者只是想更好地控制您網站的外觀，您需要知道如何在WordPress中新增CSS（以及如何更改已經存在的內容）。
通過編輯您的主題幷包含您自己的其他CSS，您將能夠優化您網站上的每個視覺元素。今天，我們將仔細研究它。
什麼是CSS編輯？
CSS代表Cascading Style Sheets，它是除了HTML之外最流行的網路語言。兩者相輔相成，因為CSS用於設定HTML元素的樣式。HTML為網站的外觀奠定了基礎，而CSS用於進一步設定樣式。
CSS程式碼示例（來源：w3schools.com）
CSS使您能夠使網站具有響應性、新增顏色、更改字型、修改佈局以及總體上微調網站的視覺呈現。與HTML和JavaScript一樣，CSS是一種前端客戶端語言，這意味著它在使用者端執行，而不是在後端伺服器上執行。
在深入研究WordPress開發時，HTML、CSS、JavaScript和PHP是您需要了解的語言。這就是核心CMS以及它的許多主題和外掛的內建內容。
但是，即使您不是網頁設計師或開發人員，也可以選擇一點CSS，因為您可以使用它來移動網站上的元素或設定樣式，或者對主題進行小的美學更改以更好地適應您。
WordPress和CSS
在WordPress中，CSS有點不同。它由主題控制，主題由模板檔案、模板標籤，當然還有CSS樣式表組成。雖然由您的主題生成，但所有這些都可以由您編輯。
模板檔案將您網站的各個部分拆分為多個部分（例如header.php或archive.php），並且模板標籤用於呼叫它們以及資料庫中的其他內容。這些檔案實際上主要由PHP和HTML組成，但如果需要，您可以新增CSS。
您真正需要的是stylesheet或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新手，很容易意外犯下可能破壞網站外觀的錯誤，並且可能很難弄清楚如何恢復您的更改。
完成備份和子主題後，登入到您的後端。您可以通過轉到選單並單擊外觀 > 主題編輯器來找到編輯器。
您應該會看到一個彈出視窗，警告您不要直接編輯這些檔案。不用擔心，只需單擊“I understand”即可。在進行任何重大更改之前，使用子主題並備份您的網站只是一個警告。按照這些步驟操作，就可以安全地進行編輯了。
直接編輯WordPress檔案
現在你進來了！預設情況下，您應該在樣式表上，但如果沒有，請檢視右側的選單以檢視您的主題檔案。
除了style.css，您還可以訪問functions.php、header.php和single.php等模板檔案。所有這些都會影響您網站上某些頁面的行為方式。
但是在深入研究這些特定檔案之前，您應該熟悉PHP。
在WordPress主題中編輯style.css樣式表
請記住：您在此處所做的大多數CSS更改都是全域性性的。例如，如果您將H1標題更改為某種字型，它將對您網站上的每個頁面生效。您需要使用特殊語法來自定義特定頁面的樣式。
直接編輯主題檔案
如果您無法訪問主題編輯器或更喜歡通過FTP進行工作怎麼辦？使用後端編輯器更容易，但某些主題或外掛可能會禁用它。如果是這種情況，您需要通過FTP連線到您的網站。
FTP或檔案傳輸協議允許您遠端訪問和修改網站的檔案。您需要做的第一件事是下載FileZilla或任何其他FTP客戶端。
接下來，您應該聯絡您的主機並詢問您的FTP憑據（主機、埠和使用者名稱/密碼，如果適用）。如果您的主機有儀表盤，您可以通過登入找到它們。
擁有它們後，啟動FTP客戶端並輸入該資訊。如果它不起作用，請嘗試將“sftp://”放在主機部分的URL之前。
使用FileZilla
進入後，您可以找到style.css檔案，方法是單擊wp-content資料夾將其開啟，然後單擊主題資料夾（如TwentyTwenty主題），然後滾動直到看到style.css。
雙擊開啟它（或右鍵單擊並選擇View/Edit）並進行修改。記得儲存並上傳回伺服器。
如果您需要編輯home.php、single.php、archive.php等其他模板檔案，您可以在style.css所在的資料夾中找到它們。
編輯您的主題檔案，無論是通過FTP還是儀表盤，並不總是必要的。事實上，如果你只是新增一些額外的程式碼，最好避免這樣做。
對於少量新增，這是將CSS新增到WordPress網站的最佳方式。
如何在WordPress中新增自定義CSS
如果您不想編輯現有的CSS程式碼，而只想新增自己的樣式，強烈建議使用以下方法之一：WordPress定製器或使用專用外掛。
一方面，通過其中一種方法新增的CSS程式碼更易於訪問和使用。如果您想稍後進行修改，您無需擔心將新CSS放在錯誤的位置或忘記新增它的位置。
此外，通過其中一種方法新增的CSS在您的主題更新時不會丟失（儘管如果您更改主題，它可能仍然會消失）。
這意味著您不需要使用子主題，如果出現問題，您所要做的就是刪除剛剛新增的CSS。
請注意，您仍然應該保留網站的備份，因為有些人報告說在重大更新期間偶爾會丟失他們的CSS。不過，這種方法比直接編輯主題檔案要可靠得多。
雖然您可以將程式碼新增到style.css並收工，但如果您不想建立子主題，對主題中的現有CSS進行重大編輯，並可能最終刪除所有工作，那麼最好在WordPress定製器中使用附加CSS選項或安裝外掛。
1.通過WordPress定製器編輯CSS
不要使用主題編輯器，試試這個。登入到您的WordPress後端，然後單擊外觀 > 自定義以開啟主題自定義螢幕。您將看到您網站的實時預覽，左側有用於自定義元素（如顏色、選單或其他小工具）的選項。
在此選單的最底部，您應該找到額外CSS框。
點選開啟它。您將被帶到一個帶有程式碼輸入框和一些說明的新螢幕。額外CSS螢幕包括語法突出顯示，就像主題編輯器一樣，以及讓您知道程式碼是否錯誤的驗證。
WordPress中的額外CSS
您編寫的任何程式碼都會自動出現在右側的預覽區域中，除非它有錯誤（儘管您可以選擇釋出它）。
完成工作後，您可以釋出程式碼、安排其生效時間，或將其儲存為草稿以供日後處理。您甚至可以獲得預覽連結以與他人分享。
如您所見，Additional CSS頁面在許多方面都比主題編輯器更強大，並且更適合新增程式碼而不是弄亂核心檔案。
您在此處編寫的CSS程式碼會覆蓋主題的預設樣式，並且不會在主題更新時消失。如果您無法在預覽中看到它“實時”，請仔細檢查您是否在CSS程式碼中使用了正確的選擇器。
就像主題編輯器一樣，預設情況下CSS是全域性的，但您可以編寫針對特定頁面的程式碼。
一個缺點是，如果你切換主題，你寫的任何東西都會被刪除。確保在遷移到新主題之前備份您的CSS，否則您最終可能會丟失大量工作。
如果您正在努力使用此選項，或者想要一個跨主題的解決方案並且可以更輕鬆地定位某些頁面，您應該嘗試使用外掛。
2. 使用外掛向WordPress新增自定義CSS
您可能想使用外掛將CSS新增到WordPress有幾個原因。雖然該功能類似於附加CSS選單，但即使您切換/更新主題，樣式通常也會保持不變。
您可能還更喜歡他們的UI，或者喜歡自動完成等額外功能。有些外掛甚至可以讓你通過下拉選單來構建CSS ，而不必自己編寫。
Simple Custom CSS
Simple Custom CSS是最流行的CSS編輯器外掛，因為它易於使用、最小的介面和輕量級的後端。簡而言之，它是一個非常小巧的WordPress外掛，但功能強大。
Simple Custom CSS外掛
設定輕而易舉，您不會看到對效能的負面影響。它適用於任何主題，包括語法突出顯示和錯誤檢查。
Simple Custom CSS and JS 
Simple Custom CSS and JS外掛
Simple Custom CSS and JS是一個不錯的選擇。它還允許您定位頁首、頁尾、前端，甚至是管理後端。
SiteOrigin CSS 
SiteOrigin CSS外掛
SiteOrigin CSS是另一個選項，它還包括一個傳統的CSS編輯器。您可以隨時在它和視覺化編輯器之間切換。
WP Add Custom CSS 
WP Add Custom CSS外掛
如果您正在努力將CSS新增到特定頁面，WP Add Custom CSS將自定義CSS框新增到編輯螢幕，並且還帶有全域性樣式。
CSS Hero
您可能還想考慮嘗試使用視覺化CSS編輯器。這些將所有複雜的編碼轉化為一系列易於使用的輸入欄位和下拉選單，為您處理所有程式設計。
CSS Hero
CSS Hero是一個高階視覺編輯外掛，具有一些非常強大的功能（動畫、特定裝置編輯和非破壞性編輯等等）。
在哪裡學習CSS
準備好為自己深入研究CSS了嗎？這些初學者教程將建立基礎知識並教您編寫自己的函式式CSS程式碼所需瞭解的語法。
Learn CSS
這可能令人生畏，但除非您嘗試做一些真正高階的事情，否則CSS並不太難！更改背景顏色或設定字型樣式等簡單的事情相當容易，網上有很多例子。
（建議閱讀：50 多種現代字型可在您的WordPress網站上使用）
您可以在Internet上找到的大多數程式設計教程也是完全免費的。那裡有很多關於WordPress資訊，而且免費/成本很低。
這裡有幾個例子，涵蓋了適合初學者的最佳CSS教程。
- W3Schools CSS教程：在這裡可以找到大量資訊：深入的教程、示例和參考資料供您使用。W3Schools的教程儘可能簡單易學，因此即使您是初學者，這也是一個很好的起點。
- Codeacademy Learn CSS：通過六個免費的實踐課程，您將學習CSS的基礎知識。這不是簡單的視訊教程，而是讓您使用實際程式碼的互動式課程。使用專業版，您還可以進行測驗和自由形式的專案。
- Learn CSS in One Hour：很多人想學習一門新的程式語言，但他們只是沒有時間投入。但是，如果您只留出一小時，您可以通過這個免費的20部分課程來學習CSS。即使你最終不是大師，你也應該很好地掌握基礎知識。
- 針對WordPress使用者的HTML和CSS基礎：正在尋找WordPress特有的內容？如果您一直在為編寫HTML和CSS而苦苦掙扎，那麼本課程非常適合您。它是付費的，但有52節課和5小時的視訊可供學習。
小結
作為WordPress使用者，一開始接觸CSS可能會讓人感到困惑。但是一旦你知道如何編輯你的主題檔案以及在哪裡新增樣式，你應該沒有更多的麻煩。
可以從後端或通過FTP編輯主題檔案以更改站點的外觀，但通常應避免這種情況，除非您需要編輯現有程式碼。
如果您只想新增自己的CSS，請使用外觀 > 自定義下的額外CSS頁面，或者如果您需要更強大的功能，請嘗試使用外掛。
除非您使用子主題，否則對樣式表的編輯將在主題更新時丟失。附加CSS並非如此。您的程式碼不會更新，但不要忘記：當您更改主題時，只有外掛會保留CSS 。
無論您選擇哪種方法，您都應該定期備份您的網站，包括您新增的樣式表和自定義程式碼。現在是時候使用我們提供的資源來複習您的CSS基礎知識了。
評論留言