JS方法实现WordPress搜索关键词高亮

在WordPress搜索结果页面列出搜索的文章,为了更好的提示用户关键词,我们需要将关键词进行高亮处理。

如何通过js的方法来实现搜素关键词高亮呢?

JS方法实现WordPress搜索关键词高亮
JS方法实现WordPress搜索关键词高亮

需要一个mark.js的依赖,具体方法如下:

首先需要确保在WordPress主题中引入了jQuery,通过wp_enqueue_script()引入mark.js

// mark.js
wp_enqueue_script('mark.js','https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js',array('jquery'),'8.11.1',true);

将搜索关键词高亮:

// mark.js
if ($('body').hasClass('search-results')) {
  const markText = $('.widget_search .search-field').val()
  $('.search-results').mark(markText);
}

其中$('.widget_search .search-field').val()是小工具的搜索值,你可以根据自己主题获取。

分类 WordPress技巧 本文由 清白之年 原创发布,转载请注明文章来源。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注