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

投稿   Monicfenga的博客  2018-07-31 07:14:10  216 人阅读  26 条评论

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

WordPress 文章中突出显示文本步骤

1、登录您的 WordPress 网站,在发布文章或编辑文章的时候,点击编辑器右侧的“文本”选项卡切换把编辑器切换到文本编辑模式,如下图所示:

如何在WordPress文章中突出显示文本? WordPress 第1张

2、切换到文本视图后我们就可以在文章中直接添加和编辑 HTML,现在,在编辑器中找到想要突出显示的文本,并在其之前添加<mark>,之后添加</mark>,如下图所示:

如何在WordPress文章中突出显示文本? WordPress 第2张

3、添加 HTML 后,点击“可视化”选项卡切换回可视化编辑器,您将看到文本刚才选定的文本已经被突出显示了。然后,点击更新/发布文章后,我们就可以在前端看到该篇文章被选定的文字已经被突出显示了。

如何在WordPress文章中突出显示文本? WordPress 第3张

特别说明:

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

为什么添加mark 之后就能突出显示文本?

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

将该功能集成到编辑器里

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

  1. function add_mark_button() {
  2. if (wp_script_is('quicktags')){
  3. ?>
  4. <script type="text/javascript">
  5. QTags.addButton( 'mark', '突出显示', '<mark>', '</mark>' );
  6. </script>
  7. <?php
  8. }
  9. }
  10. add_action( 'admin_print_footer_scripts', 'add_mark_button' );

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

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

结语

由于 HTML5 中添加了<mark>标记元素,因此在网站上突出显示文本非常容易。即使这是您第一次使用 HTML,但输入这些字符以突出显示网站上的任何文本都没有问题。

英文原文:https://www.competethemes.com/blog/highlight-text-wordpress/

历史上的今天:

文章标签: ,   ,  
原文地址:http://mf.dongguoshare.com/highlight-text-wordpress/
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 Monicfenga的博客 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
Monicfenga的博客

相关文章 分类热门分类热评最新问答

 发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

  1. 唯心寒辞
    唯心寒辞 @回复

    这个挺不错的,学习了 [吃瓜]

  2. 久伴
    久伴 @回复

    感谢分享 [吃瓜]

  3. 青山
    青山 @回复

    让人看得时候直接找到重点,挺好的

  4. iGuanren
    iGuanren @回复

    还是要靠编辑器

  5. 千眼网
    千眼网 @回复

    刚好有这个需求,感谢了!

  6. 闲鱼
    闲鱼 @回复

    一般都是用css弄的,这个学习了

  7. nice
    nice @回复

    文本颜色也很方便

  8. 异星软件空间
    异星软件空间 @回复

    学习📚🙇了!

  9. 涂红伟
    涂红伟 @回复

    这种方法实现比较简单。

  10. 梁兴健
    梁兴健 @回复

    说到底还是考研我们对标签和css的运用啊 [中国赞]

  11. JedBit
    JedBit @回复

    整合到编辑器后确实非常方便了!

  12. 靠谱学生兼职网
    靠谱学生兼职网 @回复

    希望ZB的方法也是一样的

  13. 网站建设
    网站建设 @回复

    挺好的 [嘻嘻] [嘻嘻] [嘻嘻]

  14. 趣知识
    趣知识 @回复

    我很郁闷的是,现在编辑框无法用富文本方式

  15. 区块链
    区块链 @回复

    [吃惊] 挺棒。

  16. 手机赚钱
    手机赚钱 @回复

    我一般用颜色

  17. worthpin
    worthpin @回复

    要突出表示,这个方法太多了呀。

  18. 福利
    福利 @回复

    学习 不用改CSS好评

  19. 明月登楼
    明月登楼 @回复

    这个是HTML5特有的呀!还以为是自定义CSS呢?

    • Monicfenga
      Monicfenga 作者回复2018-07-31 09:02  回复

      @明月登楼自定义CSS应该也能做到类似的效果(像是),但HTML5更加直接和简单(像是)
      并且现在HTML5是主流,现代浏览器都兼容,所以就不用“大费周折”了。

  20. 99八十一
    99八十一 @回复

    直接集成到编辑器更方便。