在WordPress搜索结果页面列出搜索的文章,为了更好的提示用户关键词,我们需要将关键词进行高亮处理。
如何通过js的方法来实现搜素关键词高亮呢?
需要一个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()
是小工具的搜索值,你可以根据自己主题获取。