You are here:  Home » PHP » 如何将自定义样式添加到WordPress窗口小部件

WordPress中的大多数侧边栏小部件通常看起来都一样。如果你的所有小部件都具有相同的重要性,那就好了,但事实是,有些小部件对于你的网站的增长比其他小部件更重要。例如,电子邮件列表订阅小部件肯定比存档小部件更重要。如果您可以轻松地以不同方式设置重要小部件的样式,那不是很好吗?在本文中,我们将向您展示如何向WordPress小部件添加自定义样式。

使用插件将自定义样式添加到WordPress窗口小部件

您需要做的第一件事是安装并激活Widget CSS Classes插件。激活后,只需转到外观»小部件并单击侧栏中的任何窗口小部件以展开。

Adding a CSS class to add custom styles to a WordPress widget

你会注意到一个新的CSS类您的小部件下方的字段,因此您可以轻松地为每个小部件定义CSS类。例如,我们添加了订阅Dìngyuè我们的订阅表单小部件的类。

现在,您可以转到主题的样式表并在那里添加样式规则。像这样:

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

Adding custom styles to WordPress widgets

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

手动将自定义样式添加到WordPress窗口部件

如果您不想使用插件,则可以手动将自定义样式添加到WordPress小部件中。默认情况下,WordPress将CSS类添加到不同的元素,包括小部件。

侧边栏中的每个小部件都有一个带编号的小部件类。与widget-1,widget-2,widget-3等一样。使用Google Chrome的Inspect Element工具,您可以找到要自定义的窗口小部件的CSS类。

Finding widget class using Chrome

正如您在上面的屏幕截图中看到的,我们想要自定义的小部件具有窗口小部件-2WordPress添加了它的类。现在转到主题的样式表并添加自定义样式规则。

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

这就是全部,我们希望本文能帮助您为WordPress部件添加自定义样式。玩CSS并尝试不同的颜色。使用A / B拆分测试来确定哪种自定义样式最适合您的站点。

此外,如果您想要一种更简单的方法来突出显示侧边订阅表单小部件,那么请尝试使用OptinMonster,因为它提供了多种设计,A / B测试等等。

如果您喜欢这篇文章,请订阅我们的YouTube频道WordPress视频教程。您也可以在Twitter和Google+上找到我们。

评论被关闭。