分享
也是一种美德

WordPress搜索关键词高亮显示实现代码

首先把第一段代码放在functions.php中:

function hls_set_query() { 
$query = attribute_escape(get_search_query()); 
if(strlen($query) > 0){ 
echo ' 
 
'; 
} 
} 
function hls_init_jquery() { 
wp_enqueue_script('jquery'); 
} 
add_action('init', 'hls_init_jquery'); 
add_action('wp_print_scripts', 'hls_set_query');

然后将下面的代码放在header.php中,就OK了。

<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>

 

赞(0) 打赏
未经允许不得转载:宇峰博客 » WordPress搜索关键词高亮显示实现代码
分享到: 更多 (0)

评论 抢沙发

宇峰博客 分享也是一种美德

我的微博我的博客

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