如何在WordPress网站上自定义颜色

您想在您的WordPress网站上自定义颜色吗？颜色在使您的网站美观和建立其品牌标识方面起着至关重要的作用。幸运的是，WordPress可以非常轻松地在整个网站上自定义颜色。在本文中，我们将向您展示如何在WordPress网站上轻松自定义颜色，包括背景，标题，文本和链接颜色。

什么是色彩理论？

在开始在WordPress网站上自定义颜色之前，了解色彩理论很重要。

色彩理论是对颜色及其如何协同工作的研究。它可以帮助设计师创建相互补充的颜色组合。

在设计网站时，您需要选择搭配看起来不错的颜色。这将使您的网站看起来对访问者更具吸引力，这可以改善用户体验并提高参与度。

不同的颜色可以在人们中产生不同的情绪和感受，色彩理论可以帮助您为您的网站选择合适的组合。

例如，红色通常用于代表食物和餐馆。另一方面，蓝色通常用于银行和金融网站。

这是因为红色可以创造温暖、能量和激情的感觉，而蓝色象征着信任、安全和平静。

除了补充颜色外，您还可以使用颜色对比度来吸引人们对WordPress博客重要区域的注意。

这使您可以使您的内容更具可读性，建立强大的品牌标识，并在网站上营造特定的氛围。

什么是WordPress主题，您可以更改主题颜色吗？

WordPress主题控制您的网站在用户面前的外观。典型的 WordPress 主题是您安装在网站上的一组预先设计的模板，用于更改其外观和布局。

主题使您的网站更具吸引力、更易于使用并提高参与度。

您还可以使用SeedProd和Thrive Theme Builder等插件从头开始创建自己的主题。

使用 WordPress，您可以轻松自定义主题并更改其背景、字体、按钮和链接颜色。

但是，请记住，某些主题带有预定义的颜色选择，而其他主题则提供了更大的灵活性来选择自己的颜色。

如何在WordPress中自定义颜色

您可以使用许多不同的方法在 WordPress 中自定义颜色，包括主题定制器、完整站点编辑器、自定义 CSS、页面构建器插件等。

使用主题定制器更改颜色

使用内置的WordPress主题定制器更改颜色非常容易。

首先，从管理侧边栏访问外观»自定义页面。

注意：如果您在WordPress仪表板中找不到“自定义”选项卡，则表示您正在使用块主题。向下滚动到本教程的下一部分，了解如何更改块主题中的颜色。

在本教程中，我们将使用默认的 Twenty Twenty-One 主题。

请记住，根据您当前使用的主题，模板定制器的外观可能会有所不同。

例如，Twenty Twenty-One 主题带有“颜色和深色模式”面板，允许用户选择背景颜色并自定义深色模式。

打开面板后，只需单击“选择颜色' 选项。这将打开颜色选择器，您可以在其中选择您喜欢的背景颜色。

完成后，不要忘记单击顶部的“发布”按钮以保存更改并使其在您的网站上生效。

在完整网站编辑器中更改颜色

如果您使用的是基于块的主题，则无法访问主题定制器。但是，您可以使用完整站点编辑器 （FSE） 更改网站上的颜色。

首先，从管理侧边栏前往外观»编辑器屏幕以启动完整的站点编辑器。

现在，您必须单击屏幕右上角的“样式”图标。

这将打开“样式”列，您需要在其中单击“颜色”面板。

您可以从此处更改主题的背景、文本、链接、标题和按钮颜色。

完成后，单击“保存”按钮以存储您的设置。

使用自定义 CSS 更改颜色

CSS 是一种可用于更改网站视觉外观（包括其颜色）的语言。您可以在模版设置中保存自定义 CSS，以将自定义应用于整个网站。

但是，如果您在网站上切换主题或更新现有主题，则自定义 CSS 代码将不再适用。

这就是为什么我们建议使用WPCode插件，这是市场上最好的WordPress代码片段插件。这是添加自定义CSS代码的最简单方法，它将允许您安全地自定义WordPress网站上的颜色。

首先，您需要安装并激活WPCode插件。

