高亮 WordPress 搜索结果 JQuery 篇
我曾在站趣-分享建站的乐趣提过如何高亮 WordPress 搜索关键词，可这个方法有一个缺陷，那就是只有当文章标题里有搜索关键词时才会高亮，换句话说，如果关键词出现在正文中，就并不会高亮显示。那么，有什么方法能在文章标题和正文高亮显示搜索关键词呢？当然有，那就是 JQuery。
- 首先，编辑主题 functions.php 文件，加入以下代码
- 编辑主题 header.php 文件，加入以下代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function wps_set_query() { $query = attribute_escape(get_search_query()); if(strlen($query) > 0){ echo ' <script type="text/javascript"> var wps_query = "'.$query.'"; </script> '; } } function wps_init_jquery() { wp_enqueue_script('jquery'); } add_action('init', 'wps_init_jquery'); add_action('wp_print_scripts', 'wps_set_query'); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <style type="text/css" media="screen"> .wps { background: #D3E18A; } </style> <script type="text/javascript"> jQuery.fn.extend({ highlight: function(search, insensitive, class){ var regex = new RegExp("(<[^>]*>)|(\\b"+ search.replace(/([-.*+?^${}()|[\]\/\\])/g,"\\$1") +")", insensitive ? "ig" : "g"); return this.html(this.html().replace(regex, function(a, b, c){ return (a.charAt(0) == "<") ? a : "<strong class=\""+ class +"\">" + c + "</strong>"; })); } }); jQuery(document).ready(function($){ $("#post-area").highlight(wps_query, 1, "wps"); }); </script> |
代码注释：
① 你可将 css 写入 style.css 中；
② 需将 post-area 修改为你所用主题的搜索结果所在 div；
③ 该段代码应放在 标签之前。
如何，本篇 WordPress 教程不复杂吧？！
14个评论
Leave a Reply.
1 雅丹地貌
April 12th, 2009 at 10:49
我发觉我都用不到搜索！
2 辐射鱼
April 12th, 2009 at 10:52
要找一找特定的文章还是需要的
3 篮球博客
April 12th, 2009 at 13:36
我对Jquery一窍不通-.-
4 welee
April 12th, 2009 at 13:47
很好，我可能会用到，先收藏。
5 YoungCheon
April 13th, 2009 at 09:58
研究Jquery的真多啊
6 辐射鱼
April 13th, 2009 at 13:45
JQuery 应用范围比较广嘛，不受平台和客户端限制
7 西风
April 13th, 2009 at 12:20
试一下
8 辐射鱼
April 13th, 2009 at 13:46
嗯，这种改善用户体验的改进，多尝试是多多益善的
9 wulinfo
April 15th, 2009 at 18:39
觉得这些功能还是交给浏览器去做吧
10 辐射鱼
April 15th, 2009 at 22:28
浏览器的职责是根据网页属性进行渲染，怎么能越俎代庖呢？
11 wulinfo
April 15th, 2009 at 23:03
几乎所有浏览器都包含了这个功能。何必为此小功能而令网页臃肿呢，我觉得浏览器应当承担更多功能，例如谷歌浏览器就是不错的开端（例如这个留言框）
12 辐射鱼
April 16th, 2009 at 00:01
我想这里有个误会，你所指的浏览器搜索只能在网页源代码里搜索，而本篇文章里讲的搜索是指搜索动态文章。而且，作为浏览器的本质工作是渲染网页，而不是去统一强制网页显示方式，你觉得呢？
13 wulinfo
April 16th, 2009 at 00:17
博主，我没有误解你的意思，我就详细点吧，你通过关键词搜索博客内容，再通过Ctrl+F搜索关键词就能点击高亮显示关键词，这样就达到了高亮关键词。如果在源码上实现此功能难道你不觉的多此一举吗？不是增加浏览器解析吗？也许你是对的，只是个人观点
14 辐射鱼
April 16th, 2009 at 00:24
你也知道 Ctrl+F 是没法搜索整个博客或网站的，只能搜索当前页，当我们使用 WordPress 的搜索功能后，再去 Ctrl+F 一下，已经重复操作了，从用户体验上来说，这是不是非常不友好？你说呢？！