Home > Technology, WordPress > 高亮搜索结果

高亮搜索结果

前一段时间给博客添加了搜索评论的功能, 被人骂成是鸡肋. 忧伤. 劳动成果居然没有得到肯定.

我也很就没有分享技巧性的东西了, 好吧, 这篇文章告诉大家怎么高亮搜索结果.

为什么要高亮

也可以说是目的, 让用户搜索的结果更加一目了然.

原理

这个功能的实现方法是用正则表达式替换关键字.

代码

将以下代码放到你主题的 functions.php 文件中即可 ( 大量中文注释,不懂的请注意看 ).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/**
 * 搜索结果高亮关键字
 *
 * 特征: 简单的分词高亮效果
 *
 * 本函数摘自 wordpress 主题 PhilNa2 version 2.0.4
 *
 * @author yinheli
 * @link http://philna.com
 * @copyright Copyright (C) 2008 - 2009 yinheli Open Source Matters. All rights reserved.
 * @since 2.0
 * @version 1.5
 * @package PhilNa2
 * @lastmodified  $Date:2009-09-06 $
 * @see add_filter()
 */
function highlightSearchWords($c){
	/* 对于非搜索页面直接返回 */
	if(!is_search())
		return $c;
	global $wp_query;
	/* 测试的办法,你可以看到具体的全部请求内容 */
	//return print_r($wp_query,true);
	/* 颜色集合 */
	$hightLightColors = array('#FF0','#A0FF40','#FFD700','DAA520');
	$keywords = array();
	/* 取得关键字 */
	$keywords = $wp_query->query_vars['search_terms'];
	/* 非法字符 主要是特殊字符 */
	$notAllowed = array("$","(",")","*","+",".","?","[","]","\",","^","{","}","|");
	/* 没有关键字直接返回 */
	if (empty($keywords))
		return $c;
	/*
	对于想单(双)引号(',")
	这样的字符wp本身在查询的时候会去掉的.
	但是留下个空的值.并且会查询数据库
	暂时不知道为什么wp要这么处理
	猜想是:文章中难免有html标签,有标签意味着有引号.
	搜索引号就没有多大意义.
	原本以为加引号代表精确搜索,结果出现了乱码
	经测试发现是以上原因
 
	∴ 这里做个判断.免得在替换的换的时候出错
	*/
	/* 去掉空值 */
	foreach ($keywords as $index=>$val){
		if(empty($val))
			unset($keywords[$index]);
	}
	/* 依然为空 直接返回 */
	if (empty($keywords))
		return $c;
	/* 如果是搜索评论,去掉第一个关键字. 这里是针对我添加的评论搜索 */
	if(isset($wp_query->searchComments))
		array_shift($keywords);
	/* 选择颜色数组索引 */
	$slecet = 0;
 
	/*
	开始历遍,每个(种)关键字
	将从颜色集合数据组中选用使用不同的颜色
	注意:
	同一个关键字在文章不同的地方,颜色是相同的
	*/
	foreach ($keywords as $keyword) {
		/* 关键字数量大于颜色数组数量时,索引重置 */
		if($slecet > (count($hightLightColors)))
			$slecet = 0;
		/* 选择一种颜色 */
		$hightLightColor = $hightLightColors[$slecet];
		/* 累加索引 */
		$slecet++;
		/* 滤过非法字符 必须将这些字符转义 */
		$RegExpkeyword = $keyword;
		foreach ($notAllowed as $v){
			$RegExpkeyword = str_replace($v,'\\'.$v,$RegExpkeyword);
		}
		/* 正则表达式(这是替换[高亮]的关键) 不区分大写小写 */
		$RegExp = "/$RegExpkeyword(?=[^<>]*<)/i";
		/* 开始替换 */
		$c = preg_replace($RegExp,'<span style="background:'.$hightLightColor.';">'.$keyword.'</span>',$c);
	}
 
	return $c;
}
/*将函数挂到 the_content 这个滤过器上, 并将优先级设置高一点*/
add_filter('the_content', 'highlightSearchWords',100);

