如何輕鬆地將自定義CSS添加到您的WordPress網站


有時,您可能會發現自己需要在WordPress網站中添加自定義CSS。

可能是因為您正在關注WPBeginner或我們的YouTube頻道上的教程。 對於大多數初學者來說,使用FTP太混亂了,但是還有其他添加自定義CSS的方法。

在本文中,我們將向您展示如何輕鬆地將自定義CSS添加到您的WordPress網站,而無需編輯任何主題文件。

將自定義CSS添加到您的WordPress網站

影片教學

訂閱WPBeginner

如果您更喜歡書面教程或想按自己的節奏前進,請繼續閱讀以下說明。

方法1:使用主題定制器添加定制CSS

從WordPress 4.7開始,用戶現在可以直接從WordPress管理區域添加自定義CSS。 這非常簡單,您可以通過實時預覽立即看到所做的更改。

首先,您需要前往 主題»定制 頁。

啟動主題定制器

這將啟動WordPress主題定制器界面。

您將在左側窗格中看到站點的實時預覽以及一系列選項。 在左窗格中單擊“其他CSS”選項卡。

WordPress主題定制器中的其他CSS選項

該選項卡將滑動以顯示一個簡單的框,您可以在其中添加自定義CSS。 添加有效的CSS規則後,您就可以在網站的實時預覽窗格中看到該規則。

通過實時預覽添加自定義CSS

您可以繼續添加自定義CSS代碼,直到對它在網站上的外觀感到滿意為止。

完成操作後,請不要忘記單擊頂部的“保存並發布”按鈕。

保存自定義CSS更改

注意: 使用主題定制器添加的任何定制CSS僅適用於該特定主題。 如果要與其他主題一起使用,則需要使用相同的方法將其複制並粘貼到新主題中。

方法2:使用插件添加自定義CSS

第一種方法僅允許您為當前活動的主題保存自定義CSS。 如果更改主題,則可能需要將自定義CSS複製並粘貼到新主題。

如果您希望不管使用哪種WordPress主題都應用自定義CSS,則此方法適合您。

您需要做的第一件事是安裝並激活Simple Custom CSS插件。 激活後只需轉到 外觀»自定義CSS 並寫下或粘貼您的自定義CSS。

簡單的自定義CSS

不要忘記按下“更新自定義CSS”按鈕來保存您的更改。

現在,您可以查看WordPress網站以查看自定義CSS的使用情況。

使用自定義CSS插件與在主題中添加CSS

建議初學者使用上述兩種方法。 高級用戶還可以將自定義CSS直接添加到他們的主題中。

但是,不建議在自定義主題中添加自定義CSS代碼段。 如果您不保存自定義更改而意外更新了主題,則CSS更改將丟失。

最好的方法是改用子主題。 但是,許多初學者不想創建子主題。 除了添加自定義CSS,通常初學者真的不知道他們將如何使用該子主題。

使用自定義CSS插件可以使您獨立於主題存儲自定義CSS。 這樣,您可以輕鬆切換主題,並且自定義CSS仍然存在。

將自定義CSS添加到WordPress網站的另一種好方法是使用CSS Hero插件。 這個出色的插件可讓您編輯WordPress網站上的幾乎所有CSS樣式,而無需編寫任何代碼。

使用適用於WordPress的CSS Hero插件編輯自定義CSS

我們希望本文有助於將自定義CSS添加到您的WordPress網站。 您可能還想了解我們的指南,該指南如何在不編寫任何代碼的情況下創建自定義WordPress主題,以及最佳的WordPress拖放頁面構建器插件。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。