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

在本教程中，我们将研究向 wordpress 添加自定义 css 的四种技术：

1. 使用定制器

2. 带插件

3. 编辑style.css您的子主题的文件

4. 编辑您的子主题的文件functions.php

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

但是，如果您想进行重大更改，创建子主题可能是一个好主意- 即使设置它需要更多工作。除了直接将自定义 CSS 规则添加到您的 WordPress 主题之外，您还可以在子主题的帮助下安全地将外部 CSS 文件排入队列。

1. 通过定制器将自定义 CSS 添加到 WordPress

当您通过定制器将自定义 CSS 添加到您的 WordPress 网站时，您的自定义 CSS 将与您的主题相关联。只要您使用相同的主题，您就可以保留自定义。当您更新主题时，您的修改也不会被删除。但是，当您切换到新主题时，您的附加 CSS 规则将丢失。（如果你想为你的 WordPress 网站添加与主题无关的 CSS，你需要使用插件。）

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

当定制器显示您网站的实时预览时，您可以立即看到所做的更改。例如，下面是二十二十主题的样子：

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

假设您要更改font-size标题的属性。默认情况下，二十二十的主题选项不允许您这样做。找出需要覆盖的 CSS 规则的最简单方法是使用浏览器的开发人员工具。右键单击标题并选择 Inspect或Inspect Element选项（取决于您的浏览器）以在标题元素处打开 DevTools 的检查器： 

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

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

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

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

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

当定制器显示实时预览时，您可以在输入新规则时看到它的效果。 

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

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

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

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

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

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

您可以从WordPress 管理区域 的Plugins > Add New 菜单安装 Simple Custom CSS 插件 ：

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

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

如果您想显着修改主题的 CSS，创建一个子主题并将您的自定义代码添加到其中是一个合理的想法。子主题位于父主题之上。它使用相同的模板，但允许您覆盖父主题的任何文件——不仅是 CSS，还包括javascript、PHP 和静态资产（如图像）。 

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

要创建子主题，您可以查看我们由 Rachel McCollin 编写的分步教程。在本文中，我将使用我按照上述教程创建的 Twenty Twenty 主题的子主题。

每个子主题都需要包含两个文件（即使您可以根据需要覆盖父主题的任何其他文件）：

1. style.css用于自定义 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. 在您的子主题的 Functions.php 文件中加入一个外部 CSS 文件

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

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

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

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

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

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

<?php
/* Enqueues the external CSS file */
add_action( 'wp_enqueue_scripts', 'tutsplus_external_styles' );
function tutsplus_external_styles() {

    wp_register_style( 'widget-css', get_stylesheet_directory_uri().'/assets/widget.css' );
    wp_enqueue_style( 'widget-css' );

}

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

<?php
/* Enqueues the child theme - required for the child theme */
add_action( 'wp_enqueue_scripts', 'tutsplus_parent_styles');
function tutsplus_parent_styles() {
     
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
         
}

/* Enqueues the external CSS file */
add_action( 'wp_enqueue_scripts', 'tutsplus_external_styles' );
function tutsplus_external_styles() {

    wp_register_style( 'widget-css', get_stylesheet_directory_uri().'/assets/widget.css' );
    wp_enqueue_style( 'widget-css' );

}

最后

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

您还可以选择为自定义创建子主题。要为您的子主题添加自定义样式规则，您需要编辑 style.css 文件，而要将外部 CSS 文件排队，您需要编辑 functions.php。在您开始将自定义 CSS 添加到您的 WordPress 网站之前，请考虑您究竟需要什么以及您的自定义将用于什么目的，并相应地选择最佳技术。