七月
16

wordpress高亮搜索结果+实现关键字前后截断显示。。。

wordpress的默认搜索,返回的是包含搜索关键字的文章,根据你的search模板的不同,显示或者摘要或者全文内容。你一眼看过去并不能看到你搜索的关键字在哪里,甚至还不在搜索结果展示页面上,因为可能关键字并不在摘要里。而且,如果别人只是在某篇文章里随便提了一下某个词,这篇文章也会出现在搜索结果里,你可能还要费时费力将整篇文章看一篇。所以,wordpress的搜索体验很不友好,希望wordpress团队今后别光整没用的,这些细小的地方也弄弄。AngryI dont knowPumpkin

3

wordpress的搜索功能很鸡肋,所以我使用google自定义搜索(不要被我现在主题的大Bing搜索框迷惑了,它还是google搜索,我也不打算改了)。

但是完善主题过程中,我在页面底部右边又加了个搜索,这个搜索框直接调用wordpress内置搜索功能。为什么有了google搜索还要加这个呢?因为我想多一种搜索,会更方便别人在你的网站上快速寻找到需要的内容,就像我们用google搜索不到需要的,我们还可以用百度再来搜搜。

但是,既然用了,就要追求完善,有个关键字高亮功能最好了。还好,经过费力寻找,找到了一种简便的方法,我加以扩展,不光有了关键字高亮功能,还有了实现在关键字周围实现截断输出的功能。

在关键字周围实现截断输出

1解释一下这个,就如同我们用搜索引擎搜索某个关键字,搜索结果提供的预览并不是任意从这个网页里截取的,而是将包含关键字的一段内容摘要展示给你。你将可以一眼看出这个出现这个关键词的相关描述语句,快速确定是不是自己需要的内容。我要实现的正是此功能。

首先你肯定需要一个search.php模板,这样wordpress才知道去调用这个模板来展示搜索结果。search模板的文章调用形式和index等页面差不多,也有一个主循环,我们就在这个主循环里加上这个代码

 

<?php
    $title = get_the_title();
    $content = strip_tags(get_the_content());
    $keys = explode(" ",$s);
    $title = preg_replace('/('.implode('|', $keys) .')/iu','<span style="color:#CC0033;text-decoration:underline;">\0</span>',$title);
    $content = preg_replace('/('.implode('|', $keys) .')/iu','<span style="color:#CC0033;text-decoration:underline;">\0</span>',$content);
    $pos = strpos($content,$keys[0],1);
    if($pos&&$pos>80){//如果搜索关键字位置有了返回值,且大于70
        $content = substr($content,pos-70,600);//substr会出现乱码,
    }else{
        $content = substr($content,0,500);
    }
?>

 

我就在这儿解释一下吧,原理就是将获取的标题和文章内容中匹配的关键字进行替换,加上相应格式。接下来就是定义格式了,就像你定义一篇文章内容时那样输出就行了,只不过将原先的函数如下替换即可

<?php the_title(); ?>  =>  <?php echo $title; ?>
 
<?php the_content(); ?>或者<?php the_excerpt(); ?>  =>  <?php echo "...".$content."..."; ?>
$pos = strpos($content,$keys[0],1);

这句代码是返回搜索关键字在目标内容中出现的第一次出现的位置。当然,strpos这个函数并不是很准,但是差不多已经够了,因为它是以字节匹配来判断的,所以对于中文字符等多字节文字,如果两个字的前面的字节相同,它也会返回结果,当然,这个是错误的结果,不过大多数情况下都是正确的。我实在是找不到PHP的好用的相关函数,所以只好拿这个将就了。

有了关键字出现的位置,下面就是截断了,当然,截断并不能从关键字出现的位置开始,因为关键字是被前面我们替换的<span>所包围,所以它前面至少还有<span style="color:#CC0033;text-decoration:underline;">这么多字符,所以截断要往前推一点。但是也要防止关键字出现在文章内容很靠前的地方,所以要加个判断。返回值大于某一值,如70个字节,则从这个搜索到的位置开始截断,否则就从头开始截断。

另外要注意的是,代码中截断用的函数是PHP默认函数substr,但是这个函数会产生乱码,如果你有UTF截断函数,就换上试试,但是要注意这个函数要是支持从某一位置开始截断的函数。经过我的测试,发现网上能搜索到的截断函数都有问题,不是只能从头开始截断,就是截断后,后面没有了乱码,但是前面又出现了乱码。我目前用的截断函数是从之前搜到的一个函数修改而来的,效果还行。

