在你的网站上添加WordPress插件可以带来各种奇妙的功能。无论是像购物车这样的大项目,还是像相关帖子小部件这样的小改进,都有无穷的可能性。
但是,功能仅仅是软件包的一部分。许多WordPress插件还加载了它们自己的CSS。有时,这些样式在你网站的前端是相当明显的。
从理论上讲,这可能是一件好事。但是,这些CSS中的一些是非常有主见的。它可能看起来与你已经在网站上建立的样式有明显的不同。因此,你添加的插件越多,你的网站外观就会变得越不一致。
好消息是,有一些不同的方法来解决这个问题。今天,我们将向你介绍一些技术,以防止插件的CSS破坏你的用户体验。
在你的主题中覆盖插件的CSS
处理流氓插件造型的第一个方法是相当直接的。但它确实需要一点耐心。它涉及到找到任何与你的网站用户界面不匹配的特定CSS类或ID。
找到适当的CSS需要对你的网络浏览器的开发工具有一些了解。右键单击页面上的一个元素,并选择 "检查"(或Safari中的 "检查元素"),它将显示相关的HTML标记和CSS。

从那里,需要做一些实验。例如,有时你右键点击的元素不一定是控制样式的元素。这就需要在检查器的HTML中进行导航,点击像父容器或链接这样的东西。
如果你知道你要改变的是什么,就会有帮助。例如,CSSbackground-color 或font-size 属性,可能比其他一些更容易发现。
一旦你找到了正确的样式,把它们复制并粘贴到你的主题的style.css 文件中。或者,你也可以使用WordPress自定义屏幕中的附加CSS面板,并在那里粘贴代码(我们将在下面讨论其他选项)。然后,做任何需要的修改,上传或保存。
提示:你只需要包括你打算改变的类或ID中的CSS属性。其他的都可以省略。

当你想改变少量的样式时,这种技术是很方便的。然而,如果你想做大量的改变,这可能是很麻烦的。
删除插件样式并从头开始
这种方法需要时间的投入,以及一些中高级的CSS技能。你甚至可能想把它保留在一个插件的样式真的妨碍到你的情况下。
我们谈论的是使用WordPress的wp_dequeue_style()函数,它可以删除一个先前被排队的样式表。这可以用来有效地关闭与一个插件相关的任何样式表。
一旦你关闭了一个样式表,你就可以使用该插件的样式,并以你喜欢的方式编辑它们。这可能是一个很大的工作,但也是一个确保样式完全是你想要的东西的方法。
WordPress开发者资源网站有一个很好的例子,说明了这是如何做到的。这里成功的关键之一是找到样式表的注册名称。这可以在插件的代码中找到,或者你也可以在前端页面的源代码中找到它,标记为样式表的ID。

此外,你还需要与该插件相关的CSS。同样,你要深入到该插件的文件夹中,找到你需要的文件。它们的内容将需要被复制,粘贴到你的主题style.css ,并改变以满足你的需要。

不过,还是有一些插件有很多样式的。WooCommerce就是一个典型的例子。它包含了大量的CSS。这些样式工作得足够好,但有时会与你的主题发生冲突。
如果你想删除所有或特定的WooCommerce样式表,他们的文档可以指导你完成这一过程。
更多提示和故障排除
让一个插件的CSS适应你的意愿是很棘手的。事情并不总是按照你希望的方式进行,第一次就能成功。考虑到这一点,这里有一些其他的提示和故障排除的想法可以考虑。
检查插件文档
在某些情况下,一个插件的文档可以为实现风格定制提供可靠的建议。除了上面提到的方法外,可能还有其他选择--如后端设置或插件特定的主题设置。
另外,一定要查看支持论坛。很有可能有人已经问过关于自定义样式的问题。可能会有一些有价值的信息来帮助你前进。
在浏览器的开发工具中进行试验
我们已经提到了浏览器的开发工具对于找到你想覆盖的样式是多么重要。当事情没有按预期进行时,它们对于故障排除也同样重要。
例如,检查器工具可以帮助你确定一个自定义样式在级联中的位置。另一个样式可能是优先的,或者你正在查看页面的缓存版本。
更棒的是,你可以在检查器中直接编辑样式,并立即查看结果。这将让你在部署之前看到一个变化是什么样子。
这些工具可能会成为你消除错误的最好朋友。了解一下它们吧
以一种可持续的方式实施改变
如果你要花时间定制一个插件的样式,你要确保它们是可持续地实施的。这意味着把它们放在一个安全的位置,以免被删除或无意中改变。
把样式放在你的主题的主样式表里是可以的--只要你知道它们不会在主题更新后丢失。子主题是防止这种情况的一个好方法。
为了使事情更有条理,把你所有的自定义样式放到一个单独的样式表中可能是值得的。这样,当你需要进行修改时,你总是能够找到那些特定的样式。
此外,密切关注插件的更新日志。样式确实在演变,你今天定制的东西并不能保证永远有效。

给你的WordPress网站一个无缝的外观
一般来说,WordPress的插件是非常好的。但要让它们的相关风格与你网站的其他部分相适应,可能是一个挑战。尽管如此,你还是可以通过一点点的挖掘来达到目的。
在你的网络浏览器的开发工具的帮助下,你可以找到你想要改变的CSS类和ID。从那里开始,就需要以最适合你需要的方式来应用这些变化。
这需要敏锐的眼光,但这种努力真的可以带来回报。当你的网站的每一个方面看起来和感觉都一致时,访问者就会更容易浏览。此外,内容会形成自然的流动。用户体验会因此而变得更好。
The postMany Plugins, Many Styles:用WordPress创造一致的用户体验》首先出现在Speckyboy Design杂志上。