wordpress博客搜索关键词高亮显示实现代码

前端之家收集整理的这篇文章主要介绍了wordpress博客搜索关键词高亮显示实现代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近对wordpress的一些小改进很感兴趣,可以让你的博客更加个性,也更有趣味性,下面的代码可以在结果中高亮你所搜索的关键词。首先把第一段代码放在functions.PHP中: <div class="msgborder" id="phpcode1"> function hls_set_query() { $query = attribute_escape(get_search_query()); if(strlen($query) > 0){ echo ' <script type="text/javascript"> var hls_query = "'.$query.'"; '; } } 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; } <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 : "<h3 class=""+ hls_class +"">" + c + ""; })); } }); jQuery(document).ready(function($){ if(typeof(hls_query) != 'undefined'){ $("#post-area").highlight(hls_query,1,"hls"); } });

原文链接:https://www.f2er.com/wordpress/15368.html

猜你在找的wordpress相关文章