0

0

如何更改 WordPress 中的文本颜色(4 个简单方法)

冰川箭仙

冰川箭仙

发布时间:2025-05-18 13:56:01

|

854人浏览过

|

来源于php中文网

原创

您想更改 wordpress 中的文本颜色吗?

颜色可以吸引人们对页面最重要内容的注意力,并增强网站的品牌形象。更改文本颜色还可以使您的网站更易于阅读,特别是对于有视力相关问题的人来说。

在本指南中,我们将向您展示如何轻松更改 WordPress 网站上的文本颜色。

如何更改 WordPress 中的文本颜色(4 个简单方法)

为什么要更改 WordPress 中的文本颜色?

您可能想要更改 WordPress 中的文本颜色的原因有很多。也许您想在着陆页上突出显示号召性用语,或者您想在网站上使用彩色副标题。

有时,您甚至可能想更改整个网站的文本颜色。例如,也许您的 WordPress 主题使用灰色字体颜色,但您更喜欢使用黑色,以便与背景颜色形成更好的对比。

您还可以使用颜色来激发访客的情绪。例如,许多人认为蓝色能带来信任和可靠的感觉。要了解更多信息,请参阅我们的指南,了解如何为您的 WordPress 网站选择完美的配色方案。

也就是说,让我们看看如何更改 WordPress 中的文本颜色。只需使用下面的链接跳转到您喜欢的方法:

  • 方法 1:使用可视化编辑器(最适合少量文本)
  • 方法 2:使用主题定制器(更改您的整个网站)
  • 方法 3:使用 CSS 代码更改文本颜色(推荐)
  • 方法 4:使用页面生成器更改文本颜色(最适合登陆页面)

方法 1:使用可视化编辑器(最适合少量文本)

如果您只想更改帖子中的几个单词、一个段落或一个标题,那么您可以使用WordPress 内容编辑器。

首先,打开您想要更改文本颜色或创建新页面的帖子或页面。

如果尚未输入,请输入您要自定义的文本。根据文本,您可能需要添加段落、标题或其他接受文本的块。如需这方面的帮助,请查看我们有关如何使用 WordPress 块编辑器的指南。

一旦你有了一些文本,你就可以改变它的颜色了。

更改块的文本颜色

对于第一个示例,我们将更改整个块的文本颜色。这是突出显示整个内容部分(例如整个段落)的好方法。

只需单击该块,然后选择右侧菜单中的“块”选项卡即可。

如何更改 WordPress 中的文本颜色(4 个简单方法)

完成此操作后,找到“颜色”部分并单击“文本”。

可视化编辑器现在将显示一些与您的WordPress 主题相得益彰的颜色。您只需单击任何颜色即可更改该块内的所有文本。

如何更改 WordPress 中的文本颜色(4 个简单方法)

要使用不同的颜色,只需单击弹出窗口顶部的框即可。

这将打开一个选择器,您可以在其中选择新的字体颜色。

如何更改 WordPress 中的文本颜色(4 个简单方法)

另一种选择是输入十六进制代码,它是特定颜色的 HTML 代码。如果您想使用非常特定的颜色(例如网站徽标中的红色阴影),这非常有用。

如果您不确定要使用什么十六进制代码,那么查看HTML 颜色代码等网站可能会有所帮助。在这里,您可以探索不同的颜色并获取它们的十六进制代码。

获得代码后,将其粘贴或键入到“十六进制”框中。

如何更改 WordPress 中的文本颜色(4 个简单方法)

如果您改变主意并想要恢复默认文本颜色,只需单击右侧菜单中的虚线按钮即可。

您看到的选项会有所不同,具体取决于您是否还更改了块的背景颜色,因此您可能需要单击“文本”或“全部重置”。

如何更改 WordPress 中的文本颜色(4 个简单方法)

更改单词或短语的文本颜色

有时,您可能只想更改特定单词、短语或句子的颜色,例如销售页面上的号召性用语。

为此,只需在 WordPress 块编辑器中突出显示要更改的单词或短语即可。然后,单击内容编辑器工具栏上的向下小箭头,然后单击“突出显示”。

如何更改 WordPress 中的文本颜色(4 个简单方法)

这将打开一个弹出窗口,显示一些与您当前主题相匹配的颜色。

您还可以手动选择颜色,甚至可以按照上述相同过程使用十六进制代码。

如何更改 WordPress 中的文本颜色(4 个简单方法)

方法 2:使用主题定制器(更改您的整个网站)

颜色可以吸引人们对页面最重要内容的注意,但大量不同的颜色可能会让人不知所措。考虑到这一点,您通常会希望在WordPress 网站的大部分内容中使用相同的文本颜色。

