如何將自定義CSS類添加到WordPress（3種簡單的方法）

那些知道CSS的人知道CSS課程在整個網站進行樣式時會大大節省。但是，如果您不編碼，那麼您可能永遠不會意識到它們的功能有多強大。今天，我們改變了這一點。

在這篇文章中，我將向您展示3種簡便的方法將CSS類添加到WordPress中 - 即使您從未寫過一行代碼。您還將使用功能強大的WordPress網站構建器Divi學習如何以無代碼方式進行學習。

什麼是CSS課程，它們如何幫助？

CSS（級聯樣式表）是控製網站上元素的設計和外觀（例如顏色，間距和字體）的代碼。 CSS類是您分配給多個元素的可重複使用的標籤，因此您可以一次對它們進行樣式，而不是為每個元素重複相同的過程。

沒有CSS課程，您必須手動設計每個元素，這會變得耗時 - 尤其是當在具有多個頁面的較大WordPress站點工作時。但是，通常情況下，大多數網站都包括重複元素和圖案，例如定價頁面上的按鈕或不同部分的功能框。

這些元素看起來相似，因為在後端，它們共享同一類組。因此，當您將CSS應用於公共類組的一個元素時，它中的每個元素都會自動繼承相同的樣式設置。在前端，這使他們的外觀具有相似的外觀。 CSS類節省了時間，保持設計一致，並使未來的編輯變得更加容易，因為您只需要更新課程，而不是一個一個更改每個元素。

將CSS類添加到WordPress的方法

您可以通過多種方式將CSS類添加到WordPress網站上，這取決於您在使用CSS方面的熟練程度。我將向您展示如何使用WordPress自定義器和插件（如簡單的自定義CSS）進行操作，但是這兩種方法都要求您編寫CSS。

如果您對無代碼方法更感興趣，則跳過第三種方法。

1。使用WordPress Customizer

假設您的WordPress頁面具有多個按鈕。他們目前看起來很簡單，您希望他們脫穎而出，因此您計劃添加海軍藍色邊框和天藍色背景。

將CSS添加到每個按鈕中會花費大量時間，因為您必須重複八次該過程。但是，使用CSS類，您可以簡單地將相同的CSS類分配給每個按鈕，然後僅編寫一次CSS。讓我們命名我們的CSS類“ Custom-A” 。在WordPress頁面編輯器窗口上，單擊任何按鈕>設置（齒輪圖標）>向下切換高級選項。現在，在其他CSS類中編寫類名。

重複每個按鈕的過程並保存。要將樣式代碼添加到這些按鈕中，您必須導航到WordPress Customizer>其他CSS。

為了使邊境海軍藍色和背景天空藍色，您可以在這裡粘貼CSS。

請注意，我們選擇的CSS類名稱是在代碼中的造型規則之前。這確保代碼應用於分配此類名稱的每個元素。

點擊發布並預覽您的頁面後，樣式的按鈕將看起來像這樣：

這很簡單 - 如果您知道CSS。

WordPress Customizer也非常適合進行較小的更改。但是，問題在於，在其中添加的CSS與主題掛鉤，這意味著如果您切換主題，它可能會丟失。因此，如果您喜歡在網站上測試不同的主題，則每次切換到其他主題時都必須更新代碼，這並不有趣。在這種情況下，安裝插件以確保您的CSS類樣式安全是一個更好的選擇。

2。使用插件，例如簡單的自定義CSS

安裝簡單的自定義CSS插件後，將“自定義CSS”選項添加到“外觀”部分。現在，您只需要添加CSS代碼並更新自定義CSS即可反映更改。 （您仍然需要將類名分配給想要具有通用樣式的元素。）

這樣的插件使您的自定義CSS保持完整，即使您以後更改主題。它也比WordPress定制器更有條理。但是，這兩種方法都不可擴展，因為當您為整個網站的多個元素組保存自定義CSS時，它們很容易變得混亂。

因此，對於範圍內的造型，推薦的方法是創建一個子主題並更新其樣式表的原因。這樣，即使在主題更新之後，您的所有更改即使在孩子主題中都保持安全。

儘管有效（並由編碼器推薦），但此方法可以迅速成為技術，因為它仍然需要手動工作 - 您必須為每個元素（或使用CSS類的多個元素）進行樣式，這很耗時，而不是初學者友好。您還必須跟踪班級名稱 - 只是想像您要編輯特定的按鈕類，並且您正在瀏覽無盡的代碼字符串。

那麼，如果您可以在不編寫單行代碼的情況下擴展樣式怎麼辦？那就是現代拖放頁面建造者（例如Divi）進來的地方。

3。使用無代碼網站構建器（例如Divi）

使用像Divi這樣的現代無代碼網站構建器的優點在於，您無需編寫CSS（或任何代碼）即可在網站上應用一致的樣式。使用視覺接口，您只需選擇和自定義設計設置，就可以將樣式分配給部分，行，列和模塊。

