如何在 WordPress 中更改链接颜色:简单教程

已发表: 2022-01-12

这是事实:

默认的蓝色超链接颜色已经变得陈旧乏味。 另外,它存在于数百万个网站上,这并不意味着它是独一无二的。

如果您想增加一点趣味并希望您的网站看起来与众不同,那么更改链接的颜色可能是个好主意。

本教程将向您展示如何使用四种不同的方法更改 WordPress 中的链接颜色

让我们开始吧!

⚠️在继续之前……

在本文中,您将找到几种以全局方式(整个网站)和单独方式(在单个页面上)调整链接颜色的方法。

我们将在每个标题的末尾添加指示符( GlobalIndividual ),以便您轻松判断方法是 Global 还是 Individual。


方法一:使用 WordPress 定制器(全球)

我们将在本节中向您展示如何使用 WordPress 定制器更改 WordPress 中的超链接颜色。 它快速、简单,您可以实时查看更改。

要记住的一件事是,此选项不适用于所有 WordPress 主题。

如果您的主题没有此功能,您可以按照其他方法!

对于这个例子,我们将使用Blocksy 主题

话虽如此,步骤如下:

第 1 步:从 WordPress 面板转到“外观 > 自定义”

WordPress 自定义按钮

第 2 步:从此处转到“颜色”选项卡。

第 3 步:“全局颜色”部分下,您可以看到“链接”选项。 在这里您可以选择两种颜色,一种用于默认链接颜色,另一种用于悬停颜色。

块状颜色设置

第 4 步:单击圆圈并使用弹出的调色板,选择所需的颜色。

第 5 步:点击顶部的“发布”按钮。


方法二:使用 CSS 代码(全局)

现在,我们将向您展示如何使用 CSS (层叠样式表)更改 WordPress 中的链接颜色。

CSS 是一种样式表语言,可让您更改网站上元素的样式和设计

它非常强大且易于使用!

📝注意

您可以将此方法应用于几乎任何主题。

这是您需要做的:

第 1 步:从 WordPress 侧边栏中转到“外观 > 自定义” 。 从 WordPress 定制器中,选择“附加 CSS”选项。

WordPress 定制器核心设置

第 2 步:转到此 Google 网址。

从这里选择要用于链接的颜色,然后复制十六进制代码(以“#”开头)

谷歌颜色选择器工具

第 3 步:在 Additional CSS 工具中添加此代码:

 a { color: paste the hex code here ; }
在 WordPress 附加 CSS 工具中将颜色十六进制代码 #0511FF 添加到网站链接

第 4 步:现在,如果要更改悬停颜色,只需在附加 CSS 工具中添加此代码以及所需的十六进制颜色。 (您可以将它添加到您之前添加的第一段代码的下方。)。

 a:hover { color: paste the hex code here ; }
在 WordPress 附加 CSS 工具中将颜色十六进制代码 #7bff00 添加到网站悬停链接

第 5 步:点击顶部的“发布”按钮。


方法 3:使用页面构建器(全局/个人)

如果您想知道如何更改 WordPress 中的默认链接颜色并且您的主题没有该功能,或者您只是不想弄乱代码,那么页面构建器是您的最佳选择。

下面给出了两个流行的页面构建器的步骤。

Elementor 页面构建器(全球)

Elementor 是一个易于使用的可视化页面构建器,可让您构建和自定义网站的每个部分。

⚡ 还要检查:如何在 WordPress 中编辑页脚

步骤是:

第 1 步:从您的 WordPress 管理员打开一个页面,然后单击“使用 Elementor 编辑”

第2步:一旦Elementor打开,点击左上角的三行。 从那里,选择“站点设置”选项。

元素设置

第 3 步:从此处导航到“排版”部分。

Elementor 网站设置

第 4 步:“排版”部分中,向下滚动到“链接”标题。 从那里你可以调整颜色。

Elementor 排版设置

第5步:完成后,点击底部的“更新”按钮。

Divi Page Builder(个人)

在本节中,您将了解如何使用 Divi 在 WordPress 中更改链接颜色。

Divi Builder 是一款高级、简单、快速的页面构建器,可帮助您在几分钟内创建出令人惊叹的设计。 使用 Divi Builder,您可以调整各个链接的颜色。

⚡ 还要检查:如何编辑 WordPress 主页

您可以这样做:

第 1 步:创建一个新页面并使用 Divi Builder 对其进行编辑。

第 2 步:在 Divi Builder 中,选择要添加链接的文本。

第 3 步:从弹出的菜单中,单击超链接图标。 在弹出的栏中输入 URL。

Divi 添加链接按钮

第 4 步:现在您将看到默认的蓝色链接颜色。 要更改它,请单击油漆桶图标(右起第二个)。

Divi 添加链接颜色按钮

第5步:这将打开一个调色板,您可以使用它调整链接颜色。

Divi 链接颜色选择器工具

📝注意

您还可以使用新的 Divi 全球颜色系统为您的链接设置站点范围的颜色。


方法 4:使用古腾堡(个人)

Gutenberg 是 WordPress 的默认编辑系统,在过去几年中广受欢迎。 如果您是 Gutenberg 的狂热用户,那么本节适合您。

步骤如下:

第 1 步:使用 Gutenberg 打开帖子/页面并选择一些文本。 使用超链接图标添加指向它的链接

第 2 步:选择链接文本后,单击链接图标旁边的下拉箭头。 从这里,选择“文本颜色”选项。

WordPress 古腾堡文本颜色按钮

第 3 步:打开 WordPress 的颜色选择器,您可以使用它为选定的文本设置自定义颜色。

WordPress 古腾堡文本颜色选项

第四步:点击右上角的“更新”按钮。


结论:如何在 WordPress 中更改链接颜色

这总结了我们在 WordPress 中更改链接颜色的四种最喜欢的方法。

我们通过 WordPress 定制器、添加自定义 CSS 代码、使用 Elementor 和 Divi 等页面构建器以及使用 WordPress Gutenberg 编辑器来更改颜色。

我们推荐的方法是使用定制器,但其他三种方法也很好且可靠!

这就是本文的内容,非常感谢您的阅读!

如何在 WordPress 中更改链接颜色 – 常见问题


🔔还检查:

  • 如何在 WordPress 中对齐文本
  • 如何在 WordPress 页面中添加博客文章
  • WordPress:如何删除“留下回复”
  • 如何编辑 WordPress 网站?
  • 如何制作网络漫画网站
  • 如何在 WordPress 中编辑页脚
  • 如何编辑 WordPress 主页
  • 为什么 WordPress 这么难用?
  • WordPress 可视化编辑器不工作