WordPress搜索结果高亮显示代码版

2018年7月4日20:12:55 发表评论 1,070
摘要

通过把wordpress搜索结果页面里的搜索关键词高亮显示,可以便于用户在搜索结果页面查找与自己搜索关键词相关的搜索结果,极大地提高了网站的用户体验。实现的方法非常简单,无需安装任何插件,仅需要在当前主题functions.php文件添加相关的函数代码,然后根据嵌套标签调整CSS样式即可。实现效果看截图。

通过把wordpress搜索结果页面里的搜索关键词高亮显示,可以便于用户在搜索结果页面查找与自己搜索关键词相关的搜索结果,极大地提高了网站的用户体验。实现的方法非常简单,无需安装任何插件,仅需要在当前主题functions.php文件添加相关的函数代码,然后根据嵌套标签调整CSS样式即可。实现效果看截图。

效果

WordPress搜索结果高亮显示代码版

代码

  1. function search_word_replace($buffer){
  2. if(is_search()){
  3.     $arr = explode(" ", get_search_query());
  4.     $arr = array_unique($arr);
  5.     foreach($arr as $v)
  6.     if($v)
  7.         $buffer = preg_replace("/(".$v.")/i""<strong style='background-color: #ffe0008f;padding: 1px 5px;'>$1</strong>"$buffer);
  8.     }
  9.         return $buffer;
  10. }
  11. add_filter("the_title""search_word_replace", 200);
  12. add_filter("the_excerpt""search_word_replace", 200);
  13. add_filter("the_content""search_word_replace", 200);

给它结果页面的搜索关键词嵌套了strong加粗标签(如想嵌套其它如em、b、span标签请修改以上代码中的$1),然后可以通过css对标签的样式进行调整(加颜色、下划线等)

阿里云新用户优惠
倾尘SEO
阿里云新用户优惠

发表评论

您必须才能发表评论!