如何將自定義樣式添加到WordPress小部件


WordPress中的大多數側邊欄小部件通常看起來都一樣。 如果所有小部件都具有相同的重要性,那很好,但是事實是,某些小部件對您網站的發展比其他小部件更為重要。 例如,電子郵件列表訂閱小部件肯定比存檔小部件更重要。 如果您可以輕鬆地以不同的方式設置重要小部件的樣式,那不是很好嗎? 在本文中,我們將向您展示如何向WordPress小部件添加自定義樣式。

使用插件向WordPress小部件添加自定義樣式

您需要做的第一件事是安裝並激活Widget CSS Classes插件。 激活後只需轉到 外觀»小部件 並單擊側欄中的任何小部件以展開。

添加CSS類以將自定義樣式添加到WordPress小部件

您會注意到一個新的 CSS類 窗口小部件下方的字段,因此您可以輕鬆地為每個窗口小部件定義CSS類。 例如,我們添加了 subscribe 類到我們的訂閱表單小部件。

現在,您可以轉到主題的樣式表並在其中添加樣式規則。 像這樣:

.subscribe { 
background-color: #858585;
color:#FFF;
}

向WordPress小部件添加自定義樣式

您可以添加任何所需的自定義CSS,例如添加背景,更改邊框,使用不同的顏色等。

手動向WordPress小部件添加自定義樣式

如果您不想使用插件,則可以將自定義樣式手動添加到WordPress小部件中。 默認情況下,WordPress將CSS類添加到包括小部件的不同元素。

側邊欄中的每個小部件都有一個編號的小部件類。 如小部件1,小部件2,小部件3等。使用Google Chrome瀏覽器的檢查元素工具,您可以找到要自定義的小部件的CSS類。

使用Chrome的Inspect Element工具查找小部件類

如您在上面的屏幕截圖中所見,我們要自定義的小部件具有 widget-2 類由WordPress添加到它。 現在轉到主題的樣式表並添加自定義樣式規則。

.widget-2 { 
background-color: #858585;
color:#FFF;
}
.widget-2 .widget-title { 
font-weight:bold;
}

僅此而已,我們希望本文能幫助您向WordPress小部件添加自定義樣式。 嘗試CSS,並嘗試不同的顏色。 使用A / B拆分測試來確定哪種自定義樣式最適合您的網站。

另外,如果您想使用一種更簡便的方法來突出顯示側邊欄訂閱表單小部件,請嘗試使用OptinMonster,因為它提供了多種設計,A / B測試等。

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