使用块编辑器手动更改每个页面和帖子将需要很长时间,因此我们建议使用主题定制器更改主题本身。

首先,请转到外观»自定义

如何更改 WordPress 中的文本颜色(4 个简单方法)

您现在需要找到主题的文本设置。每个主题都不同,但您通常需要寻找“排版”选项。

在我们的图像中,我们使用的是OceanWP。

如何更改 WordPress 中的文本颜色(4 个简单方法)

继续并单击“版式”或类似设置。此时,您通常会看到主题中使用的所有不同类型的文本,例如标题 1 和页面标题。

要更改帖子和页面中的文本,请单击“正文”或类似部分。

如何更改 WordPress 中的文本颜色(4 个简单方法)

要自定义文本颜色,请找到“字体颜色”部分。

然后,单击“选择颜色”。

如何更改 WordPress 中的文本颜色(4 个简单方法)

这将打开选择器。您可以使用一种现成的颜色,使用设置选择一种新颜色,或者输入十六进制代码。

如果您想随时恢复主题的默认颜色,只需单击“默认”即可。

如何更改 WordPress 中的文本颜色(4 个简单方法)

您还可以使用这些设置来更改字体大小、样式、字母间距等。

如果您对文本的外观感到满意,请单击屏幕顶部的“发布”按钮。

如何使用完整站点编辑器更改文本颜色

如果您使用的是基于块的主题,例如ThemeIsle Hestia Pro或 Twenty Twenty-Three,则更改主题文本颜色的过程会略有不同。

要使用完整站点编辑器自定义文本,请转到主题 » 编辑器

如何更改 WordPress 中的文本颜色(4 个简单方法)

默认情况下,完整站点编辑器显示主题的主模板,但您可以更改任何模板的文本颜色。

要查看所有可用选项,只需选择“模板”、“图案”或“页​​面”。

如何更改 WordPress 中的文本颜色(4 个简单方法)

现在,您可以单击要更改默认字体颜色的模板、模板部分或页面。

WordPress 现在将显示设计的预览。要继续编辑此模板,请单击小铅笔图标。

如何更改 WordPress 中的文本颜色(4 个简单方法)

在 WordPress 编辑器中,单击以选择要更改文本颜色的块。例如,您需要选择标题块才能更改标题颜色。

您看到的选项可能会根据您选择的块而有所不同。但是,您通常会在右侧菜单中看到一些“颜色”设置。

如何更改 WordPress 中的文本颜色(4 个简单方法)

您现在可以单击此设置并从出现的弹出窗口中选择一种新颜色。

当您对所做的更改感到满意时,只需单击“保存”按钮即可。现在,如果您访问任何使用此模板的页面,您将看到新的文本颜色。

方法 3:使用 CSS 代码更改文本颜色(推荐)

根据您的主题,可能无法使用定制器菜单更改整个网站的文本。一种选择是使用本文中的方法之一手动更改每段文本。然而,这需要花费大量的时间和精力。

好消息是您可以通过添加自定义 CSS来自定义整个站点的文本。更好的是,此方法允许您为特定类型的文本定义不同的颜色,例如标题 1 (h1) 或段落文本 (p)。

由于 WordPress 主题编辑和自定义可能会因主题而异,因此我们建议使用WPCode将自定义 CSS 添加到您的网站。

2088shop商城购物系统
2088shop商城购物系统

2088shop商城购物系统是商城系统中功能最全的一个版本:非会员购物、商品无限级分类、不限商品数量、商品多级会员定价、上货库存、Word在线编辑器、订单详情销售报表、商品评论、留言簿、管理员多级别、VIP积分、会员注册积分奖励、智能新闻发布、滚动公告、投票调查、背景图片颜色更换、店标上传、版权联系方式修改、背景音乐(好歌不断)、广告图片支持Flash、弹出浮动广告、搜索引擎关健词优化、图文友情联

下载

WPCode 是超过 100 万个 WordPress 网站使用的最佳代码片段插件。它可以轻松添加自定义 CSS、PHP、HTML 等,而无需编辑任何核心 WordPress 文件。

您需要做的第一件事是安装并激活 免费的 WPCode 插件。有关更多详细信息,请参阅我们有关如何安装 WordPress 插件的分步指南 。

激活后,转到代码片段»添加片段

如何更改 WordPress 中的文本颜色(4 个简单方法)

在这里,您将看到可以添加到网站的所有现成的 WPCode 片段。其中包括一个片段,允许您 完全禁用评论、上传 WordPress 通常不支持的文件类型、 禁用附件页面等等。

只需将鼠标悬停在“添加您的自定义代码”上,然后在出现“使用代码片段”时选择它。

如何更改 WordPress 中的文本颜色(4 个简单方法)