在Divi中，您可以創建預設，而不是CSS類。多年來，Divi提供了基於模塊的預設，可讓您為按鈕，Blurb和圖像等模塊保存和重複使用樣式。但是我們已經推出了更令人驚奇的東西 - 選項小組的預設使您走得更遠。

在選項組預設之前，您僅允許您跨模塊應用預設。例如，斜線預設只能在另一個blurb中使用。現在，您甚至可以跨模塊共享設置。

Option Group預設，而不是一次自定義一個元素，而是讓您為共享設置（例如背景，邊框或文本樣式）保存樣式，並同時將它們應用於多個不同的元素。例如，如果部分和列都使用背景顏色，則可以將該樣式設置保存為預設，並將其應用於所有相關元素中以創建凝聚力設計。

Divi通過拖放功能簡化了構建和保存樣式作為預設，而無需任何編碼，從而使范圍內的設計更改速度更快，更容易訪問，尤其是對於非編碼器而言。

下載Divi 5

讓我們在下面更詳細地了解我的意思

Divi的選項組預設使添加CSS類更容易

Divi的選項組預設進行CSS類的概念，並將其簡化為非編碼器。現在，您可以使用Divi的Visual Builder使用Divi的視覺構建器來在不同的元素上應用共享的設計樣式，而不是手動編寫和分配類，而是只需單擊幾下。

這些預設在選項級別上工作，這意味著它們針對特定的設計設置，例如背景顏色，邊框或間距，這些設置在多種元素類型上共享。因此，例如，可以將部分的背景設置應用於列，行甚至文本元素。

這是一種更快，更容易，更直觀的方式，可以使您的網站設計保持一致。以下是：

• 跨元素的可重複使用樣式：您無需手動自定義每個元素。將選項組樣式保存為預設，並將其應用於任何元素。
• 具有單個編輯的全局更新：一次修改預設，使用該預設的所有元素都會自動更新。這使設計調整可以在整個網站上快速有效。
• 結合多個預設：在任何元素上，都不是從頭開始的，都可以在任何元素上使用層和混合不同的預設（例如，邊界，陰影，文本樣式），以實現靈活而創意的設計組合。
• 自定義基本樣式的默認預設：將預設保存為默認設置，以將它們自動應用於所有相關元素。

了解有關選項組預設的更多信息

如何使用Divi在不編碼的情況下將CSS類添加到WordPress

現在您知道了Divi的選項組預設是什麼，並且您不需要知道與他們合作的編碼，我想向您展示Divi Builder內部的工作方式。您需要做的事情來創建，保存和應用小組預設到任何選項設置，例如背景，邊框，框架等。例如，讓我們自定義定價頁面。

更改按鈕背景

假設我想將按鈕背景更改為紫色以匹配頁面的顏色。因此，我將自定義第一列的按鈕，並將設置保存為主燈按鈕預設。 （UI設置中的黑色顯示您正在編輯設置預設。如果您選擇了黑色模式，則相反。）

現在，要將相同的設置應用於其他兩個按鈕，我將簡單地將按鈕預設更改為主燈。

改變列的陰影

讓我們在所有列中添加一個盒子陰影。我將在第一列中添加一個盒子陰影，並將其保存為陰影框陰影預設。

要在其他兩列上應用相同的陰影，我將簡單地將框的陰影預設更改為陰影。

修改文本預設

您還可以修改文本元素（例如H1和H2S）的樣式。以下是更新列H3預設有效的方式：

保存後，這是定價頁面的外觀：

儘管我進行了較小的更改以向您展示其工作原理，但您可以想像可能性。借助Divi的選項組預設，編輯自定義樣式組就像單擊按鈕一樣簡單。但這只是冰山一角。您也可以：

• 設置選項組的默認預設，以便基本元素（例如標題或按鈕）在整個站點上自動繼承您的樣式。一旦了解默認預設的工作原理，您將永遠不會返回使用舊方法。
• 圖層選項組在元素預設之上的預設以增加額外的重點 - 例如應用共享背景，然後堆疊陰影或邊框樣式以使某些元素脫穎而出。

我們已經為Divi的選項組預設寫了全部指南。閱讀全文，以獲取有關如何使用Divi簡化基於類的Web設計的設計思想和建議。

了解有關選項組預設的更多信息

Divi是基於班級設計系統的遊戲規則改變者

Divi的選項組預設將CSS課程的力量帶給所有人。無論您是設計獨奏還是與團隊合作，都可以預設您的工作流程加快工作流程，隨著網站的增長而精美地擴展，並毫不費力地進行造型。它們比傳統的CSS工作流程更快，更高效，更直觀。

今天開始使用Divi 5

Divi 5處於全面更新模式。我們每週都會啟動新功能，就像選項組預設一樣，最好了解高級單元，CSS設計變量以及更多其他網站設計方式。

了解有關Divi 5的更多信息

Divi 5是一個強大的設計框架，具有強大的工具，例如Divi Dash，Divi快速站點和Divi AI，可以幫助您創建自定義，專業的網站而無需觸摸一系列代碼。沒有什麼可以限制您的，準備在網站設計的未來進行測試嗎？

下載Divi 5