如何將 CSS 添加到 WordPress：5 種方法

已發表: 2021-12-11

您想應用 CSS 並編輯您網站的樣式嗎？ 如果是這樣，這篇文章是給你的。 在本指南中，我們將向您展示將 CSS 添加到 WordPress 的不同方法，以便您可以自定義網站並給訪問者留下深刻印象。

儘管 WordPress 有很多主題和模板可供您使用，但如果您想更改網站的外觀，遲早會添加 CSS 代碼。

將 CSS 添加到網站非常容易。 我們之前已經看到如何使用瀏覽器開發工具應用 CSS，但還有其他方法。 所有這些不同的方法各有利弊，因此初學者可能很難理解哪種方法是針對他們的特定情況添加 CSS 的最佳方法。 這就是為什麼在本指南中，我們將向您展示將 CSS 樣式添加到 WordPress網站的不同方法。

如何將 CSS 添加到 WordPress

有幾種方法可以將 CSS 樣式應用於 WordPress 網站：

  1. 通過主題定制器
  2. 編輯子主題文件
  3. 上傳您自己的 CSS 文件
  4. 使用鉤子將 CSS 應用到標題
  5. 將 CSS 添加到後端

讓我們來看看每種方法，以便您選擇最適合您的方法。

注意：我們不會在這篇文章中詳細解釋 CSS 的結構，因此我們建議您對 CSS 有基本的了解，以便能夠毫無問題地遵循本指南。

作為應用 CSS 的前一步，我們建議您使用瀏覽器開發人員工具來查找要更改的特定 HTML 元素。 如果您不確定如何執行此操作，請查看我們的指南，了解如何使用瀏覽器開發人員工具應用 CSS。

1) 使用主題定制器應用 CSS

將自定義 CSS 代碼添加到 WordPress 的最簡單和最快的方法是將其插入主題定制器的附加 CSS編輯器中。 這是內置的 WordPress CSS 編輯器，默認情況下出現在所有網站上。 但是，請記住，某些主題和插件可能會禁用此功能。

要使用主題定制器應用您的 CSS，請轉到您的儀表板並前往外觀 > 自定義>附加 CSS以打開CSS 編輯器。 在那裡，您將看到您網站的 CSS 代碼，並且您將能夠添加您的代碼。

應用您的自定義 CSS 將其插入主題定制器的附加 CSS 編輯器中。

這種方法最大的優點之一是可以在屏幕右側實時預覽 CSS 自定義的結果。

添加代碼後，它將保存在數據庫中*_posts表中的custom_css帖子類型下。 儘管您可以在此處應用各種自定義，但由於性能原因，對於大量 CSS 規則列表來說，這不是推薦的做法。

2) 編輯子主題文件

將 CSS 樣式添加到 WordPress 的另一種方法是編輯子主題的 CSS 文件。 此方法比直接從定制器應用代碼具有更好的性能，因為它無需從數據庫中檢索代碼即可加載。

大多數子主題都有一個style.css文件，因此您可以簡單地在其中添加自定義 CSS。 要查找子主題的style.css文件，請在 WordPress 儀表板中轉到外觀 > 主題編輯器。 然後按右上角的下拉菜單，選擇您的子主題，然後單擊style.css文件，如下所示。

在子主題文件中包含 CSS 代碼

如果您的子主題沒有style.css文件或任何其他擴展名為.css的文件，您可以按照下一節中的說明創建並應用它。

或者，一些子主題有一個 CSS 文件夾，其中包含多個文件。 如果是這種情況，請確保編輯正確的style.css文件。

3）上傳你自己的CSS文件

如果您想將大型自定義 CSS 代碼添加到 WordPress，最好將其放在單獨的文件中並將其上傳到服務器上的網站文件中。 讓我們一步一步來看看如何做。

3.1) 使用代碼編輯器創建 CSS 文件

為此，您需要使用代碼編輯器，例如 Visual Studio Code、Sublime text 或任何其他支持 CSS 文件的代碼。

創建一個帶有 CSS 擴展名的新文件並將您的代碼粘貼到那裡。 在此示例中，我們將文件命名為my-styles.css 。
使用代碼編輯器創建 CSS 文件

粘貼代碼後，保存文件，然後繼續下一步。

3.2) 上傳文件到子主題文件夾

