Most sidebar 小部件 in WordPress usually look the same. It would be fine if all your widgets had the same importance, but the truth is that some widgets are more important for your site’s growth than others. For example, an 电子邮件列表 subscription widget is certainly more important than an archives widget. Wouldn’t it be nice if you could easily style important widgets differently? In this article, we will show you how to add custom styles to WordPress widgets.
WordPress中的大多数侧边栏小零件通常看起来都一样。 如果所有小部件都具有相同的重要性，那很好，但是事实是，某些小部件对您网站的增长比其他小部件更为重要。 例如， 电子邮件列表订阅小部件肯定比存档小部件更重要。 如果您可以轻松地以不同的方式设置重要小部件的样式，那岂不是很好吗？ 在本文中，我们将向您展示如何向WordPress小部件添加自定义样式。
使用插件向WordPress小部件添加自定义样式 （Using a Plugin to Add Custom Styles to WordPress Widgets）
First thing you need to do is install and activate the 小部件 CSS 类 plugin. Upon activation simply go to 外观 » 小部件 and click on any widget in a sidebar to expand.
您需要做的第一件事是安装并激活小部件 CSS 类插件。 激活后，只需转到外观 » 小部件 ，然后单击侧栏中的任何小部件即可展开。
You will notice a new CSS类 field below your widgets, so you can easily define a CSS class for each widget. For example, we added the subscribe class to our subscription form widget.
您会在小部件下方看到一个新的CSS 类字段，因此您可以轻松地为每个小部件定义CSS类。 例如，我们将subscribe类添加到了订阅表单小部件中。
现在您可以转到主题的样式表并在其中添加样式规则。像这样：
现在您可以转到主题的样式表并在其中添加样式规则。像这样：
.subscribe {
background-color: #858585;
color:#FFF;
}
您可以添加任何您想要的自定义 CSS，例如添加背景、更改边框、使用不同的颜色等。
您可以添加任何您想要的自定义 CSS，例如添加背景、更改边框、使用不同的颜色等。
手动向WordPress小部件添加自定义样式 （Manually Adding Custom Styles to WordPress Widgets）
If you don’t want to use a plugin, then you can manually add custom styles to your WordPress widgets. By default, WordPress 添加 CSS 类 to different elements including widgets.
如果您不想使用插件，则可以将自定义样式手动添加到WordPress小部件中。 默认情况下， WordPress 添加 CSS 类到不同的元素(包括小部件)。
侧栏中的每个小部件都有一个编号的小部件类。像 widget-1、widget-2、widget-3 等。使用 Google Chrome 的 Inspect Element 工具，您可以找到要自定义的小部件的 CSS 类。
侧栏中的每个小部件都有一个编号的小部件类。如widget 1、widget 2、widget 3等。使用Google Chrome的Inspect Element工具，您可以找到您想要自定义的widget CSS类。
As you can see in the screenshot above, the widget we want to customize has widget-2 class added to it by WordPress. Now go to your theme’s stylesheet and add your custom style rules.
如您在上面的屏幕截图中所见，我们要自定义的widget-2已由WordPress添加了widget-2类。 现在转到主题的样式表并添加自定义样式规则。
.widget-2 {
background-color: #858585;
color:#FFF;
}
.widget-2 .widget-title {
font-weight:bold;
}
That’s all, we hope this article helped you add custom styles to WordPress widgets. Play around with the CSS and experiment with different colors. Use A/B 对比测试 to figure out which custom styles work best for your site.
就这样，我们希望本文能帮助您向WordPress小部件添加自定义样式。 尝试CSS，并尝试不同的颜色。 使用A/B 对比测试来确定哪种自定义样式最适合您的网站。
Also if you want an easier way to highlight your sidebar subscribe form widget, then try out 选择怪物 because it offers multiple designs, A/B testing, and much more.
另外，如果您想通过一种更简便的方法来突出显示侧边栏订阅表单小部件，请尝试使用选择怪物，因为它提供了多种设计，A / B测试等。
If you liked this article, then please subscribe to our YouTube 频道 for WordPress video tutorials. You can also find us on 推特 and 谷歌+.
如果您喜欢这篇文章，请订阅我们的YouTube 频道 WordPress视频教程。 您也可以在推特和谷歌+上找到我们。
翻译自: https://www.wpbeginner.com/wp-themes/how-to-add-custom-styles-to-wordpress-widgets/