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

wordpress的搜索功能很鸡肋,所以我使用google自定义搜索(不要被我现在主题的大Bing搜索框迷惑了,它还是google搜索,我也不打算改了)。
但是完善主题过程中,我在页面底部右边又加了个搜索,这个搜索框直接调用wordpress内置搜索功能。为什么有了google搜索还要加这个呢?因为我想多一种搜索,会更方便别人在你的网站上快速寻找到需要的内容,就像我们用google搜索不到需要的,我们还可以用百度再来搜搜。
但是,既然用了,就要追求完善,有个关键字高亮功能最好了。还好,经过费力寻找,找到了一种简便的方法,我加以扩展,不光有了关键字高亮功能,还有了实现在关键字周围实现截断输出的功能。
在关键字周围实现截断输出
解释一下这个,就如同我们用搜索引擎搜索某个关键字,搜索结果提供的预览并不是任意从这个网页里截取的,而是将包含关键字的一段内容摘要展示给你。你将可以一眼看出这个出现这个关键词的相关描述语句,快速确定是不是自己需要的内容。我要实现的正是此功能。
首先你肯定需要一个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截断函数,就换上试试,但是要注意这个函数要是支持从某一位置开始截断的函数。经过我的测试,发现网上能搜索到的截断函数都有问题,不是只能从头开始截断,就是截断后,后面没有了乱码,但是前面又出现了乱码。我目前用的截断函数是从之前搜到的一个函数修改而来的,效果还行。
最后看一下我改造后的搜索结果页面
你可以在我博客底部右边的搜索框亲自体验(可不是顶部的大bing搜索)。
如果你有更好的建议,欢迎留言交流。
Post url: http://qiqi.boy.im/1h. You can ReTweet This Post.

58 Responses to this post.
Comments (56) Trackbacks (2)[...] Qiqiboy 的 wordpress高亮搜索结果+实现关键字前后截断显示。。。,他用的是 PHP [...]
[...] wordpress高亮搜索结果+实现关键字前后截断显示。。。 [...]