如果您的子主題有一個 CSS 目錄，只需將您的文件複製並粘貼到那裡。 或者，您也可以直接在主子主題目錄中上傳它。 不用擔心在子主題文件夾中的位置，下一步我們將定位到文件路徑。

現在使用 cPanel 或 FileZilla 等 FTP 客戶端上傳文件。

如果您在本地主機服務器上，您可以簡單地將文件複製並粘貼到位於本地主機服務器公用文件夾中的子主題文件夾中。

按照我們的示例，我們將把my-styles.css文件粘貼到子主題中。

將文件上傳到子主題文件夾。

3.3) 將您的自定義 .CSS 文件排入隊列

現在您需要將您的自定義 CSS 文件排入您的子主題的functions.php文件以使其工作。 在functions.php中存在的任何代碼之後粘貼以下 PHP 腳本文件。

 功能 my_styles() {
wp_register_style('my-styles', get_stylesheet_directory_uri() . '/my-styles.css');
wp_enqueue_style('我的風格');
}
add_action('wp_enqueue_scripts', 'my_styles');

確保新創建的文件被路徑正確調用，具體取決於文件​​在主題目錄中的位置。 另外，請記住更改文件的名稱（本例中為my-styles.css ）。

您可以使用以下代碼段來檢查路徑是否正確。

 add_action('wp_head',function(){
迴聲 get_stylesheet_directory_uri() 。 '/my-styles.css';
});

將您的 CUSTOM CSS 文件排入隊列

而已！ 這就是您可以通過上傳自己的 CSS 文件將 CSS 應用到 WordPress 的方式。

4) 使用鉤子將 CSS 應用到標題部分

如果您有一些編碼技能，您還可以使用 hooks 將 CSS 添加到您的站點。

wp_head()鉤子在開發網站時非常有用。 雖然不建議使用它在<head> HTML 標記中包含腳本，但它可以讓您進行快速測試和調試。

如果您正在使用多個 CSS 樣式表或在復雜的網站上工作並且某些內容沒有按預期工作，您可以使用此鉤子在<head>部分中添加您的 CSS 代碼。

 add_Action('wp_head','my_head_css');
函數 my_head_css(){
迴聲“<樣式>
.網站品牌{
    背景：紅色；
    寬度：200px；
    填充：11px；
    邊框半徑：23px； }
</style>
";}

例如，使用此腳本，我們正在更改標題大小、背景顏色、邊框和填充。

通過這種方式，您可以確保 CSS 腳本通過任何其他 CSS 文件應用於前端，或以任何其他方式包含在網站中。

5）將CSS添加到後端

最後，還有另一種向 WordPress 添加 CSS 樣式的方法。 您可以使用admin_head()掛鉤將自定義 CSS 應用到後端，如下所示：

 add_Action('admin_head', 'my_custom_fonts');
功能 my_custom_fonts() {
迴聲'<樣式>
#管理菜單{
    背景：#602e93;}
</style>';
}

在此示例中，我們正在更改背景顏色 (#602e93)。

方法 4 和 5 非常有用，可以通過在<head> HTML 部分中插入 CSS 腳本來幫助您節省時間。 但是，這不是推薦的做法，您不應該使用這種方法來永久應用樣式。

結論

總而言之，通過一點 CSS，您可以自定義網站的外觀。 添加 CSS 很容易，但是有幾種方法可以做到，所以很難知道應該使用哪種方法。

在本教程中，我們向您展示了將 CSS 添加到 WordPress 網站的五種不同方法：

  1. 通過主題定制器
  2. 編輯子主題文件
  3. 上傳您自己的 CSS 文件
  4. 使用鉤子將 CSS 應用到標題
  5. 將 CSS 添加到後端

每種方法都有其優點和缺點。 例如，從主題定制器添加 CSS 很簡單，並且帶有實時預覽。 但是，對於大量 CSS 規則，不建議這樣做。 或者，您可以編輯您的子主題的文件或將您自己的 CSS 文件上傳到您的子主題。

即使不建議採用推薦做法，您也可以使用掛鉤在<head> HTML 標記中包含腳本，以進行快速測試和調試您的站點。

您是否將 CSS 添加到您的網站？ 您使用了哪種方法？ 你知道我們應該包括的任何其他方法嗎？ 在下面的評論中讓我們知道！