我曾在站趣-分享建站的乐趣提过如何高亮 WordPress 搜索关键词，可这个方法有一个缺陷，那就是只有当文章标题里有搜索关键词时才会高亮，换句话说，如果关键词出现在正文中，就并不会高亮显示。那么，有什么方法能在文章标题和正文高亮显示搜索关键词呢？当然有，那就是 JQuery。

1. 首先，编辑主题 functions.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');

2. 编辑主题 header.php 文件，加入以下代码：

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 教程不复杂吧？！