首先,输入自定义代码片段的标题。这可以是任何可以帮助您识别 WordPress 仪表板中的代码片段的内容。

之后,打开“代码类型”下拉列表并选择“CSS 片段”。

如何更改 WordPress 中的文本颜色(4 个简单方法)

接下来,您可以将自定义 CSS 添加到小型代码编辑器中。您需要输入要自定义的文本类型的选择器,然后输入要使用的颜色的十六进制代码。

例如,您可以通过添加以下内容来更改段落文本的颜色:

如何更改 WordPress 中的文本颜色(4 个简单方法)

如果您不确定要使用什么十六进制代码,那么您可以使用HTML 颜色代码等网站。

如果您对代码片段感到满意,请滚动到“插入”部分。WPCode 可以将 CSS 添加到不同的位置,例如在每个帖子之后、仅前端或仅管理。

要更改整个WordPress 博客的文本,请单击“自动插入”(如果尚未选择)。然后,打开“位置”下拉菜单并选择“站点宽标题”。

如何更改 WordPress 中的文本颜色(4 个简单方法)

完成此操作后,滚动到屏幕顶部并单击“非活动”切换按钮,使其更改为“活动”。

最后,单击“保存片段”以使 CSS 片段生效。

如何更改 WordPress 中的文本颜色(4 个简单方法)

现在,如果您访问您的网站,您将看到实时的自定义文本。

如果您想在任何时候使用不同的文本颜色或只是向该片段添加更多 CSS,则只需转到代码片段» 代码片段。在这里,将鼠标悬停在刚刚创建的代码片段上,然后在出现时单击“编辑”。

如何更改 WordPress 中的文本颜色(4 个简单方法)

您现在可以编辑代码片段以使用新颜色,然后单击“保存代码片段”以使更改在您的网站上生效。

方法 4:使用页面生成器更改文本颜色(最适合登陆页面)

很多时候,您会希望您的目标网页和销售页面看起来与网站的其他部分不同。这使它们脱颖而出,可以为您带来更多转化。

如果您想更改登陆或销售页面的文本颜色,那么我们建议使用SeedProd。它是 WordPress最好的登陆页面插件 ,并且具有易于使用的拖放页面构建器。

SeedProd 附带 90 多个块,您只需将它们拖放到布局上即可。然后,您可以通过多种不同的方式微调这些块,包括更改文本颜色。

如果您使用自定义页面来获得更多转化,那么 SeedProd 可以与您可能已经在使用的许多流行的第三方工具配合使用来管理转化。

其中包括顶级电子邮件营销服务、  WooCommerce、  Google Analytics等。

首先,您需要安装并激活 SeedProd。有关更多详细信息,请参阅我们有关如何安装 WordPress 插件的分步指南 。

注意:  SeedProd还有一个 免费版本 ,允许您创建自定义主页、登录页面等。然而,在本指南中,我们将使用 SeedProd Pro,因为它有更多的模板和高级块。

激活插件后,SeedProd 将要求您提供许可证密钥。

如何更改 WordPress 中的文本颜色(4 个简单方法)

 您可以在SeedProd 网站上的帐户中找到此信息 。输入许可证密钥后,继续并单击“验证密钥”按钮。

接下来,您需要访问 SeedProd » Pages 并单击“添加新登陆页面”按钮。

如何更改 WordPress 中的文本颜色(4 个简单方法)

之后,是时候选择一个模板了。SeedProd 拥有 180 多个专业设计的模板,您可以使用自己的图像、文本、颜色等进行自定义。

要选择模板,只需将鼠标悬停在其上,然后单击“复选标记”图标即可。

如何更改 WordPress 中的文本颜色(4 个简单方法)

我们在所有图像中使用“Juicy Sales Page”模板,但您可以使用任何设计。

接下来,继续输入自定义页面的名称。SeedProd 将根据页面标题自动创建一个 URL,但您可以将此 URL 更改为您想要的任何内容。

为了帮助搜索引擎了解页面的内容,您可能需要添加一些相关的关键字。这可以提高您的WordPress SEO。

当您对输入的信息感到满意时,请单击“保存并开始编辑页面”按钮。

如何更改 WordPress 中的文本颜色(4 个简单方法)

接下来,您将进入 SeedProd 拖放页面构建器,您可以在其中自定义模板。

SeedProd 编辑器在右侧显示设计的实时预览,在左侧显示一些块设置。

如何更改 WordPress 中的文本颜色(4 个简单方法)

左侧菜单还包含可以拖动到布局上的块。

例如,您可以拖放按钮和图像等标准块,或使用倒计时器、动画标题、社交共享按钮等高级块。

如何更改 WordPress 中的文本颜色(4 个简单方法)

