如何在WordPress中突出显示文本

正如您可能已经发现的那样,默认情况下,WordPress Classic Editor不会为您提供突出显示文本的选项.从不害怕,在这篇文章中,我们向您展示了如何轻松绕过此缺点.

我们都去过一个网站,看到用彩色背景(通常是黄色)突出显示的文本,如此.

如果您使用的是WordPress块编辑器,则没有问题.该选项在那里.

Highlighted text in the WordPress Block Editor's Paragraph block. 这里是WordPress块编辑器的段落段中的一些突出显示的文本.

但是,在查找WordPress经典编辑器中的亮师选项后,您无疑将空手而归.

并且有一个非常好的原因.在WordPress Classic Editor界面中...

选项不存在!

好消息是,我们有三个简单的解决方案来帮助您克服这一令人沮丧的问题.

一个插件形式,两个通过更多手动方法.

  • 插件方法
  • 手动突出显示WordPress
  • 的文本
  • CSS方法

首先,插件方法

TinyMCE高级

A look at the Tiny MCE plugin for WordPress

tiny mce advanced是一个方便的插件,它为Classic和Gutenberg编辑器添加了高级文本编辑功能.

一个这样的特征是能够在WordPress帖子和页面中突出文本的背景.

要注意的一件事是,更改文本的背景颜色不是一个立即包含在文本编辑工具栏中的选项.

但通过将"背景颜色"拖入主工具栏中,可以在插件的设置中轻松更改,如下所示:

Add the additional text background color option to have the option of highlighting your text

一旦添加到工具栏中的选项,就像选择要突出的文本一样简单,以及您选择的背景颜色.

Using the TinyMCE plugin makes it easy to highlight text in WordPress

手动突出显示WordPress

中的文本

内联样式

您还可以通过将代码添加到文本编辑器中手动突出显示文本.它与在特定代码中突出显示的单词一样简单,如下所示:

<span style="background-color:yellow;"> … your text here … </span>

我们在这里插入了"黄色",但您可以选择您喜欢的颜色,或者使用颜色代码,例如"#ffff00".

例如...

<span style="background-color: #FFFF00;"> … your text here … </span>

哦,如果你想快速轻松地访问颜色代码,那么来自W3Schools.com的方便彩色选择器.

Add a simple shortcode to highlight your inline text in WordPress

内联样式的缺点是,如果您想更改突出显示的颜色,那么您需要返回每个帖子并重新编辑它.

因此,如果要更改所有突出显示的文本实例的突出显示颜色,请使用以下下面的 css方法是要走的方式.

所以让我们打破它.

CSS方法

如果您希望能够轻松更改所有突出显示的文本的颜色,那么您将想要将CSS文件带入解决方案.

首先创建一个新的(和唯一名为的)CSS"类".例如,让我们创建一个名为"突出显示-文本"的一个,然后应用背景颜色.

您所要做的就是在CSS文件中插入以下代码(外观>自定义程序).更好或更好,创建一个子主题并将其添加到子主题中的CSS文件.

.highlight-text { background-color:#FFFF00; }

Add a custom CSS to change the color of ALL your highlighted text

当然,你可以让你喜欢的颜色.

*如果您早先错过了,那么彩色选择器还有一次.

完成此操作后,切换到编辑器中的"文本"视图,并以以下方式包装要突出显示的文本:

add the following code into the text editor to highlight the selected text

现在,当您检查您的直播时,您应该希望看到一些很好的突出显示的文本(Woop Woop!).

A live view of the highlighted text

是你Wordpress Life的"突出显示"?

可能不是...

但嘿,至少现在你有三种简单的突出显示文本.帮助您绕过事实WordPress默认情况下不支持此功能.

如果您有任何与突出显示WordPress中的文本相关的其他方便的提示或方法,请务必让我们知道!

VPS1352主机测评网(www.vps1352.com)
本文链接:https://www.vps1352.com/11811.html

11

发表回复