4条评论首页 » WordPress » 如何通过jQuery高亮搜索关键词

如何通过jQuery高亮搜索关键词

高亮搜索关键词是一种有效优化 WordPress 搜索结果页面的方法，我在网络上看到了一些实现这个功能的方法，但是我没找到一种同时高亮标题和文章内容的方法，今天我将带给你这种在 WordPress 博客的搜索结果页面上同时高亮标题和内容的技巧。

修改

1.复制粘贴以下代码到你的 functions.php 文件

function hls_set_query() {
  $query  = attribute_escape(get_search_query());
 
  if(strlen($query) > 0){
    echo '
      <script type="text/javascript">
        var hls_query  = "'.$query.'";
      </script>
    ';
  }
}
 
function hls_init_jquery() {
  wp_enqueue_script('jquery');
}
 
add_action('init', 'hls_init_jquery');
add_action('wp_print_scripts', 'hls_set_query');

2.复制粘贴一下代码到你当前主题的 header.php 文件 (在</header> 标签前)

 <style type="text/css" media="screen">
    .hls { background: #D3E18A; }
  </style>
  <script type="text/javascript">
  jQuery.fn.extend({
    highlight: function(search, insensitive, hls_class){
      var regex = new RegExp("(<[^>]*>)|(\\b"+ search.replace(/([-.*+?^${}()|[\]\/\\])/g,"\\$1") +")", insensitive ? "ig" : "g");
      return this.html(this.html().replace(regex, function(a, b, c){
        return (a.charAt(0) == "<") ? a : "<strong class=\""+ hls_class +"\">" + c + "</strong>";
      }));
    }
  });
  jQuery(document).ready(function($){
    if(typeof(hls_query) != 'undefined'){
      $("#post-area").highlight(hls_query, 1, "hls");
    }
  });
  </script>

3.非常重要: 接下来请确保改换”post-area”(第二步中)为你要显示高亮搜索结果的区域的 html ID 标签。

4.选项: 你同样可改变高亮显示的外观通过修改在第二步中“.hls” 标签的CSS样式。