注意：还有一个免费的WPCode版本，你可以使用。但是，我们建议升级到付费计划以释放插件的全部潜力。

激活WPCode后，您需要从管理员侧边栏访问代码片段» +添加代码片段页面。

只需点击“添加自定义代码段（新代码段）”标题下的“使用代码段”按钮即可。

进入“创建自定义代码段”页面后，您可以先键入代码的名称。

之后，只需从下拉菜单中选择“CSS片段”作为“代码类型”。

接下来，您必须在“代码预览”框中添加自定义 CSS 代码。

在本节中，我们将添加自定义CSS代码来更改网站上的文本颜色：

p { 
color:#990000; 
}

完成此操作后，向下滚动到“插入”部分。

在这里，如果您希望代码在激活时自动执行，您可以选择“自动插入”选项。

您还可以向特定的WordPress页面或帖子添加短代码。

完成后，只需滚动回页面顶部并将“非活动”开关切换为“活动”。

最后，您需要单击“保存代码段”按钮将CSS代码应用于您的网站。

使用 SeedProd 更改颜色

您还可以使用SeedProd插件自定义颜色。

它是市场上最好的WordPress页面构建器，可让您从头开始创建主题，而无需使用任何代码。

首先，您需要安装并激活 SeedProd 插件。

激活后，从WordPress管理侧边栏前往SeedProd » Theme Builder页面。

从这里，单击顶部的“主题模板套件”按钮。

注意：如果您想从头开始创建自己的主题，则需要单击“+添加新主题模板”按钮。

这将带您进入“主题模板套件选择器”页面。在这里，您可以从 SeedProd 提供的任何预制主题模板中进行选择。

选择主题后，您将被重定向到“主题模板”页面。

在这里，您需要将“启用种子生产主题”开关切换为“是”以激活主题。

现在，您必须单击任何主题页面下的“编辑设计”链接以打开拖放编辑器。

到达那里后，单击左列底部的齿轮图标。

这会将您定向到“全局 CSS”设置。

从这里，您可以自定义网站背景、文本、按钮、链接等的颜色。

对选择感到满意后，单击“保存”按钮以存储您的设置。

如何在WordPress中更改背景颜色

所有WordPress主题都带有默认的背景颜色。但是，您可以轻松更改它以个性化您的网站并提高其可读性。

如果您使用的是块主题，则必须使用完整的站点编辑器更改背景颜色。

首先，您必须从管理侧边栏前往外观»编辑器屏幕。

启动完整的站点编辑器后，单击屏幕右上角的“样式”图标。

之后，只需单击“颜色”面板即可打开其他设置

在“颜色”面板中，您现在可以管理网站上不同元素的默认颜色。

在这里，您需要单击“元素”部分下的“背景”选项。

“背景”面板展开后，您可以从此处选择您的网站背景颜色。

所有WordPress主题都提供了许多默认的网站颜色供您选择。

但是，如果要使用自定义颜色，则需要单击“自定义颜色”工具。

这将打开拾色器，您可以在其中选择您选择的颜色。

您还可以为网站背景使用渐变颜色。

为此，您首先需要切换到顶部的“渐变”选项卡。

接下来，您可以从主题中选择默认渐变，或者在颜色选择器工具的帮助下选择自己的渐变颜色。

完成后，不要忘记单击“保存”按钮以存储您的设置。

您还可以使用主题定制器、SeedProd 和自定义 CSS 更改网站的背景。

如何在WordPress中更改标题颜色

许多WordPress主题在页面顶部都有一个内置标题。它通常包含重要的页面链接、社交图标、CTA 等。

如果您使用的是块主题，则可以使用完整的站点编辑器轻松自定义WordPress标题。

首先，您需要从管理侧边栏访问外观»编辑器屏幕以启动完整的站点编辑器。在那里，双击顶部的“标题”模板。

从这里，只需向下滚动到“颜色”部分，然后单击“背景”选项。

这将打开一个弹出窗口，您可以在其中为标题选择默认颜色。

您还可以通过打开拾色器工具来选择自定义颜色。

要使用颜色渐变自定义标题，您需要切换到“渐变”选项卡。

