WordPress添加自定义CSS

有时需要向网站添加一些自定义CSS 以使其完全符合要求,这些自定义CSS有时需要全站加载,有时仅适用于特定页面,所以不建议直接修改WordPress主题的样式表style.css文件。本文将介绍三种WordPress添加自定义CSS的方法。

CSS覆盖原理

在介绍这三种方法前,先讲一个CSS的层叠优先级是:内联样式(style=……) > 内部样式表(<style>……</style>) > 外部引用的CSS文件 > 浏览器缺省。

也就是说,HTML标签的内联样式是会覆盖内部样式表里出现过的样式,而内部样式表又会覆盖外部引用的CSS文件里出现过的样式。

示例:

<link rel='stylesheet' href='/wp-content/themes/test/style.css' media='all' />
<!-- 上面引入的主题样式表中有定义选择器h2的字体为20px,但会被下文的样式覆盖 -->
<style>
h2 {
  font-size: 40px;
}
</style>
<h2>我爱站长帮</h2>
<!-- 至此h2的字体大小会变成40px -->


<h2 style="font-size: 60px;">我也爱站长帮</h2>
<!-- 此处h2的字体大小会变成60px -->

出于CSS规范不建议使用内联样式,或仅是单次使用才考虑内联样式。

那么WordPress自定义CSS最好是使用内部样式表<style>……</style>)的方式添加,因为就算主题或其它加载的CSS文件中出现过相关样式,也会被自定义部分覆盖掉。

方法一:Simple CSS 插件

最简单的方法是安装 Simple CSS。这个插件允许在仪表板中将 CSS 输入到一个漂亮的编辑器中,而无需创建任何文件或执行任何其他复杂的操作。

这个插件的另一个好处是可以在每个单独的页面上找到 CSS 框,在这里允许添加仅适用于该页面的 CSS,这非常有用。

要安装它,只需在仪表板中转到插件 > 安装插件并搜索Simple CSS

方法二:自定义 额外CSS

在 WordPress 4.7 或以上版本中,WordPress 添加了一种核心方法,可以在定制器中将 CSS 添加到站点,可以在外观 > 自定义 > 额外 CSS中找到该方法。

需要注意的是,在这个区域添加的 CSS 是特定于主题的,所以如果切换主题,会丢失自定义的 CSS。它也没有页面特定 CSS 的选项。

方法三:使用子主题

如果使用子主题,是可以使用 style.css 文件添加自定义CSS的。

但如果只是将 CSS 添加到的网站,那么因此使用子主题可能有点过头了——最好使用上述方法之一。

站长帮社区

建站技术交流社区,欢迎提问与交流,还有大量WordPress主题与插件。

发表评论