废话

可能这个还不是完美.

当然还可以用其他的办法实现, 比如 javascript .也是相同的原理, 你几乎可以完全套用我的正则表达式.

目前可以兼容 WP-Syntax 这个插件. 经我测试没有发现毛病. 至于他的有些关键字比如括号之类的.我也不得而知.

请大家帮忙推广一下我的主题吧. 我看到下载量实在有点少.

所谓技巧, 无非是些乱七八糟的代码. 也没有几句有用的话. 谢谢你这么认真地看到这里.瓦咔咔. :razz:

  1. grubylee Sep 11th, 2009 @ 18:24 | #1

    哈哈,沙发了。改天也试试 :grin:

  2. Xiaoding Sep 11th, 2009 @ 19:44 | #2

    有点猛料~~ 赞一下~~ 准备自己应用之 哈哈

  3. Justice Sep 11th, 2009 @ 19:58 | #3

    搜索功能大多数人说是鸡肋这是很正常的,只有好文章数量多了这个功能才有价值。只有在碰到问题的时候,想到“不妨去看看xxx有没有碰到过这个问题”,人们才会需要去搜索。所以继续加油吧,多分享一些有意思的东西,丰富自身的内容才是王道嘛。一直觉得你的主题很不错,嘿嘿。 :roll:

  4. winy Sep 11th, 2009 @ 22:25 | #4

    还是等更新吧~确实是很好的主题 :roll:

    PS:前几天换一个插件,出现了Cannot modify header information…
    google说是setcookie的问题,在function.php顶部加了void ob_start就好了。希望不是我的特例

  5. Leeiio Sep 11th, 2009 @ 22:29 | #5

    发现你ajax用得愈发熟练了~等你发布了研究你代码去

  6. 吖Bee Sep 12th, 2009 @ 13:57 | #6

    …….真的太厉害了~

  7. 许三品 Sep 12th, 2009 @ 15:40 | #7

    呵呵,那可不是骂,博主言重了,个人意见而已!不要往心里去哦!

  8. cheap bape shoes Sep 14th, 2009 @ 12:21 | #8

    前几天换一个插件,出现了Cannot modify header information…

  9. Alex Sep 14th, 2009 @ 17:02 | #9

    我博客的搜索功能一般都很少使用。。。

  10. 奋飞 Sep 24th, 2009 @ 21:25 | #10

    这个不错啊,正在考虑是不是用google的搜索功能来代替blog的搜索啊

  11. 游侠 Oct 14th, 2009 @ 11:17 | #11

    学习一下,谢谢楼主分享。 :grin:

  12. welee Nov 14th, 2009 @ 13:17 | #12

    其实我也觉得鸡肋,所以一直没太关注博客的搜索功能。

  13. chisdy Nov 28th, 2009 @ 11:19 | #13

    改天整在主题上试试。

  14. QiQiBoY Nov 28th, 2009 @ 12:28 | #14

    用google的自定义搜索就不用这样了吧。。。直接就是高亮关键字。。。 :roll:

  15. underone Nov 28th, 2009 @ 19:54 | #15

    很好啊,还是需要搜索的

  16. keon Dec 18th, 2009 @ 18:04 | #16

    mark一下~~~有用~~

  17. 阳光创意 Jan 12th, 2010 @ 10:23 | #17

    试用过了,完全不行,页面出错。

  18. 阳光创意 Jan 12th, 2010 @ 10:24 | #18

    还有,你的这张页面右侧栏掉下来了,看来你对样式不是很懂啊

  19. yinheli Jan 12th, 2010 @ 10:27 | #19

    @阳光创意
    什么浏览器?

  20. Dianso Jul 16th, 2010 @ 22:48 | #20

    用上了 :razz:

Submitting Comment, Give me a second...

Leave a comment

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">
Trackbacks & Pingbacks ( 0 )
  1. No trackbacks yet.