是否想嘗試編輯WordPress CSS，但不知道從哪裡開始？使用CSS樣式，您可以全局或在某些頁面上編輯網站的外觀。添加顏色，隔開某些元素，設計布局，並基本上完全改變WordPress主題中的內容。
如果您想更熟悉WordPress的開發環境，或者只是更好地控制網站的外觀，則需要知道如何在WordPress中添加CSS（以及如何更改已經存在的CSS）。
通過編輯主題並包括自己的其他CSS，您將可以優化網站上的每個視覺元素。今天，我們將仔細研究它。
準備開始？我們開始做吧！
什麼是CSS編輯？
CSS代表層疊樣式表，它是除了HTML之外最受歡迎的網路語言。由於CSS用於設置HTML元素的樣式，因此它們兩者並存。HTML奠定了網站外觀的基礎，而CSS用於進一步設計網站樣式。
CSS代碼示例（來源：w3schools.com）
CSS使您能夠使網站具有響應能力，添加顏色，更改字體，修改布局以及總體上微調網站的視覺效果。像HTML和JavaScript一樣，CSS是前端客戶端語言，這意味著它在用戶端而不是後端伺服器上執行。
在深入研究WordPress開發時，您需要了解HTML，CSS，JavaScript和PHP。這就是內置CMS的核心，以及許多主題和插件。
但是，即使您不是網路設計師或開發人員，也可以選擇一些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的新手，很容易不小心犯一個會破壞網站外觀的錯誤，而且很難弄清楚如何還原所做的更改。
完成備份和子主題後，登錄到後端。通過轉到菜單並單擊外觀>主題編輯器，可以找到編輯器。
您應該看到一個彈出窗口，警告您不要直接編輯這些文件。不用擔心，只需單擊「我了解」。進行任何重大更改之前，請先使用子主題並備份網站，這只是警告。遵循這些步驟，可以安全地進行編輯。
直接編輯WordPress文件
現在您進入了！默認情況下，您應該在樣式表上，但如果沒有，請查看右側的菜單以查看主題文件。
除了style.css，您還可以訪問模板文件，例如functions.php，header.php和single.php。所有這些都會影響您網站上某些頁面的行為。
但是在深入研究這些特定文件之前，您應該熟悉PHP。
在WordPress主題中編輯style.css樣式表
請記住：您在此處所做的大多數CSS更改都是全局的。例如，如果將H1標頭更改為某種字體，則它將對網站上的每個頁面生效。您將需要使用特殊的語法來自定義特定頁面的樣式。
使用WordPress，我們的流量增長了1,187％。
我們將向您展示如何。
加入20,000多個其他人，他們每周都會收到有關WordPress內部技巧的新聞！
現在訂閱
成功！感謝您的訂閱
您將在一周內收到下一期的Kinsta新聞通訊。
訂閱Kinsta新聞通訊
訂閱
我同意條款和條件以及隱私政策
直接編輯主題文件
如果您無法訪問主題編輯器或更喜歡通過FTP進行工作該怎麼辦？使用後端編輯器更容易，但是某些主題或插件可能會禁用它。如果是這種情況，則需要通過FTP連接到您的網站。
FTP，或文件傳輸協議，使您可以遠程訪問和修改網站的文件。您需要做的第一件事是下載FileZilla或任何其他FTP客戶端。
接下來，您應該聯繫您的主機並詢問您的FTP憑據（主機，埠和用戶名/密碼（如果適用））。如果主機具有儀錶板，則可以通過登錄找到它們。
MyKinsta中的FTP憑據
Kinsta用戶的憑據位於MyKinsta儀錶板中的站點> SFTP / SSH下。
擁有它們後，啟動FTP客戶端並輸入該信息。如果不起作用，請嘗試在「主機」部分的URL之前放置「 sftp：//」。
使用FileZilla
進入後，您可以找到您的style.css文件，方法是單擊wp-content文件夾將其打開，然後單擊主題的文件夾（如「二十二十年代」主題），然後滾動直到看到style.css。
雙擊將其打開（或右鍵單擊並選擇「查看/編輯」）並進行修改。記住要保存並上傳回伺服器。
如果需要編輯其他模板文件，例如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 Customizer編輯CSS
而不是使用主題編輯器，請嘗試此。登錄到您的WordPress後端，然後單擊外觀>自定義以打開主題自定義屏幕。您將看到網站的實時預覽，左側選項用於自定義元素，例如顏色，菜單或其他小部件。
在此菜單的最底部，您應該找到「其他CSS」框。
單擊以打開它。您將進入一個帶有代碼輸入框和一些說明的新屏幕。附加CSS屏幕包括與主題編輯器一樣的語法突出顯示，以及使您知道代碼是否錯誤的驗證。
WordPress中的其他CSS
您編寫的任何代碼都會自動顯示在右側的預覽區域中，除非出現錯誤（儘管您仍然可以選擇將其發布）。
完成工作後，您可以發布代碼，安排代碼生效的時間，或將其另存為草稿以備後用。您甚至可以獲取預覽鏈接以與他人共享。
如您所見，「附加CSS」頁面在許多方面都比「主題編輯器」更強大，並且比添加核心文件更適合添加代碼。
您在此處編寫的CSS代碼會覆蓋主題的默認樣式，並且在主題更新時不會消失。如果您無法在預覽中實時看到它，請仔細檢查您是否在CSS代碼中使用了正確的選擇器。
就像主題編輯器一樣，CSS默認情況下是全局的，但是您可以編寫針對特定頁面的代碼。
不利的一面是，如果您切換主題，您寫的任何內容都會被刪除。在移至新主題之前，請確保備份CSS，否則可能會丟失很多工作。
如果您正在努力使用此選項，或者想要一個可跨主題使用並且可以更輕鬆地定位某些頁面的解決方案，則應嘗試使用插件。
2.使用插件將自定義CSS添加到WordPress
您可能要使用插件將CSS添加到WordPress的原因有幾個。儘管該功能類似於「其他CSS」菜單，但即使您切換/更新主題，樣式通常也會保持不變。
是否需要為您的客戶站點提供快速，安全且對開發人員友好的託管？Kinsta在構建時就考慮了WordPress開發人員，並提供了許多工具和功能強大的儀錶板。查看我們的計劃
您可能還會喜歡他們的用戶界面，或者喜歡自動補全等額外功能。有些插件甚至允許您通過下拉菜單構建CSS，而不必自己編寫。
簡單的自定義CSS
由於其易用性，最小的界面和輕量級的後端，Simple Custom CSS是最受歡迎的CSS編輯器插件。簡而言之，這是一個很小的WordPress插件，具有很大的優勢。
簡單的自定義CSS WordPress插件
設置非常容易，並且不會對性能產生負面影響。它適用於任何主題，並包括語法突出顯示和錯誤檢查。
簡單的自定義CSS和JS
簡單的自定義CSS和JS WordPress插件
簡單的自定義CSS和JS是一個很好的選擇。它還使您可以定位頁眉，頁腳，前端，甚至管理後端。
SiteOrigin CSS
SiteOrigin CSS WordPress插件
SiteOrigin CSS是另一個選項，還包括傳統的CSS編輯器。您可以隨時在它和可視化編輯器之間切換。
WP添加自定義CSS
WP添加自定義CSS WordPress插件
如果您很難將CSS添加到特定頁面，則WP Add Custom CSS會在編輯屏幕上添加一個自定義CSS框，並且還帶有全局樣式。
CSS英雄
您可能還需要考慮嘗試使用可視CSS編輯器。這些將所有複雜的編碼轉換成一系列易於使用的輸入欄位和下拉菜單，這些菜單將為您處理所有編程。
CSS英雄
CSS Hero是一個高級視覺編輯插件，具有一些非常強大的功能（動畫，特定於設備的編輯以及無損編輯等）。
在哪裡學習CSS
準備好親自學習CSS了嗎？這些初學者教程將建立基礎知識，並教您編寫自己的功能CSS代碼所需的語法。
學習CSS
這可能令人生畏，但是除非您嘗試做一些真正高級的事情，否則CSS並不難！諸如更改背景顏色或設置字體樣式之類的簡單操作相當容易，並且在線上有很多示例。
您在互聯網上可以找到的大多數編程教程也是完全免費的。那裡有很多信息，不花任何費用。
以下是一些涵蓋初學者最佳CSS教程的示例。
- W3Schools CSS教程：這裡有大量的信息：深入的教程，示例和參考供您使用。W3Schools的教程儘可能簡單易懂，因此即使您是一個初學者，這也是一個很好的起點。
- Codeacademy學習CSS：通過六個免費的實踐課程，您將學習CSS的基礎知識。這不是簡單的視頻教程，而是一個互動式課程，可讓您使用實際代碼。使用專業版，您還將獲得測驗和自由格式項目。
- 一小時學習CSS：很多人想學習一種新的編程語言，但是他們沒有時間專門學習。但是，如果您僅能預留一個小時的時間，則可以通過此20部分免費課程學習CSS。即使您最終不是一個大師，您也應該對基礎有所了解。
- WordPress用戶基本HTML和CSS簡介：尋找特定於WordPress的內容？如果您一直在努力編寫HTML和CSS，那麼本課程非常適合您。它是付費的，但附帶52個講座和五個小時的視頻供您學習。
從使用的顏色到元素之間的空格，了解如何使用CSS定製和優化您的網站。✨單擊以發布
摘要
作為WordPress用戶，起初加入CSS可能會造成混淆。但是，一旦您知道如何編輯主題文件以及在何處添加樣式，就不會再有麻煩了。
可以從後端或通過FTP編輯主題文件以更改站點的外觀，但是通常應避免這種情況，除非您需要編輯現有代碼。
如果只想添加自己的CSS，請使用「外觀」>「自定義」下的「其他CSS」頁面，如果需要更強大的功能，請嘗試使用插件。
除非使用子主題，否則主題更新後對樣式表的編輯將丟失。對於其他CSS，情況並非如此。您的代碼可以安全地進行更新，但是請不要忘記：更改主題時，只有插件會保留CSS。
無論選擇哪種方法，都應始終對網站進行定期備份，包括添加的樣式表和自定義代碼。現在是時候使用我們提供的資源來複習CSS基礎。
造型愉快！
如果您喜歡這篇文章，那麼您會喜歡Kinsta的WordPress託管平台。加速您的網站並獲得我們經驗豐富的WordPress團隊的24/7支持。我們基於Google Cloud的基礎架構專註於自動擴展，性能和安全性。讓我們向您展示Kinsta的與眾不同！查看我們的計劃