将自定义 CSS 添加到 WordPress 网站的三种简单方法

自定义级联样式表 (CSS) 使您能够更好地控制页面的外观和行为,并设计网站。 进入 CSS 的脚本可以管理从图像到页面上显示的字体类型的所有内容。

链接颜色等。 背景图像,甚至嵌入的声音可能都来自这些文件。 但是,这提出了一个问题,如何将自定义 CSS 添加到 WordPress?

事实上,CSS文件修改比你想象的要容易得多,我们构建了三种方法,可用于添加自定义 CSS。

我需要多少编码知识?

如果你以前在CSS上在谷歌上搜索过,你可能已经看过无数的CSS代码段的例子。 今天,你可以在互联网上找到几乎所有的东西,CSS代码也不例外。

此外,添加自定义 CSS 与编码技能无关,如以下所示: 相反,只需找到正确的位置或文件来粘贴代码。

因此,您不必是编码专家即可添加自定义 CSS。

在 WordPress 中添加自定义 CSS 的三种方法

1. 更改编码级别

许多网站所有者认为直接修改 CSS 文件是最简单的根。 说实话,这是最简单的方法,因为它可以运行。 直接从 WordPress 没有额外的插件。

为此,请单击[外観]单击[テーマエディタ]选择一个选项。

主题编辑器

这将显示与当前主题关联的所有文件。 因此,您需要确保编辑了正确的 CSS 文件。 此外,要编辑的文件取决于要自定义的特定元素。

许多人觉得这部分定制很容易,但也有缺点。

例如,如果要更改主题,则可能需要重新编码 CSS。 大多数主题使用自己的 CSS 文件进行整体设计。 因此,对一个主题文件所做的更改不会影响另一个主题。

但是,请记住,您不会经常更改主题。

若要解决此问题,请将添加到主题文件的所有自定义 CSS 保存到记事本中。 如果需要,可以在其他主题中使用相同的代码。

但是,许多网站所有者 使用子主题这样,开发人员更新主主题不会删除对 CSS 所做的更改。 您可以获得所有好处,而不会丢失自定义编码。

2.CSS 自定义插件

正如任何WordPress开发人员都知道的, 插件 在大多数情况下,您可以自定义网站的任何部分,而无需编写一行代码。 因此,毫不奇怪,有许多插件,可以很容易地添加自定义CSS。

与最后一种方法相比,这是一个很大的优势。

CSS 不会直接存储在主题文件中,而是存储在插件文件中。 这意味着您可以在多个主题中自由使用相同的 CSS,而无需重写它们。 对于经常更改主题的开发人员来说,这节省了大量时间。

另一个主要优点是,许多插件有保护措施,以防止您的网站崩溃。 毕竟,在更改主题文件时,网站不会花费太多时间,这样您就可以完全避免这种情况。

因此,这可能是您刚刚开始时要考虑的最好方法。

以下是一些值得考虑使用的优秀插件:

可视化 CSS 样式编辑器

可视化 CSS 样式编辑器

酒店 可视化 CSS 样式编辑器 该插件是向 WordPress 添加自定义 CSS 的绝佳选择。 它使用可视化编辑器构建,允许您控制网站上的 60 多个样式属性。

响应式工具允许您编辑任何页面、帖子、登录页面和元素。 专业版提供许多其他功能,如800+谷歌字体,但免费版本是非常强大的CSS编辑。

简单的自定义 CSS

简单的自定义 CSS

简单的自定义 CSS 最流行的插件,添加自定义CSS到您的网站。 插件允许您添加自定义 CSS 以覆盖插件或主题文件。 因此,您只能自定义整个网站与一个插件。

它还包括错误检查,非常适合初学者。

WP 添加自定义 CSS

WP 添加自定义 CSS

无论您需要向整个站点的 CSS 添加更改,还是只需要更改少量页面, WP 添加自定义 CSS 可以容纳他们。 使用此插件所做的更改将覆盖主样式表,以提供网站所需的外观。 提供英语、德语和西班牙语版本。

3.CSS 主题更改

自定义

大多数主题都包含可添加编码的部分。自定义在区域。 这允许您将 CSS 直接添加到主题文件中,其中许多文件可以实时查看更改。

这些是子 CSS 文件(不要混淆) 儿童主题 在 WordPress 中,它与主样式表一起使用。

与第一种方法一样,使用此方法更改 CSS 的主要缺点是,在切换主题时可能会丢失调整。 它们特定于设计,在主题之间切换时不会保留。

但是,这是根据主题本身进行特定更改的好方法。 例如,此子 CSS 中使用的特定颜色或字体在新主题中可能在视觉上不吸引人。

单击“自定义”时,WordPress 自定义程序将弹出。 向下滚动一些[追加のCSS]单击选项。

[追加のCSS]单击。

这将打开 CSS 编辑器。 在这里,您可以添加自己的所有自定义 CSS 代码。

将自定义 CSS 代码添加到自定义程序

在此处添加自定义 CSS 会立即反映在您的网站中,因此下面是一个很好的示例,您可以在发布之前查看更改及其外观。

此代码更改网站标题 1 的阴影颜色。

添加代码之前

以前

添加代码后

添加代码后

用于实现其外观的代码已直接添加到自定义程序中。

添加的代码

您可以将所有必需的自定义 CSS 代码直接添加到此自定义程序区域。 这样,您就可以轻松实时查看所有更改。

在 WordPress 中使用自定义 CSS

使用 CSS 更改网站可以提高性能、更好地控制网站并微调设计。 向 WordPress 添加 CSS 相对容易,除非您对编码的工作原理有基本的了解,或者至少知道更改是实时执行哪些操作。

这是为目标受众提供完全独特的体验的最佳方式之一。 鉴于WordPress作为CMS的受欢迎程度,脱颖而出比以往任何时候都更加重要。

CSS 文件发生了哪些更改? 你认为直接更改样式表更容易吗?还是使用插件?

给TA打赏
共{{data.count}}人
人已打赏
WordPress 教程

在 WordPress 中创建常见问题解答部分的最简单方法

2022-11-5 10:16:37

WordPress 教程

为什么 WordPress 类别层次结构很重要?

2022-11-5 12:19:39

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索