SeedProd 还附带“部分”,它们是经常一起使用的块的集合。例如,SeedProd 有标题、英雄图片、号召性用语、感言、 联系表单、 常见问题解答、功能、页脚部分等。这可以帮助您快速创建专业设计的页面。

要查看不同的部分,只需单击“部分”选项卡即可。要预览任何部分,请将鼠标悬停在其上,然后单击放大镜图标。

如何更改 WordPress 中的文本颜色(4 个简单方法)

要将该部分添加到您的设计中,只需单击“选择此部分”即可。

这会将该部分添加到页面底部。

如何更改 WordPress 中的文本颜色(4 个简单方法)

您可以使用拖放功能在布局中移动部分和块。

要自定义块,只需在布局中单击将其选中即可。左侧菜单现在将显示可用于配置该块的所有设置。

如何更改 WordPress 中的文本颜色(4 个简单方法)

要更改文本颜色,只需单击任何包含文本的块即可。

在左侧菜单中,选择“高级”选项卡。在“样式”下,点击“颜色”。

如何更改 WordPress 中的文本颜色(4 个简单方法)

这将打开一个弹出窗口,您可以在其中选择新的文本颜色。

另一种选择是在“十六进制”字段中输入十六进制代码。

如何更改 WordPress 中的文本颜色(4 个简单方法)

现在,您只需按照上述相同的过程即可更改任何其他块的文本颜色。

当您对页面的外观感到满意时,就可以通过单击“保存”按钮来发布它。然后,选择“发布”。

如何更改 WordPress 中的文本颜色(4 个简单方法)

如果您访问在线商店、博客或网站,您将看到正在运行的新页面,并带有您的自定义文本颜色。

我们希望本教程能帮助您学习如何更改 WordPress 中的文本颜色。您可能还喜欢我们关于如何增加博客流量的教程以及我们专家精选的最佳电子邮件营销服务。

相关专题

更多
php文件怎么打开
php文件怎么打开

打开php文件步骤:1、选择文本编辑器;2、在选择的文本编辑器中,创建一个新的文件,并将其保存为.php文件;3、在创建的PHP文件中,编写PHP代码;4、要在本地计算机上运行PHP文件,需要设置一个服务器环境;5、安装服务器环境后,需要将PHP文件放入服务器目录中;6、一旦将PHP文件放入服务器目录中,就可以通过浏览器来运行它。

2285

2023.09.01

php怎么取出数组的前几个元素
php怎么取出数组的前几个元素

取出php数组的前几个元素的方法有使用array_slice()函数、使用array_splice()函数、使用循环遍历、使用array_slice()函数和array_values()函数等。本专题为大家提供php数组相关的文章、下载、课程内容,供大家免费下载体验。

1501

2023.10.11

php反序列化失败怎么办
php反序列化失败怎么办

php反序列化失败的解决办法检查序列化数据。检查类定义、检查错误日志、更新PHP版本和应用安全措施等。本专题为大家提供php反序列化相关的文章、下载、课程内容,供大家免费下载体验。

1400

2023.10.11

php怎么连接mssql数据库
php怎么连接mssql数据库

连接方法:1、通过mssql_系列函数;2、通过sqlsrv_系列函数;3、通过odbc方式连接;4、通过PDO方式;5、通过COM方式连接。想了解php怎么连接mssql数据库的详细内容,可以访问下面的文章。

951

2023.10.23

php连接mssql数据库的方法
php连接mssql数据库的方法

php连接mssql数据库的方法有使用PHP的MSSQL扩展、使用PDO等。想了解更多php连接mssql数据库相关内容,可以阅读本专题下面的文章。

1413

2023.10.23

html怎么上传
html怎么上传

html通过使用HTML表单、JavaScript和PHP上传。更多关于html的问题详细请看本专题下面的文章。php中文网欢迎大家前来学习。

1233

2023.11.03

PHP出现乱码怎么解决
PHP出现乱码怎么解决

PHP出现乱码可以通过修改PHP文件头部的字符编码设置、检查PHP文件的编码格式、检查数据库连接设置和检查HTML页面的字符编码设置来解决。更多关于php乱码的问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

1444

2023.11.09

php文件怎么在手机上打开
php文件怎么在手机上打开

php文件在手机上打开需要在手机上搭建一个能够运行php的服务器环境,并将php文件上传到服务器上。再在手机上的浏览器中输入服务器的IP地址或域名,加上php文件的路径,即可打开php文件并查看其内容。更多关于php相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

1304

2023.11.13

java学习网站推荐汇总
java学习网站推荐汇总

本专题整合了java学习网站相关内容,阅读专题下面的文章了解更多详细内容。

6

2026.01.08

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.7万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.8万人学习

CSS教程
CSS教程

共754课时 | 18.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号