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

WordPress生态系统非常庞大，因此要找到在各个方面与您的品牌相匹配的完美主题可能是一个挑战。 一个很好的起点是浏览ThemeForest上的数千个高质量WordPress主题 。

但是，经常会发现您找到了几乎完美的设计，但仍想对其进行一点或很多调整。 尽管大多数WordPress主题都带有内置选项，可让您修改诸如排版和颜色之类的基本内容，但有时您希望进行更大的更改。 这是当您需要将自定义CSS添加到WordPress网站时。

在本教程中，我们将介绍四种向WordPress添加自定义CSS的技术：

1. 使用定制器
2. 带插件
3. 编辑您的子主题的style.css文件
4. 编辑您的子主题的functions.php文件

前两种技术不需要您创建子主题。 您可以通过WordPress管理员执行所有操作，而无需触摸源文件或通过（s）FTP连接到服务器。 两种方法都很出色，可让您快速将自定义CSS规则添加到您的站点。

1.通过自定义程序将自定义CSS添加到WordPress

通过自定义程序将自定义CSS添加到WordPress网站时，自定义CSS将与您的主题相关联。 只要您使用相同的主题，就可以保留自定义项。 更新主题也不会删除您所做的修改。 但是，当您切换到新主题时，其他CSS规则将丢失。 （如果要将独立主题CSS添加到WordPress网站，则需要使用插件。）

您可以通过单击WordPress管理区域左侧栏中的外观>自定义菜单来打开定制程序。

当定制程序显示站点的实时预览时，您可以立即看到所做的更改。 例如，以下是“二十二十”主题的外观：

您可以在屏幕左侧看到Customizer侧栏。 在这里，导航到名为“ 其他CSS”的最后一个菜单项 。 在这里您可以插入要添加到主题的自定义CSS。 您只需要在说明下方的文本区域中输入样式规则即可：

假设您要更改标题的font-size属性。 默认情况下，“二十二十”的主题选项不允许您执行此操作。 找出需要覆盖哪个CSS规则的最简单方法是使用浏览器的开发人员工具。 右键单击标题，然后选择“ 检查” 或“ 检查元素”选项（取决于您的浏览器）以在标题元素上打开DevTools的检查器：

检查器工具将向您显示二十二十主题使用以下样式规则来控制标题的font-size ：

@media ( min-width: 700px ) {
    h1,
    .heading-size-1 {
        font-size: 6.4rem;
    }
}

由于大多数DevTools还会显示每个样式规则的文件名和行号（ style.css –下图中的4716行 ），因此您也可以在代码编辑器中打开CSS文件，并检查确切的代码。

现在，您可以通过将具有不同值的相同CSS规则插入其他CSS来覆盖font-size规则 输入字段，例如：

@media ( min-width: 700px ) {
    h1,
    .heading-size-1 {
        font-size: 5.2rem;
    }
}

当定制程序显示实时预览时，您可以在键入新规则时看到其效果。

请注意，如果要使主题保持响应，请务必注意媒体查询。 您可以使用“定制工具”侧边栏底部的设备小图标（台式机，平板电脑，移动设备）测试不同屏幕尺寸的主题。

添加所需的所有自定义CSS规则后，您可以点击Customizer侧边栏顶部的“ 发布”按钮，您的更改将立即生效。

2.使用插件将自定义CSS添加到WordPress

使用自定义CSS插件的最大优点是，它允许您向站点添加独立于主题CSS，以便在切换到新主题时可以保留它们。 当您想要修改插件添加的与主题无关的内容的外观时，此技术很有用，例如额外的页面，自定义帖子类型或小部件。

此外，如果您想在网站上添加很多自定义CSS，您可能还会发现插件的设置页面和UI比Customizer的微小输入字段更加用户友好。 不利的一面是，这些插件会降低您的网站速度，因为与WordPress核心内置的自定义程序相比，它们会增加页面加载时间的额外开销。

在WordPress.org插件存储库中，您可以找到几个免费的插件 ，可以将自定义CSS添加到WordPress网站。 在本教程中，我们将使用Simple Custom CSS ，无需任何进一步配置即可使用。

您可以从“ 插件”>“添加新”来安装Simple Custom CSS插件。 WordPress管理区域的菜单：

