自定义 CSS：您应该使用 WordPress 子主题还是自定义程序？

WordPress 是一个动态灵活的工具，可供专家 Web 开发人员和新手网站所有者使用。 如果您找不到一种方法来设置您喜欢的样式，您可以添加自定义样式，也称为 CSS（层叠样式表）来修改您网站的外观和感觉，从布局和定位到颜色、字体等等。

从历史上看，WordPress 用户使用子主题来自定义 WordPress 网站的外观。 子主题继承了父主题的所有品质，但是，它做得更多。 随着 WordPress 定制器的添加，添加一些 CSS 来实现我们传统上对子主题所做的一些相同的事情变得更加容易。

您何时使用子主题而不是仅将 CSS 添加到定制器？ 是否存在代码片段插件更有意义的情况？

在这篇博文中，我们着眼于通过多种方式使用您自己的 CSS 自定义主题，并讨论何时使用一种方法而不是另一种方法更有意义。 不过，首先，让我们弄清楚一些术语。 什么是定制器，什么是子主题，还有哪些插件可以完成这些工作？

什么是儿童主题？

子主题是一个 WordPress 主题，它继承了另一个 WordPress 主题的所有品质。 主主题（父主题）可以是商业主题、您自己开发的主题或 WordPress.org 主题目录中的任何一个免费主题。 是的，您可以创建 Kadence 的子主题。 我们将在本文后面讨论您是否可能不需要，或者您可能想要的情况。

要创建子主题，您将在wp-content/themes/下在父主题的同一级别创建一个单独的目录。 通常它会从两个文件 style.css 和 functions.php 开始，但您也可以为您想要的子主题添加许多其他自定义项。 如果您需要，我们有一个指南会讨论如何创建子主题。 有许多插件可以为您创建子主题，您可以在创建子主题后删除这些子主题配置插件。

为什么人们使用儿童主题？

WordPress 用户在需要对父主题进行修改时创建子主题，但他们希望对父主题进行简单的升级过程。

例如，您想将您的 Google Analytics 标签添加到您的网站标题，或者您想确保所有表单、图像或按钮都以某种方式设置样式，或者您可能正在对需要的 WooCommerce 电子邮件进行自定义保存在您的主题区。

当您创建子主题时，您的所有自定义设置都会保存并在您的父主题需要更新时防止被覆盖。 出于安全和功能方面的原因，让主题和插件保持最新始终很重要。 但是您不希望每次主题需要更新时都重新自定义主题，因此向子主题添加样式是有意义的。 这样，父主题会更新，而您的子主题保持不变。

你需要一个儿童主题吗？

在 WordPress 的历史上，添加子主题一直是新 WordPress 网站最重要的定制之一。 无论您使用 WordPress 做什么，一个主题从来都不是最终目的。 从历史上看，创建儿童主题有两个原因。

1. 添加额外的 CSS。
2. 添加附加功能。

从历史上看，对于最大的可定制性，子主题一直是最简单的方法，同时保持父主题的完整性。 但是随着 WordPress 定制器的添加，很多情况都发生了变化。

什么是定制器？

当您查看 WordPress 页面或以具有编辑或管理权限的登录用户身份发布时，管理栏上有一个用于自定义 WordPress 的选项。 单击此按钮时，它会打开一个两个窗口框架，其中左侧是定制器，右侧是站点本身。

在定制器中，您可以访问可以为特定站点定制的所有内容。 WordPress 核心添加了一些通用控件，但包括 Kadence 在内的许多主题也在这里添加了一些设置选项。

定制器的添加为网站所有者提供了设置任何内容的新方法，包括添加额外 CSS 的选项。 过去，将附加 CSS 应用到 WordPress 网站的唯一方法是通过子主题来实现。

颜色、字体甚至页眉/页脚布局的设置都可以使用定制器完成。

Kadence 采用子主题、定制器和插件

Kadence 的立场是，您应该能够通过定制器尽可能地定制您的 WordPress 站点。 Kadence 自定义选项中有多种设置可供您使用，您甚至可以使用 Kadence Pro 版本通过自定义程序将您的 Google Analytics 代码添加到您的 Kadence 主题网站。

如果向您的 WordPress 网站添加其他功能，那么使用代码片段插件对大多数用户来说是最简单的方法。

