更新 WordPress 主题时如何保留自定义 CSS
已发表: 2022-05-05主题决定了 WordPress 网站的布局和外观。 无论您使用哪个主题，您都可能需要对其进行一些自定义以满足您的特定需求。
自定义主题的一种方法是使用层叠样式表 (CSS)。 这种流行的样式表语言将允许您更改主题的几乎任何元素。 您可以将自定义 CSS 添加到您的主题中，以指定背景颜色、更改字体大小、创建内容之间的间距、重新定位菜单等。 不过，自定义 CSS 可能会在您下次更新主题时被删除。
为什么主题更新会破坏自定义 CSS
所有主题都有一个 style.css 文件。 在主题文件夹中可用，它包含 CSS。 当您更新您的主题时，您将下载一个新的、不同的版本来替换现有版本。
更新您的主题将删除现有的 style.css 文件并将其替换为全新的 style.css 文件。 新的 style.css 文件不会包含您之前添加的任何自定义 CSS。 您可以随时添加已删除的自定义 CSS，但在每次主题更新后这样做可能很乏味。
添加到定制器
您可以在更新主题时通过将其添加到定制器来保留自定义 CSS。 定制器是 WordPress 仪表板中的主题定制工具。 它具有“附加 CSS”字段。 您可以将其添加到此字段，而不是将自定义 CSS 直接添加到主题的 style.css。
WordPress 4.7 版中引入了“附加 CSS”字段，以防止自定义 CSS 在主题更新期间被删除。 它不会影响 style.css 文件，也不会影响主题文件夹中的任何其他文件。 当您通过此字段将自定义 CSS 添加到定制器时，它将存储在您网站的数据库中。 然后，您可以在保留自定义 CSS 的同时更新主题。
要访问定制器，请单击 WordPress 仪表板中的“外观”，然后选择“定制”。 “附加 CSS”标签位于底部附近。 单击此选项卡将显示一个字段，您可以在其中输入自定义 CSS。 更新主题只会替换主题文件夹中的文件。 它不会替换或以其他方式影响您网站的数据库，因此将保留自定义 CSS。
将自定义 CSS 添加到定制器允许您预览它。 定制器具有所有更改的内置预览功能。 无论您是设置新的小部件还是添加自定义 CSS，定制器都会显示您网站的外观。 然后，您可以通过单击“发布”来选择继续进行自定义。 如果您的网站看起来不正确，您可以在上线之前更改自定义选项。 无论如何，定制器将使用自定义 CSS 显示您网站的预览。
创建子主题
另一种解决方案是创建一个子主题。 子主题本质上是您可以自定义的其他主题的副本，而不必担心丢失更改。 它们不是完整的副本。 相反，大多数子主题仅包含几个基本文件，包括 style.css 文件和 functions.php 文件。
子主题旨在继承父主题的属性。 您可以将主题用作父主题。 子主题将有自己的文件夹，其中包含自己的 style.css 文件和 functions.php 文件。 但是，子主题不包含 index.php 文件、page.php 文件、single.php 文件或其他标准主题文件。 它将利用这些属性的父主题。
因为子主题有自己的 style.css 文件，所以它们支持自定义 CSS。 更重要的是，当父主题更新时，子主题会保留所有自定义 CSS。 更新父主题不会影响子主题的 style.css 文件。 有关如何创建子主题的说明，请访问 developer.wordpress.org/themes/advanced-topics/child-theme。 或者，一些高级主题带有子主题。
对于几行自定义 CSS，您可能希望将其添加到自定义程序中。 对于大量的自定义 CSS，创建子主题可能是值得的。 子主题将为您提供一个单独的 style.css 文件，您可以自定义该文件。
您甚至可以离线处理子主题的 style.css 文件，因为它是一个单独的文件，您将有足够的空间来自定义 CSS。 向定制器添加自定义 CSS 会将您限制在只能在线访问的小字段中。 定制器提供了预览模式的好处，而子主题提供了单独的 style.css 文件的好处。
使用自定义 CSS 插件
您可以使用自定义 CSS 插件。 例如，Simple Custom CSS 插件就像它听起来的那样：它允许您轻松地将自定义 CSS 添加到您的主题中。 添加到插件的自定义 CSS 将覆盖您的主题自己的 CSS。
激活简单自定义 CSS 插件后，您应该会在 WordPress 仪表板的“外观”下看到一个新的“自定义 CSS”选项卡。 您可以在此处添加自定义 CSS。 更新主题时，将保留自定义 CSS。 更新您的主题将替换主题的 style.css 文件，但插件将使用您的自定义 CSS 覆盖新的 style.css 文件。
还有简单的自定义 CSS 和 JS 插件，它支持自定义 CSS 和自定义 JavaScript。 您可以使用它来创建自定义 CSS，以覆盖您的主题自己的 CSS。 如果您不想弄乱创建子主题，您可能需要使用自定义 CSS 插件。 下载自定义 CSS 插件是在主题更新期间保留自定义 CSS 的一种简单方法。
结论
更新主题后丢失自定义 CSS 会令人沮丧。 即使您将自定义 CSS 保存到本地计算机，您也必须返回并添加它。 您可以通过使用 WordPress 仪表板中的定制器、创建子主题或使用自定义 CSS 插件来保留主题的自定义 CSS。