之后，您可以选择默认渐变选项或使用拾色器自定义自己的渐变选项。

最后，单击“保存”按钮以存储您的设置。

如何在WordPress中更改文本颜色

更改文本颜色有助于提高WordPress博客的可读性。

如果您使用的是块主题，则必须使用完整的站点编辑器更改文本颜色。

您可以从管理侧边栏访问外观 » 编辑器屏幕开始。这将启动完整的站点编辑器，您必须在其中单击右上角的“样式”图标。

接下来，您需要单击“颜色”面板以访问其他设置。

到达那里后，继续并单击“元素”部分下的“文本”选项。

打开文本颜色设置后，您将能够在“默认”部分下看到许多文本颜色。

或者，您也可以通过单击自定义颜色工具并打开拾色器来使用自定义文本颜色。

做出选择后，只需单击“保存”按钮即可存储更改。

额外提示：您可以使用 WebAIM 对比度检查器工具来检查背景和文本颜色是否协同工作。该工具可以帮助您提高网站上的文本可读性。

如何在WordPress中更改文本选择颜色

当访问者在您的网站上选择文本时，它将显示背景颜色。默认颜色为蓝色。

但是，有时颜色可能无法与您的 WordPress 主题很好地融合，您可能需要更改它。

将 CSS 代码添加到主题文件可以轻松更改文本选择颜色。但是，请记住，切换到另一个主题或更新当前主题将使 CSS 代码消失。

这就是为什么我们建议使用WPCode插件，这是市场上最好的WordPress代码片段插件。

首先，您需要安装并激活WPCode插件。

激活后，从管理员侧边栏转到代码片段 » + 添加代码段页面。

然后，只需单击“添加自定义代码段（新代码段）”标题下的“使用代码段”按钮即可。

进入“创建自定义代码段”页面后，您可以先键入代码段的名称。

之后，您必须从右侧的下拉菜单中选择“CSS片段”作为“代码类型”。

现在，继续将以下CSS代码复制并粘贴到“代码预览”框中。

::-moz-selection {
background-color: #ff6200;
color: #fff;
}
::selection {
background-color: #ff6200;
color: #fff;
}

您可以通过替换 CSS 代码段中“背景颜色”旁边的十六进制代码来更改文本选择颜色。

添加代码后，向下滚动到“插入”部分。

在这里，您需要选择“自动插入”方法以在激活时自动执行代码。

之后，滚动回顶部并将“非活动”开关切换为“活动”。

最后，继续并单击“保存代码段”按钮以存储您的更改。

现在，您可以访问您的网站以检查文本选择颜色。

您还可以使用主题定制器或插件更改文本选择颜色。

如何在WordPress中更改链接颜色

您可以使用完整的站点编辑器或自定义CSS轻松更改WordPress中的链接颜色。

如果您使用的是块主题，请从管理侧边栏前往外观»编辑器屏幕。

启动完整的站点编辑器后，您必须单击右上角的“样式”图标。

接下来，单击右栏中的“颜色”面板以查看其他设置。

到达那里后，只需单击“链接”面板。

这将启动链接颜色设置，您将在右列中看到多个默认链接颜色。

但是，您也可以通过单击自定义颜色工具打开拾色器来使用自定义链接颜色。

您还可以使用 FSE 更改悬停链接颜色。这意味着当有人将鼠标悬停在链接上时，链接颜色将发生变化。

首先，您需要从顶部切换到“悬停”选项卡。

在那里，您可以选择默认或自定义颜色来更改悬停链接颜色。

最后，单击“保存”按钮以存储您的设置。

如何在WordPress中更改管理员配色方案

如果需要，您还可以更改WordPress中的管理员配色方案。如果您希望管理仪表板与您网站的品牌相匹配或使用您喜欢的颜色，则此方法会很有帮助。

但是，请记住，更改WordPress仪表板的配色方案不会影响您网站的可见部分。

要更改管理员配色方案，只需从管理员侧边栏访问用户 » 个人资料页面。

您将在“管理员配色方案”选项旁边看到多个配色方案。

选择您喜欢的那个，然后单击页面底部的“更新配置文件”按钮以保存更改