通过这种方式，对于大多数 WordPress 用户来说，Kadence 简化了向 WordPress 添加额外样式和功能的方式，从而使管理 WordPress 站点变得更加容易。

话虽如此，并不是所有的 WordPress 网站都是一样的，不是所有的 WordPress 用户都是一样的，一个网站的需求和实现可能会与另一个不同。 此外，还有无数种使用 WordPress 完成任务的方法。

在向您的 WordPress 网站添加自定义代码时，需要考虑以下事项。

什么时候应该使用定制器

如果您只是添加几行 CSS 代码，定制器将是您最好的选择。 您可以在定制器视图中轻松添加几行、发布并查看 CSS 如何在您的 WordPress 网站上生效。

对于大多数网站所有者来说，定制器就是他们所需要的。

对于 Kadence Pro 用户，定制器中有用于添加页眉、页脚和正文标记脚本的事件位置，因此即使您使用 Google Tag Manager、Google Analytics 或任何其他需要添加自定义脚本的服务，定制器可以轻松适应您的自定义。

什么时候应该使用代码片段插件

如果您只是添加几行 PHP 代码，Code Snippets 插件是添加代码的好方法。 您可以使用插件轻松激活和停用代码以测试并确保代码正常运行。

在上面的示例中，使用代码片段将一些代码添加到站点以仅在管理区域中运行，以使 LearnDash 和 Elementor 更好地协同工作以进行课程编辑。 这也可以使用子主题来完成，但对于这个网站所有者来说，代码片段是一个更简单的选择。

当然，对于希望使用尽可能少的插件来运行他们的网站的插件极简主义者来说，Code Snippets 插件可能是一个很大的飞跃。 必须根据具体情况来平衡较少的插件和必要的功能。

什么时候应该使用子主题

如果您要添加多行 CSS 代码或使用额外的 PHP 代码扩展站点功能，那么子主题可能是最好的选择。 定制器 CSS 区域相当小，因此在其中添加大量 CSS 可能会让人不知所措或难以管理。 在这种情况下，子主题会更容易。 同样，如果您要添加的自定义功能超出了 Code Snippets 插件可以轻松管理的功能，那么子主题可以轻松做到这一点。

子主题允许您添加多行 CSS 并使用文件系统对其进行管理，而不是将 CSS 存储在数据库中并添加到每个页面。 通过子主题，CSS 通过 style.css 文件加载，浏览器可以缓存该文件，从而提高性能。 如果您要添加相当多的自定义代码或自定义函数，那么子主题是最好的选择。

性能问题

使用定制器的附加 CSS 功能时，添加的样式会将您的代码内联添加到每个页面顶部的 <style> 标记中。 这意味着如果您有大量 CSS，您将单独增加所有页面的大小。 您的网站访问者的浏览器将多次下载您的自定义样式。

另一方面，将 CSS 添加到样式表文件意味着浏览器需要下载额外的样式表，这也意味着浏览器可以缓存文件，因此无需为每个单独的页面再次下载额外的样式。

维护问题

将 CSS 添加到 Additional CSS 意味着您需要使用 Customizer 中的编辑器，该编辑器相当狭窄，不太适合大量 CSS。 但是，如果您将它们添加到样式表中，则可以使用您喜欢的任何文本编辑器，并且尺寸更合适。 您甚至可以使用 wp-admin 中的主题编辑器在浏览器中编辑 CSS 文件。 您可以在Appearance > Theme File Editor下找到主题编辑器。 确保在编辑时切换到正确的主题，我们强烈建议您在编辑子主题文件之前备份您的网站。

编辑您的主题文件

我们强烈建议您使用列出的这些方法之一，而不是编辑您的主要父主题文件，无论您使用的是 Kadence 还是任何其他主题。 编辑您的主题文件不仅会破坏您的网站，而且您会在下次更新主题时丢失这些自定义设置。

或者更糟糕的是，在您的主题文件中添加代码或修改代码时，您将处于试图弄清楚如何保持您的自定义，同时仍然更新您的主题以获得新功能或修复安全问题的位置。

结论

我们希望这种对子主题的看法有助于理解何时使用子主题，何时不使用，以及在添加自定义项时自定义站点以获得最佳性能的新方法。 如果所有这些事情看起来都需要考虑太多，那么您目前可能对定制器中的工具很好。