最后看一下我改造后的搜索结果页面2

你可以在我博客底部右边的搜索框亲自体验(可不是顶部的大bing搜索)。 4

如果你有更好的建议,欢迎留言交流。

本文标签: , , , ,

分享

本文短网址: http://qiqi.boy.im/1h

这篇文章已经有 60 条评论

Comments (58) Trackbacks (2)
You can leave a response or Trackback this entry .
  1. 阿邙 -#1

    这个功能不错 试试去 嘿嘿

    • QiQiBoY --#1

      @阿邙
      这个方法不是很完美。。有时候会截断标签,导致页面错位。。。不过影响不大。。

  2. 万戈 -#2

    呀呀呀,我被当靶子了,赶紧去加上 :mrgreen:

  3. 丕子 -#3

    哈哈 有用

  4. winy -#4

    我从philna2翻出来的高亮代码,供参考

    /**
    * highlight keywords
    *
    * @param array $keywords
    * @param unknown_type $content
    * @return unknown_type
    */
    function WinyskyHighLightKeyWords( array $keywords, $content ){

    $hightLightColors = array(‘#FFFF00′,’#A0FF40′,’#FFD700′,’#DAA520′,’#60FF00′);

    /* 非法字符 主要是特殊字符 */
    $notAllowed = array(‘$’,'(‘,’)',’*',’+',’.',’?',’[',']‘,’\',’,'^’,'{‘,’}',’|');
    $shouldRemove = array(‘&’,';’,'>’,'$val){
    if(empty($val))
    unset($keywords[$index]);
    if(in_array($val,$shouldRemove))
    unset($keywords[$index]);
    }

    if (empty($keywords)) return $content;

    /* 选择颜色数组索引 */
    $slecet = 0;
    //$c .= ”;
    /*
    开始历遍,每个(种)关键字
    将从颜色集合数据组中选用使用不同的颜色
    注意:
    同一个关键字在文章不同的地方,颜色是相同的
    */
    foreach ($keywords as $keyword) {
    /* 关键字数量大于颜色数组数量时,索引重置 */
    if($slecet >= count($hightLightColors))
    $slecet = 0;
    //$c .= $slecet;
    /* 选择一种颜色 */
    $hightLightColor = $hightLightColors[$slecet];
    /* 累加索引 */
    $slecet++;
    /* 滤过非法字符 必须将这些字符转义 */
    $keyword = wptexturize($keyword);
    $RegExpkeyword = $keyword;
    foreach ($notAllowed as $v){
    $RegExpkeyword = str_replace($v,’\\’.$v,$RegExpkeyword);
    }
    /* 正则表达式(这是替换[高亮]的关键) 不区分大写小写 */
    $RegExp = “/($RegExpkeyword)(?=[^&;]*[&<])/i";
    /* 开始替换 */
    $content = preg_replace($RegExp,'$1′,$content);
    }
    //$c = str_replace(”,”,$c);
    return $content;

    }

    /**
    * highlight WP search keywords
    *
    * @param unknown_type $content
    * @return unknown|unknown|Ambigous
    */
    function WinyskyHighlightWPSearchKeywords($content){
    if(!is_search()) return $content;
    global $wp_query;
    $keywords = $wp_query->query_vars['search_terms'];
    if(empty($keywords)){
    return $content;
    }

    return WinyskyHighLightKeyWords( $keywords, $content );

    }
    add_filter(‘the_excerpt’, ‘WinyskyHighlightWPSearchKeywords’, 100);

    • QiQiBoY --#1

      @winy
      你贴的这个你有修改过吗?试过能用吗?
      我看过他的这篇文章,试用了一下他的方法,无效啊。。。我觉得他的方法应该适用于早期版本wordpress,新版本的wordpress function加载顺序有变,可能不管用了。。这是我的猜测。。哈哈

      PS:你评论贴了这么多代码,直接进垃圾评论了。。。看来我也该用我上一篇文章里的字数限制功能了。。

    • winy --#2

      @winy 我改过一些,试过有用啊,这个就是不用改模板,方便点

    • QiQiBoY --#3

      @winy
      。。。那可能是我什么地方弄错了。。算了。。。他这个方法无论访问哪个页面都要调用一下这个函数。。。。我现在的方法只在搜索时才生效。。。。。反正估计一般大家也不会用我博客底部这个小搜索的。。 :lol:

    • winy --#4

      @QiQiBoY 是的,你的方法更好,但是我更想折腾的是ajax搜索,不想用google的

    • QiQiBoY --#5

      @winy
      哈。。。我正有同感。。。我刚到philna博客转了一圈。。。google也有ajax搜索的API。。但是如何解决ajax搜索后能再返回之前页面是个难题呀。。。。philna这个博客ajax用的很多。。但是体验很差。。。比如你翻页,翻到第四页查看了一篇文章,想点击浏览器返回按钮回到第四页。。。。抱歉,不可能。。只能回到首页。。。。。

    • winy --#6

      @QiQiBoY 按这个方法也许可行
      http://www.ll19.com/for_ajax_history.html
      代码太复杂了

    • winy --#7

      @QiQiBoY 你这个回复按钮在底部,真不习惯,回复我自己了

  5. A.shun -#5

    果然还是Google自定义搜索省心

  6. Dianso -#6

    这个的确有用,一目了然

  7. hzlzh -#7

    效果不错,不过我用了 GG嵌入的自定义搜索足矣,也省的好我的cpu喽。
    今天GR同时看到哦你俩都在谈了这个,呵呵,把老万当试验品啦

  8. zchiy2k -#8

    这个不错,值得看看,支持一下,收藏了~

  9. 竹纤维 -#9

    士大夫的的

  10. 扣扣网 -#10

    博客用的国外的主题吧,呵呵还不错。学习了!

  11. 万戈 -#11

    感谢qiqiboy,用你的方法我已经实现了站内搜索的高亮,比较下来还是你的方法最好
    不过我没有碰到乱码的问题耶

    • QiQiBoY --#1

      @万戈
      乱码是截断函数出现乱码。。。你没用截断吧。。。我这篇文章最主要想说的就是截断,从搜索到的第一个关键词开始截取内容,从而保证搜索到的文章摘要内都会出现关键词。。

    • 万戈 --#2

      @QiQiBoY
      我有用截断啊,你可以去我那里试试

    • QiQiBoY --#3

      @万戈
      你的都是从文章头开始截断的吧。。。你可以在我站立搜一下,我的截断大都是从文章内的第一个关键词开始截断的。。

    • 万戈 --#4

      @QiQiBoY
      恩,对的,为了避免乱码,所以我就从头开始截了~
      另外,现在google搜索挂了,你的站内搜索也杯具鸟~ :!:

    • QiQiBoY --#5

      @万戈
      Google挂了?没呀。。。我这里还是好好的啊。。
      我在北京。。 :lol:

  12. 三石 -#12

    :grin: 也找到这里了,比较了下还是这个方法最好啊,谢谢了

  13. 海天 -#13

    哇 这个东西很不错的啊 下次加上去~

  14. 小罗 -#14

    看来以后要多学习学习了!

  15. 超人 -#15

    我弄上去之后整个一页全是同样的标题同样的文字了。但地址不一样。

  16. 7cbt -#16

    内置 我从没想过, 不过我的没有,我现在也在弄,这个东东很管用。

  17. Bee君 -#17

    最近的都是技术文章啊!高亮这个功能很有用

  18. Bee君 -#18

    主题不支持 Ctrl+Enter 提交评论?

  19. 成叔叔 -#19

    :grin: 表情十分可爱. :!:

  20. 奥德雷的雷人事迹 -#20

    从不用搜索

  1. Wordpress 站内搜索高亮显示关键词

    [...] Qiqiboy 的 wordpress高亮搜索结果+实现关键字前后截断显示。。。,他用的是 PHP [...]

  2. 博客加入若干Ajax效果

    [...] wordpress高亮搜索结果+实现关键字前后截断显示。。。 [...]

Leave a Reply

Hi , say something.

  • :?:
  • :razz:
  • :sad:
  • :evil:
  • :!:
  • :smile:
  • :oops:
  • :grin:
  • :eek:
  • :shock:
  • :???:
  • :cool:
  • :lol:
  • :mad:
  • :twisted:
  • :roll:
  • :wink:
  • :idea:
  • :arrow:
  • :neutral:
  • :cry:
  • :mrgreen: