WordPress 站内搜索高亮显示关键词

被 Qiqiboy 刺激后,我阴差阳错地折腾出了非插件的 WordPress 高亮显示关键词及欢迎提示,但是这个搜索关键词高亮提示仅仅是针对来自 Google、百度等搜索引擎的访客,貌似对用站内搜索的朋友就有些不公平了,所以昨天考完试,我今天又马不停蹄地折腾起来,誓言要把 WordPress 站内搜索高亮显示关键词的功能搞定!结果,还真搞定了,哈哈~

无论是用 PHP 还是 Javascript 来实现 WordPress 站内搜索高亮关键词,都不可避免地会用到正则表达式,而偏偏这又是我的软肋,汗颜~先是参考了网上流传最多的 Jquery 实现站内搜索高亮关键词的方法,很可惜,这是一个老外的成果,完全没有考虑到我们非英语为母语的国家,所以这个高亮方法仅支持英文单词开头的关键词,用中文就杯具了。

所以最终还是参考了 Qiqiboy 的 wordpress高亮搜索结果+实现关键字前后截断显示。。。,他用的是 PHP 正则表达式的方法,最大的特点就是可以完美支持中文,而且比 Jquery 的方法执行速度也更快,最让我喜欢的一点是,非插件!哈哈~于是就拿来根据自己的主题修改了一番,方法如下:

在 WordPress 主题文件的 search.php 搜索结果文件中的主循环中加入以下代码:

<?php
    $title = get_the_title();
    $content = mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 600,"......");
    $keys = explode(" ",$s);
    $title = preg_replace('/('.implode('|', $keys) .')/iu','<span style="font-weight:700;background:#ffff00;">\0</span>',$title);
    $content = preg_replace('/('.implode('|', $keys) .')/iu','<span style="font-weight:700;background:#ffff00;">\0</span>',$content);
?>

调用高亮的标题用以下代码:

<?php echo $title; ?>

调用高亮的日志内容用以下代码:

<?php echo $content;?>

就这样,效果还是蛮不错的,大家可以去我头部导航右上角的站内搜索输入一些关键词试试,中文的、英文的都可以。另外我的 PHP 实力很菜,这修改过程可能不太完美,而且以上代码是根据我自己主题的需要修改的,并不完全通用。大家有同样需要 WordPress 站内搜索关键词高亮显示功能的,可以直接去 Qiqiboy 的原文学习:http://www.qiqiboy.com/2010/07/16/wordpress-highlighted-keyword-search-results.html

最后贴一张站内搜索关键词高亮的截图:

Wordpress 站内搜索高亮显示关键词

  1. Pingback: 给Search.php添加跳转到Google搜索的提示 | 企鹅君's Blog

  2. Pingback: WordPress 站内搜索高亮显示关键词 | Wang Jun's Blog

  3. 看了两篇关于搜索的帖子,问问万戈大神,WP的站内搜索或者Google的CSE搜索,能涵盖评论内容吗?就是如果我搜“WordPress”,搜索结果不但列出文章,还有包含“WordPress”字样的评论。

  4. 实习了几天跑回来了,发现了万戈右边多了个东西·您的足迹··这下子就针对每个人了·哈哈用户体验做的很棒·

  5. 你可以考虑一下高亮的颜色用随机?随机生成颜色的代码很简单,反正都是16进制数,慢慢生成去呗。

    或者用单一颜色就可以考虑定义css类,这样最少可以省一行代码的,而生成内容后,省的可就多了。呵呵。

  6. Pingback: Wordpress 站内搜索高亮显示关键词 « 乱舞春秋

      • 昨天就是在问你正则,正则解决后,又卡住了。。

        比如我获得了这个对象:我是中国人
        怎么用jq查找里面的 “我是” 两个字,并且加上 一对 span 标签啊??
        就是卡在这里。。