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 插件

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

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

方法二：自定义 额外CSS

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

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

方法三：使用子主题

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

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