如何轻松地将简单的自定义 CSS 添加到 WordPress

您是否正在寻找一种从您的网站添加简单自定义 CSS 的简单方法? 通常,您必须编辑主题或插件文件以使用 CSS 自定义它们。 对于初学者来说,这可能是很多工作,但我有一个解决方案。

您可以使用简单自定义 CSS 和 JS 插件,而不是查找和编辑这些文件。 这允许您直接为您的网站添加自定义 CSS 和 JS。 它快速,简单,最重要的是,方便。

自定义 CSS 有什么作用?

编辑主题或插件的 CSS 允许您以多种方式自定义它们的外观。 这有助于使主题看起来像您想要的那样,并确保您添加的任何插件都与您的主题相匹配。

毕竟,有些插件有与您网站的设计不匹配的趋势。

添加自定义 CSS 可以更改主题或插件的颜色、字体甚至布局,但值得注意的是,有时您只能做这么多。 这是因为您只是添加或更改特定项目的 CSS。 你不是在创造一个新的。

但是,如果您足够有才华,则可以更改主题或插件的实际代码以进行更多自定义。

但总的来说,您只是调整了一些值,而不是从头开始创建它。

如何在 WordPress 中添加简单的自定义 CSS

第 1 步:安装简单的自定义 CSS 和 JS

简单的自定义 CSS 和 JS 插件是任何想要调整其网站外观的网站的绝佳补充。 它允许您在不离开您的网站的情况下添加 CSS 和 JS。 它具有文本编辑器、无限添加、即使更改主题也能保持更改的能力等等。

但是,您可能想知道要充分利用此插件需要多少编码知识,答案可能会让您感到惊讶。

实际上,您不需要任何编码知识。 该插件负责将代码实际添加到您的网站。 你只负责提供代码,好消息是互联网包含各种 CSS 和 JS 来自定义 WordPress。

话虽如此,我强烈建议您学习 CSS 的基础知识。 这将为您提供更多选择,并使调整代码变得容易。 最重要的是,它将帮助您识别代码中可能导致问题的任何问题。

让我们首先单击插件并选择左侧管理面板上的添加新选项。

添新

在可用的搜索框中搜索简单自定义 CSS 和 JS。 这将提取您可能会发现有用的其他插件。

简单的自定义 CSS

向下滚动直到找到 Simple Custom CSS and JS 插件,然后单击“立即安装”按钮并激活插件以供使用。

现在安装

第 2 步:了解文本编辑器

此插件允许您添加 CSS、JS 和 HTML,它们涵盖了您在 WordPress 中编辑其外观所需的每种语言。 该插件使用起来非常简单,这就是它多年来如此受欢迎的原因。

笔记: 在本教程中,我将重点关注 CSS,但 JS 和 HTML 的过程相同,但使用不同的编码语言。

在左侧管理面板上,单击自定义 CSS 和 JS,然后选择添加自定义 CSS 选项。

添加自定义 CSS

这是一个基本的文本编辑器,默认情况下,您可以安全地删除一条评论而不会出现问题。 您可以在顶部添加标题,在左上角,您会注意到画笔。 这是美化代码选项。 它所做的只是删除代码行之间的任何多余空格。

美化代码

笔记: 我个人建议不要使用该功能,因为它会使代码更难阅读。 然而,选择权在你。

在右侧,您可以选择一些选项。 这些包括您希望代码是外部文件还是内部文件,是在页眉还是页脚中,以及它在网站上的位置。

此页面上的所有其他选项仅在您升级到插件的专业版时可用。

这就是编辑器本身在功能方面必须提供的一切。

请记住,如果代码在进入编辑器时没有得到想要的结果,那么您只是输入错误。 您可以随时自由编辑您添加的任何代码,并且对您网站的更改会立即发生。

第 3 步:添加自定义 CSS、JS 和 HTML

您可以使用多种资源在合理的时间内深入学习 CSS 或任何其他语言。 因此,本教程不会涵盖它。 但是,我确实想提高人们对可以在您的网站上使用的在线自定义 CSS 的数量的认识。

一个很好的例子可以在 主题岛博客.

和往常一样,如果你只是简单地用谷歌搜索你要找的东西,它可能是在线的。 只要您能找到代码,您实际上需要做的就是将其复制并粘贴到插件的文本编辑器中。 它真的没有什么复杂的。

恭喜您学习了如何在 WordPress 中添加自定义 CSS。 如果你有兴趣学习 CSS 语言,我强烈推荐使用 W3学校 作为资源。 它包含您掌握它所需的一切。 该网站也有其他语言的资源。

插件需要最多的 CSS

在许多情况下,插件的功能往往会在您的网站上脱颖而出。 尽管这些年来这已经变得更好,其中许多人默认使用您主题的配色方案,但仍有许多人没有。

其中一些真的可以像拇指酸痛一样脱颖而出。

有些插件已经内置了可以添加 CSS 以自定义其外观的方法,但有些插件仍然缺少此功能。 您所做的大部分更改只会更改颜色、字体、字体大小和其他小东西以匹配您的网站。

这个插件通过轻松添加自定义 CSS 完美地解决了这个问题,因此请确保您添加的每个功能都与您网站的其余部分相匹配。

我需要在 WordPress 中编码吗?

WordPress 经常被吹捧为无需编写任何代码的 CMS,这在一定程度上是正确的。

虽然您可以在没有任何编码的情况下制作一个非常好的网站,但您可以实现的目标是有限的。 这正是了解 CSS、JS 或 HTML 可以帮助您的地方。 这些是功能强大但简单的语言,可让您自定义网站的外观。

没有它们,几乎每个使用相同主题的网站看起来都几乎相同。

这有助于使您的网站在竞争中脱颖而出,最重要的是,它使它们看起来与您想要的完全一样。

您打算将哪些自定义 CSS 添加到您的网站? 您发现 Simple Custom CSS 和 JS 插件使用起来有多容易?

  如何在 WordPress 中使用 Hubspot CRM 提高生产力

类似文章