向您的 WordPress 网站添加自定义 CSS 的方法不止一种。 您将在本文中看到如何。

在本周末 WordPress 中，我将解释三种不同方法的优缺点，以便您决定哪种方法最适合您，并继续自定义您的网站。

继续阅读，或使用以下链接跳转：

• 查找您想要自定义的设计元素
• WordPress 和 CSS 如何协同工作
• 方法 #1：编辑主题的 style.css 文件
• 方法#2：使用子主题来编辑 CSS
• 方法 #3：使用插件编辑 CSS

查找您想要自定义的设计元素

一旦您隔离了您想要更改的主题的一部分（例如，帖子标题），您需要确定应用于它的 CSS 属性，以便您可以进行适当的更改。 幸运的是，这个过程并不复杂。

CSS 使用选择器来确定将哪些设计声明应用于您网站的特定部分。 通常，这是通过为特定元素指定“类”来完成的。 但是，CSS 也可用于定义整个元素（例如，“”标签）或基于其 ID 的元素的布局。

幸运的是，流行的浏览器允许您只需单击几下即可查看哪些选择器和哪些声明应用于页面上的元素。 例如，在 Google Chrome 中，您只需突出显示文档的特定部分，然后单击鼠标右键，如下所示。

选择 检查元素 从出现的下拉菜单中，您将在右侧窗口中看到设计信息。 您可以在下面看到一个示例。

那些以红色突出显示的项目向您显示适用于您突出显示的文本的特定设计描述符。 例如，“font-size”元素告诉您在突出显示的文本中显示的字体大小为 13 像素（“13px”）。 描述符被选择器括在花括号中。 相关样式表文件的名称显示在选择器的右侧。

一旦掌握了所有这些信息，修改设计就很容易了。 例如，如果您想将字体从 13px 更改为 14px，您只需搜索样式表文件，在右侧显示这些选择器（“#plugin-info .block-content”）并将“13px”更改为“14 像素。”

您可以在 Firefox 中执行相同的操作，只需突出显示页面的特定部分，右键单击它，然后选择 检查元素 从出现的菜单中。

WordPress 和 CSS 如何协同工作

假设没有两个 WordPress 主题是相同的。 因此，请记住，您的 WordPress 主题可能不会 100% 符合您在以下部分中阅读的内容。

也就是说，用于呈现 WordPress 网站的 CSS 很可能位于一个名为 样式.css. 这是任何类型网站的样式表的通用名称，而不仅仅是 WordPress 网站。

如果您查看该文件，您会发现它包含针对您的主题的综合风格“说明”。 完整详细地介绍 CSS 语法超出了本教程的范围，但如果您想更深入地研究它，我们建议您从此处的 W3Schools 课程开始。

有了这些，让我们继续前面提到的三种编辑 CSS 的方法！

方法#1：编辑你的主题 样式.css 文件

有两种方法可以访问您的主题 样式.css 文件。

一种方法是从您的 WordPress 管理仪表板执行此操作。 在左侧导航栏上，突出显示 外貌 选项。 弹出菜单应显示更多选项。 在该菜单的底部，您会看到 编辑 选项。 点击那个。

一旦你在 编辑 页面，您将在页面右侧的垂直条上看到文件列表。 向下滚动该文件列表。 你会看到的 样式.css 在页面的底部。

如果你点击那个 样式表 选项， 样式.css 文件将被加载并显示在屏幕中间。 您可以使用该屏幕来编辑文件以更改您网站的设计，但有更好的方法来做到这一点（稍后会详细介绍）。

查找样式表的另一种方法是浏览托管服务提供商的操作系统并在主题文件夹中找到该文件。 确切的位置将因您的托管服务提供商而异。 在下面显示的示例中，网站的名称（在我们的例子中 护理) 是文件夹下的 public_html 文件夹。 由于为该站点安装了 WordPress，因此您可以看到 wp-内容 文件夹下 护理. 在下面 wp-内容 文件夹是另一个名为 主题，这是安装所有 WordPress 主题的地方。 由于该网站使用了一个名为 通讯， 正确的 样式.css 位于 时事通讯父母 文件夹。

此时，您可能会问自己：“为什么有一个 时事通讯父母 和一个 时事通讯孩子 文件夹？” 这是一个很好的问题，即将得到回答。

方法#2：使用子主题来编辑 CSS

如果您下载了一个很棒的主题并想要对其进行一些更改，那么您应该使用子主题，而不是编辑主（或父）主题。

为什么？ 因为开发人员可以经常更新主题以进行错误修复和设计更改。 如果您对主题进行更改然后安装更新，您将覆盖您的辛勤工作。

另一方面，如果您使用子主题进行 CSS 更改，则只会更新父主题。 您在子主题中所做的所有更改都将保留。

一些专业的主题开发人员意识到子主题的重要性，并会为您提供一个。 然后，您可以随心所欲地更新该子主题，而不必担心父主题更新会覆盖您的更改。

如果您有一个不包含子主题的主题，添加一个很容易。 您可以在我们创建儿童主题的综合指南中找到相关说明。

方法 #3：使用插件编辑 CSS

编辑网站 CSS 最方便的方法可以说是通过插件。

使用插件的主要优点之一类似于使用子主题。 如果您更新主题，您的更改不会被覆盖，因为它们与主题文件分开存储。 当然，另一个优点是您不必费心创建子主题。

这里有几个很棒的插件可用于修改 CSS：

简单的自定义 CSS

简单的自定义 CSS 是最流行的选项之一。 它已安装超过 100,000 次，并获得五星级评级。

子主题配置器

最后但同样重要的是，儿童主题配置器。 这是一个解决方案，可让您使用子主题自定义网站布局。

该插件还可以优化您的设计策略。 如果您使用过 CSS 很长时间，您就会知道样式表的整体结构有时会变得很麻烦。 Child Theme Configurator 可以帮助您正确分配样式表，从而获得最佳性能。

Child Theme Configurator 已被下载超过 40,000 次，并享有 4.8 星评级。

底线是：无论您尝试创建什么功能，它都可能已经由愿意提供给您的其他人创建，无论是免费还是收取合理费用。 最好节省一些时间并使用已经为您生成的解决方案。

包起来

如果您对编码感到满意，请创建一个子主题并深入研究 style.css。 但是，如果您更喜欢不理会这些，那么有很多可用的插件，它们很可能会很好地满足您的需求。

如果您希望进一步开发您的网站，那么开始掌握 CSS 是一个好主意，并且有大量的课程和教程可以帮助您。

• 儿童主题
• CSS
• 简单的自定义css
• 周末wordpress项目