如何在 WordPress 文章中突出显示文本

来源,作者:Ben Sibley

正如您发现的那样,WordPress 在文章编辑器中没有突出显示选项。 但是,有一种非常简单的方法可以突出显示文本,而不需要任何新的插件或更新。
在本教程中,您将学习一种快速的方法,在文章编辑器中突出显示像这样的文本

如何突出文字

第一步是登录到您的网站,然后导航到您想要突出显示的文本的文章或页面。
到那里后,找到并单击编辑器右上方的 “文本” 选项卡。
切换到文本视图可让您在文章中添加和编辑 HTML。 如果您不知道什么是 HTML,请不要担心——稍后我会讲到的。
现在,在编辑器中找到想要突出显示的文本,并在其之前添加<mark>,之后添加</mark>,如下所示:

添加 HTML 后,切换回文章编辑器的 “可视化” 选项卡。您将看到文本被突出显示。
然后,您可以更新/发布文章,突出显示的文本将显示在文章中。

这是如何工作的呢?

在上面的步骤中,您已向该文章添加了一个 HTML 元素。 更具体地说,你已经将一些文本放入 “标记” 元素中。
标记元素存在用于标记应该突出显示的文本。 您的浏览器然后看到标记元素,并对其进行设置。 这就是文字突出显示的原因。
虽然不是每个浏览器都以相同的方式设置标记元素,但每个文本都清晰地突出显示。

特别说明:
如果 WordPress 站点所启用的主题没有对这个 mark 设定过,那么具体突出显示的样式就会跟浏览器有关,所以为了更美观,建议在当前主题的 style.css 文件添加上对这个 mark 的颜色及字体等内容的设置代码。如浏览器默认效果如:突出显示文本默认示例;自定义颜色的突出显示文本效果如:突出显示文本自定义示例


将该功能集成到编辑器里

虽说我们掌握了该技能,但是每次想要使用都要来回切换也着实很复杂,所以,您可以将以下代码添加进您的主题里的 functions.php 文件里:

function add_mark_button() {
if (wp_script_is('quicktags')){
?>
<script type="text/javascript">
QTags.addButton( 'mark', '突出显示', '<mark>', '</mark>' );
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'add_mark_button' );

这样,您仅需以下步骤便可添加 “突出显示” 效果:

  1. 选择想要突出的文字
  2. 点击 “文本”(会保持您已选择的文字)
  3. 点击 “突出显示” 按钮即可

结语

由于 HTML5 中添加了<mark> 标记元素,因此在网站上突出显示文本非常容易。
即使这是您第一次使用 HTML,但输入这些字符以突出显示网站上的任何文本都没有问题。 如果您想了解更多关于 HTML 的知识,请参阅 W3School 的 HTML 教程
如果您对本文有任何疑问或意见,请在下面的评论区域留言。