#精品
WordPress添加自定义CSS

2025-01-12 0 736

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

CSS覆盖原理

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

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

示例:

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


<h2 style=\"font-size: 60px;\">我也爱813站长大咖</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 添加到的网站,那么因此使用子主题可能有点过头了——最好使用上述方法之一。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在!
点赞 (0)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。联系邮箱:3496947425@qq.com

813站长大咖 精品文章 WordPress添加自定义CSS https://www.813master.cn/1561.html

WordPress极客一枚!无干货,不分享!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug
查看详情

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务