博华网络科技,点击查看详情

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

最近对wordpress的一些小改进很感兴趣,可以让你的博客更加个性,也更有趣味性,下面的代码可以在结果中高亮你所搜索的关键词。首先把第一段代码放在functions.php中:

  1. function hls_set_query() {
  2. $query = attribute_escape(get_search_query());
  3. if(strlen($query) > 0){
  4. echo ‘
  5. ‘;
  6. }
  7. }
  8. function hls_init_jquery() {
  9. wp_enqueue_script(‘jquery’);
  10. }
  11. add_action(‘init’, ‘hls_init_jquery’);
  12. add_action(‘wp_print_scripts’, ‘hls_set_query’);

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

  1. <style type=“text/css” media=“screen”>
  2.     .hls { background: #D3E18A; }
  3. </style>
  4. <script type=“text/javascript”>
  5.    jQuery.fn.extend({
  6.      highlight: function(search, insensitive, hls_class){
  7.        var regex = new RegExp(“(<[^>]*>)|(\b”+ search.replace(/([-.*+?^${}()|[]/\])/g,“\$1”) +“)”, insensitive ? “ig” : “g”);
  8.        return this.html(this.html().replace(regex, function(a, b, c){
  9.          return (a.charAt(0) == “<“) ? a : “<strong class=””+ hls_class +“”>” + c + “</strong>”;
  10.       }));
  11.      }
  12.    });
  13.    jQuery(document).ready(function($){
  14.     if(typeof(hls_query) != ‘undefined’){
  15.       $(“#post-area”).highlight(hls_query, 1, “hls”);
  16.      }
  17.   });
  18. </script>

人已赞赏
wordpress教程

自定义WordPress上传文件路径及设定独立网址绑定目录

2020-5-22 15:53:35

wordpress教程

WordPress 批量删除所有文章的特色图片

2020-5-22 15:53:52

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索