七月
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. 灵亦 -#21

    有一个主循环,我们就在这个主循环里加上这个代码
    :?:
    可以具体点吗?我不知道怎么加

  2. 似飘若舞 -#22

    555… Warning: strpos() [function.strpos]: Offset not contained in string in H:\xampplite\htdocs\wp3\wp-content\themes\design\search.php on line 12
    本机测试结果……
    第12行就是$pos = strpos($content,$keys[0],1);……
    为什么为什么……

  3. 似飘若舞 -#23

    哦哦……我明白了……
    是因为页面无内容导致的。

  4. zzhblog -#24

    和上面同问,如果搜索“你 ”将会出现
    Warning: strpos() [function.strpos]: Offset not contained in string in
    应该是不能识别空格导致的,请问如何解决呢? :?:

    • QiQiBoY --#1

      @zzhblog
      文本前后出现空格会出现莫名的问题,你可以过滤一下或者避免搜索带前后带空格的关键词。。。关键词中间有空格是可以的

  5. 小众 -#25

    一般主题是这样写 的

    如何实现搜索高亮呢?

  6. 小众 -#26

    一般主题是这样写 的php the_content(‘继续阅读 »’);

    如何实现搜索高亮呢? :idea: 求解

  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: