如何将自定义 CSS 添加到您的 WordPress 网站

确实有很多有趣的方法可以为您的网站制作特定的外观和感觉——如果这是您想要的。 有时,有一组有限的选择要容易得多,而且可能更有效率。 如果您使用的是 WordPress,内容管理系统 控制着三分之二的CMS市场,您可以决定在制作网站外观方面的参与程度。

第一级定制通常是主题. 对于某些人来说,它也可能是最后一层,因为一个好的主题可以轻松创建适合网站角色的外观。 因此,例如,如果您从事餐厅业务,您可以为您的网站选择一个食物和餐厅主题,然后就可以完成它。 或者,如果您有一家 IT 初创公司,您可以选择一个很棒的科技 WordPress 主题。

每个主题都带有一些自定义选项。 例如,您可能可以选择页面布局或页面上某些元素的外观。 但是,如果您希望在主题附带的内容之外进行一些更改,那么使用自定义 CSS 将是一个不错的选择。 以下是您可以做到的三种方法。

如何使用定制器添加自定义 CSS

将自定义 CSS 添加到您的网站的最方便的方法是使用定制器. 在仪表板菜单中找到“外观”选项。 将鼠标悬停在它上面,您会看到“自定义”按钮。 点击它进入定制器。

外观定制

进入后,您将可以访问不同的自定义选项,具体取决于您安装的主题和插件。 就在底部将是“附加CSS”选项.

附加 CSS

单击它,您将进入可以添加所需的所有自定义 CSS 的区域。 您将能够实时看到您所做的每项更改的效果,但在您按下“发布”按钮之前,它们不会生效。

其他 CSS 设置

定制器的 WYSIWYG 特性可能是其最大的优势,但它并不是唯一的优势。 它带有 WordPress 作为核心功能,因此您可以直接使用它,无需对插件进行任何额外的修改。 您还将获得一个非常基本的检查,以确保您的语法正常。

以这种方式添加自定义 CSS 的问题在于它都与您的主题相关联. 如果您想切换到另一个,自定义 CSS 将不会跟随。 至少不是单独的,也就是说——你总是可以把它复制到你的新主题中。

通过编辑(子)主题的样式表添加自定义 CSS

定制器中的附加 CSS 字段并不是您可以将自定义 CSS 添加到 WordPress 网站的唯一位置。 如果您想使用数百行代码进行大量更改,您的主题样式表可能是一个不错的选择。

选择要编辑的主题

编辑样式表是一项高级操作,不仅因为这意味着您对 CSS 有足够的了解,可以在自定义网站时添加数百行代码。 编辑样式表的主要问题是每次更新主题时,所做的编辑都会被删除。

解决这个问题的方法是创建一个子主题。 了解 WordPress 子主题的最佳方式是将其视为您在常规(父)主题之上创建的层。 即使您更新父主题,您对此图层所做的更改也将保持不变。

因此,如果您想向您的网站添加自定义 CSS,您需要 创建一个子主题 第一的. 然后,导航到主题编辑器,找到 stylesheet.css 文件,然后释放您的自定义 CSS 代码。

如何使用自定义 CSS 插件添加自定义 CSS

例如,如果您想添加能够在主题完全更改后仍然存在的自定义 CSS,那么定制器和样式表编辑都不会削减它。 但是您仍然可以使用自定义 CSS 插件(例如 简单的自定义 CSS 插件.

简单的自定义 CSS

下载并安装 Simple Custom CSS 插件后,您将有两种方式访问​​它。 要进入插件的管理屏幕,您可以导航到主菜单的外观选项,然后从子菜单中选择自定义 CSS。 您可以在窗口中添加自定义 CSS,然后单击“更新自定义 CSS”按钮以保存更改。

自定义 CSS 更新按钮

也可以使用定制器中的简单自定义 CSS. 在你导航到定制器——外观 > 定制——点击“简单定制 CSS”选项卡,你将进入插件的定制器部分。 在那里,您将在保存之前看到所做的所有更改的预览。

让我们把它包起来!

关于 WordPress 最好的事情之一是它在定制您的网站时为您提供了多少自由。 但是,如果您无法在可以下载和安装的众多主题中找到所需的每一个自定义选项,则不必担心。 您可以通过添加自定义 CSS 来进行所需的更改。 您可以使用三种不同的方法来做到这一点,您一定会找到一种尽可能方便的方法。

In relation :  如何在 WordPress 中创建事件时间线