使用 CSS 自定义 WordPress 主题
已发表: 2023-02-12主题是 WordPress 最大的卖点之一。 正确的主题可以使您的网站真正脱颖而出。 但是，您通常希望对所使用的任何主题至少进行一些自定义更改，以使一切都恰到好处。
在大多数情况下，您需要使用层叠样式表 (CSS) 来自定义主题的样式。 使用 WordPress，您可以通过多种方式执行此操作。 即使您没有任何处理代码的经验，您也可以轻松地将自己的 CSS 调整添加到 WordPress 主题。
在本指南中，我们将介绍三种可用于在 WordPress 中添加和编辑自定义 CSS 的方法。 我们将引导您完成整个过程，并讨论何时适合使用每种技术。 让我们开始吧！
使用主题定制器添加自定义 CSS
经验水平：初级
WordPress Customizer 使您能够更改网站的设计，并实时预览它们。 要访问它，请登录到您的 WordPress 仪表板并导航至“外观”>“自定义”选项卡：
您可以在这里使用很多设置。 但是，现在寻找Additional CSS选项卡。 单击它后，将打开一个新部分，其中包含一个可以添加自定义 CSS 的字段：
如果您是 CSS 新手，您可以在官方 Codex 中阅读更多关于如何将它与 WordPress 一起使用的信息。 还有很多关于 CSS 基础知识的其他优秀资源，我们建议您查看其中的一些资源。
CSS 可能会变得有点复杂，但只要了解基础知识，您就可以完成很多工作。 使用 WordPress Customizer 的好处在于，它使您能够立即预览使用 CSS 所做的任何更改。 这意味着这种方法非常适合学习 CSS 的工作原理。
注意：如果您更改主题，您使用定制器所做的更改将不会保留。 另外，更新您当前的主题可能会破坏您的自定义 CSS。 因此，如果您打算进行大量更改或中间主题选项，我们不推荐这种方法。
使用插件添加自定义 CSS
经验水平：初级到中级
上述方法效果很好，但您可以通过使用插件来扩展您的选项。 在以下部分中，我们将探索三个插件，使您能够自定义 WordPress 主题。
注意：使用插件编辑 WordPress CSS 的经验水平取决于您使用的工具。 我们建议对它们进行全面测试，看看哪个感觉最舒服。
高级 CSS 编辑器
如果您喜欢使用 WordPress Customizer，但希望它提供更多选项，那么这个插件值得一看。 使用高级 CSS 编辑器，您将能够为台式机、手机和平板电脑添加自定义 CSS。 这样，您就可以微调您的网站在每种设备上的显示方式。
安装 WordPress 插件后，导航到仪表板中的外观 > 定制器选项卡。 您应该会看到一个新的Advanced CSS Editor选项，为每种类型的设备提供多个编辑器的访问权限：
您所要做的就是添加所需的自定义 CSS，进行测试以确保其正常工作，然后将更改保存到您的主题中。
优点：
- 您可以完全控制您的网站在所有设备上的外观。
- 您仍然可以通过定制器编辑您的主题。
缺点：
- 为多种类型的设备添加自定义 CSS 可能需要大量工作。
平均评分： 4.5/5
注意：此插件还包括一个选项来缩小您的 CSS，这有助于减少您网站的加载时间。
模块化自定义 CSS
模块化自定义 CSS 使您能够通过 WordPress 自定义程序将 CSS 添加到您的主题。 但是，它还为默认的 CSS 编辑器添加了一些非常受欢迎的功能。 更具体地说，这个插件可以让你为单个主题创建自定义 CSS，并进行全局更改，在你设置的任何主题中持续存在：
要访问这些字段，您需要返回到外观 > 定制程序 > 附加 CSS部分。 到达那里后，您就可以开始进行更改。
优点：
- 您可以仅为特定主题添加自定义 CSS，并且即使您切换主题，所做的更改也会持续存在。
缺点：
- “全局”CSS 可能无法与每个主题完美搭配，因此在切换到新主题时需要小心。
平均评分： 5/5
网站来源 CSS
SiteOrigin CSS 与我们目前讨论的插件不同。 它没有向定制器添加新功能，而是提供了一个独立的 WordPress CSS 编辑器。 安装插件后，您可以通过导航到“外观”>“自定义 CSS”选项卡来访问这个新编辑器：
乍一看，这个 CSS 编辑器并没有什么特别之处。 但是，如果您单击眼睛图标，您将启动一个可视化编辑器。 在这里，您可以单击主题的任何元素并使用 CSS 轻松编辑它：
SiteOrigin CSS 插件起初可能有点让人不知所措。 但是，它也可以为您节省大量时间，因为您不必四处寻找正确的选择器。 您所要做的就是单击要修改的元素，然后添加您喜欢的任何 CSS 代码。
优点：
- 您可以通过单击在您的网站上编辑您想要的任何元素。
- 该插件使您无需使用 CSS 即可更改主题的一些简单方面，例如其字体。
缺点：
- 如果您调整多个元素，可能很难跟踪添加到主题中的所有自定义 CSS。
平均评分： 4.9/5
使用子主题样式表编辑 CSS
经验等级：高级
子主题是现有主题（称为“父”）的副本。 子主题使您能够安全地更改您的 WordPress 网站。 那是因为您仍然可以更新父主题，而不会丢失任何自定义 CSS 调整。 另外，如果您添加任何对网站产生负面影响的 CSS，您只需禁用子主题即可。
您添加到子主题的任何自定义 CSS 都将覆盖其父主题的样式。 但是，要使其发挥作用，您首先需要了解如何创建子主题。 一旦您的“孩子”准备就绪，您就可以使用 FileZilla 等 FTP 客户端访问其文件。
通过 FTP 连接到您的网站后，您需要找到您的根文件夹，该文件夹通常称为public_html或www ，或者以您的网站命名：
接下来，导航到wp-content/themes目录。 在那里，您会找到所有主题的单独文件夹，包括您设置的子主题。 打开子主题的文件夹，并在其中查找style.css文件：
右键单击主题文件，然后选择“查看/编辑”选项。 这将使用您的默认文本编辑器打开该文件，使您能够对其进行更改。 这意味着您可以将自定义 CSS 添加到您的主题中，只是现在您使用的是全文本编辑器而不是 WordPress Customizer。
完成后，保存对文件所做的更改并关闭编辑器。 然后，您可以访问您的网站，看看您所做的更改是否按预期工作。 如果他们没有，您可以返回到您的style.css文件并继续调整其 CSS。
注意：这是一个高级概述，还有很多关于设置和使用子主题的内容。 如果您不熟悉此流程，我们建议您谨慎操作。
使用主题定制器自定义 CSS 与 CSS 插件与子主题样式表
如您所见，在向 WordPress 添加自定义 CSS 时，您有很多选择。 然而，选择正确的方法可能是一个挑战。 让我们根据您对平台和一般 CSS 的经验水平来分解这些选择：
- 您是 WordPress 新手，不习惯使用 CSS。 在这种情况下，最好的办法是坚持使用 WordPress Customizer。 有了它，您将能够立即预览更改并习惯使用 CSS。
- 您对 WordPress 和 CSS 有一些经验。 在此阶段，您需要比默认定制程序提供的选项更多的选项。 因此，我们建议使用插件来改进其在 WordPress 中编辑自定义 CSS 的功能。
- 您是熟练使用 CSS 的 WordPress 老手。 如果您没有被 CSS 和代码片段吓倒，您可能想要设置一个子主题并手动编辑其样式表。
请记住，这些只是指南，您应该随意使用您觉得最舒服的任何方法。
通过出色的设计和一流的托管增强数字体验
您网站的设计对访问者的看法起着重要作用。 使用 WordPress，您可以访问数以千计的主题，并且可以使用自定义 CSS 编辑其中的任何主题。
然而，运行一个成功的网站不仅仅与外观有关。 您还需要提供出色性能、安全性和支持的 WordPress 虚拟主机。 使用 WP Engine，您可以通过我们的每一个计划访问所有这些功能！