安装并激活插件后，单击外观>自定义CSS 菜单，该菜单将带您进入插件的管理页面。 由于Simple Custom CSS只有一个输入字段，因此非常易于使用。 您只需要在文本区域中输入自定义CSS，然后点击“ 更新自定义CSS”按钮即可。

3.将自定义CSS添加到您的孩子主题的Style.css文件中

如果您想大幅修改主题CSS，创建子主题并向其中添加自定义代码是一个合理的想法。 子主题位于父主题的顶部。 它使用相同的模板，但允许您覆盖父主题的任何文件-不只是CSS，还包括JavaScript，PHP和静态资产（例如图像）。

您可以在父主题保持不变的情况下将自定义项添加到子主题。 当发布父主题的新更新时，您可以安全地对其进行更新，因为子主题将保留您的自定义代码。 但是，子主题还将继承父主题的更新，因此您可以同时拥有更新和自定义CSS。

每个子主题都必须包含两个文件（即使您愿意，您也可以覆盖父主题的任何其他文件）：

1. 自定义CSS样式的style.css
   
2. functions.php用于自定义主题功能
   

如果要将自定义CSS直接添加到子主题，则需要编辑style.css 。 仅在要将外部CSS文件添加到子主题时才使用functions.php 。

您可以从代码编辑器（例如Atom或Visual Studio Code）或WordPress管理区域的外观>主题编辑器菜单中编辑style.css文件（请参见下面的屏幕截图）。

您需要在顶部注释部分下方添加自定义CSS规则，其目的是通知WordPress核心有关子主题的存在（因此请不要删除顶部注释）。 否则，您可以像其他任何CSS文件一样编辑style.css 。 无论您在此处放置哪个CSS规则，它都会覆盖父主题的相应CSS规则。

4.将外部CSS文件放入您的子主题的Functions.php文件中

如果要将外部CSS文件添加到子主题，则需要通过编辑functions.php文件使其入队，以便WordPress Core可以正确调用它。 当您要在站点上使用第三方CSS库或模块化自定义CSS代码时，此技术很有用。

假设您要通过创建一个widget.css文件来更改小部件的样式，该文件可以存储所有与小部件相关CSS规则。 在这种情况下，您的子主题的文件结构将如下所示：

- twentytwenty-child/
    - assets/
        - widget.css
    - functions.php
    - style.css

除了两个必需的文件（ style.css和functions.php ），您还将拥有资产   文件夹， 其中包含带有自定义CSS代码的widget.css文件。 现在，您需要使用代码编辑器或WordPress管理区域中的外观>主题编辑器菜单来编辑functions.php 。

您需要创建一个自定义函数（在下面的示例中称为tutsplus_external_styles() ），您可以在其中使用以下命令注册和排队widget.css： wp_register_style()和wp_enqueue_style() WordPress方法。 我使用'widget-css'句柄注册了样式表，但您可以使用任何其他名称。

您还需要借助add_action()方法将自定义tutsplus_external_styles()函数附加到wp_enqueue_scripts WordPress操作中 。

就是这样-自定义widget.css文件已添加到您的主题中。 您的子主题的整个functions.php文件应如下所示：

包起来

当您需要将自定义CSS添加到WordPress网站时，可以使用四种不同的技术。 如果您不想触碰代码库，则可以使用定制器或定制CSS插件添加定制。 如果您想在网站中添加主题无关CSS或进行大量修改而不编辑源代码，则建议使用后一种方法。

您也可以选择为自定义项创建子主题。 要将自定义样式规则添加到子主题，您需要编辑style.css   文件，而要将外部CSS文件放入队列，则需要编辑functions.php 。 在开始将自定义CSS添加到WordPress网站之前，请仔细考虑您真正需要的内容以及自定义服务的目的，然后相应地选择最佳技术。

ThemeForest上最好的WordPress主题

尽管您可以使用免费主题做很多事情，但是如果您要创建专业的WordPress网站，最终您将需要探索付费主题。 您可以发现有史以来在ThemeForest上创建的数千个最佳WordPress主题 。 这些高质量的WordPress主题将为您和您的访客改善您的网站体验。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-add-custom-css-to-your-wordpress-site--cms-34367