WordPress 高亮显示关键词及欢迎提示
写这篇文章绝对是受了 Qiqiboy 的刺激,该小盆友说我的 WordPress 站内搜索没有用关键词高亮,而且还有图有真相的,巨受打击。好吧,我顶着明天两门考试可能挂彩的压力,今天就不复习了,全心投入到研究 WordPress 关键词搜索高亮显示的行列中,什么 PHP 啊、JQuery 啊、CSS 啊、正则啊、获取 Cookies 啊,反正能用的我都用上了,8 过神奇的是,折腾出来的不是 WordPress 自带的站内搜索的关键词高亮,而是来自 Google、百度等搜索引擎的关键词高亮显示,并且对访客显示欢迎提示词。
这样说是很难让人理解的,你可以先试试用百度或者 Google 搜索本站的关键词“万戈”,再通过搜索引擎的结果点击进入本站,就可以看到效果了,在右侧栏的位置可以看到一个可以随滚动条上下浮动的弹出层,显示“欢迎来自 *** 的朋友!推荐您 点击这里 订阅我的博客 o(∩_∩)o ”,这里的 *** 是可以显示通过哪个搜索引擎入口来访的,很亲切哟。
另外,用我的一些其他的关键词,如“WordPress 读者墙”之类的,通过搜索引擎点击进入本站,则会看到你搜索的关键词已经加粗高亮,这样也就强调了访客希望看到的重点内容,提高了访客的体验。
以下两张分别是搜索引擎的关键词高亮和来自搜索引擎的访客欢迎提示词的截图。
![]() 搜索高亮显示关键词 |
![]() 搜索访客显示欢迎提示词 |
好了,废话到此结束,下面是代码部分,首先要感谢一下 landing-sites 插件的作者,我就是在此研究成果上精简修改并折腾出了非插件版本的、更适合中国本土搜索引擎、再加上我无敌美化的代码~
一、首页是 PHP 的函数部分,老规矩,把以下代码复制到 WordPress 主题目的 functions.php 中:
$search_engines = array (
'google.com' => 'q',
'google.com.hk' => 'q',
'baidu.com' => 'wd',
'search.yahoo.com' => 'p',
'cn.search.yahoo.com' => 'p',
'cn.bing.com' => 'q',
'search.lycos.com' => 'query',
'youdao.com' => 'q',
'search.aol.com' => 'query',
'ask.com' => 'q',
'hotbot.com' => 'query',
'overture.com' => 'Keywords',
'search.netscape.com' => 'query',
'search.looksmart.com' => 'qt',
'search.earthlink.net' => 'q',
'search.viewpoint.com' => 'k',
'mamma.com' => 'query'
);
$delim = FALSE;
if (isset($search_engines[$ref])) {
$delim = $search_engines[$ref];
}
return $delim;
}
function ls_get_terms($d) {
$terms = null;
$query_array = array();
$query_terms = null;
$query = explode($d.'=', $_SERVER['HTTP_REFERER']);
$query = explode('&', $query[1]);
$query = urldecode($query[0]);
$query = str_replace("'", '', $query);
$query = str_replace('"', '', $query);
$query_array = preg_split('/[\s,\+\.]+/',$query);
$query_terms = implode(' ', $query_array);
$terms = htmlspecialchars(urldecode($query_terms));
if (!seems_utf8($terms)){
$terms=iconv("GBK", "UTF-8", $terms);
}
return $terms;
}
function ls_get_refer() {
if (!isset($_SERVER['HTTP_REFERER']) || ($_SERVER['HTTP_REFERER'] == '')) return FALSE;
$referer_info = parse_url($_SERVER['HTTP_REFERER']);
$referer = $referer_info['host'];
if (substr($referer, 0, 4) == 'www.')
$referer = substr($referer, 4);
return $referer;
}
function ls_getinfo($what) {
$referer = ls_get_refer();
if (!$referer) return FALSE;
$delimiter = ls_get_delim($referer);
if ($delimiter)
{
$terms = ls_get_terms($delimiter);
if ($what == 'isref') {
return ($terms != ''?true:false);
}
if ($what == 'referrer') {
$parsed = parse_url($_SERVER['HTTP_REFERER']);
echo '<a href="http://'.$parsed['host'].'">'.$parsed['host'].'</a>';
}
if ($what == 'terms') { echo $terms; }
}
}
function ls_terms_filter($content){
$referer = ls_get_refer();
$output = '';
$delimiter = ls_get_delim($referer);
if($delimiter)
{
$terms = ls_get_terms($delimiter);
$terms= array_unique(preg_split("/[\s,]+/", $terms));
$contentarr = preg_split("/(<.*>)/U", $content, -1, PREG_SPLIT_DELIM_CAPTURE);
$stop = count($contentarr);
for ($i = 0; $i < $stop; $i++) {
$content = $contentarr[$i];
if ((strlen($content) > 0) && ('<' != $content{0})) {
foreach ($terms as $term) {
if (strlen($term)>1)
$content=eregi_replace("($term)","<b style='background:#ffff00;'>\\1</b>", $content);
}
}
$output .= $content;
}
return $output;
} else{
return $content;
}
}
add_filter('the_content', 'ls_terms_filter');
add_filter('comment_text', 'ls_terms_filter');
function ls_set_header() {
if (ls_getinfo('isref')) header('Vary: Referer', FALSE);
}
add_action('init', 'ls_set_header');
可以看到在搜索引擎的数组中,我加入了 google.com.hk、百度、有道、必应等适合中国网民的搜索引擎,当然你也可以按照这样的格式再添加几个。
二、是 HTML 和调用以上函数的部分,可以放在任何地方,个人建议放在 footer.php 中,最后用样式定一下位嘛就可以了:
<div id='hellobaby'>欢迎来自 <?php ls_getinfo('referrer'); ?> 的朋友!<br />推荐您 <b><a href='http://feed.wange.im' target='_blank'>点击这里</a></b> 订阅我的博客 o(∩_∩)o
<div class="closebox"><a href="javascript:void(0)" onclick="$('#hellobaby').slideUp('slow');$('.closebox').css('display','none');" title="关闭">×</a></div>
</div>
<?php endif; ?>
三、最后是样式部分,这个各位可以发挥各自所长,下面我就提供一下我的样式表,仅供参考:
background:#000000;
border:1px solid #B3B3B3;
color:#FFFFFF;
font-size:14px;
opacity:0.7;
filter:alpha(opacity=70);
padding:10px;
position:absolute;
right:0;
top:250px;
}
写到这里,功能上已经实现了,剩下的就是美化工作,最后的最后,你也可以像我这样,给旁边的欢迎提示词用 JQuery 加一个滑动效果,那就更炫了,不过因为篇幅有限,我这里就不多介绍了。
最后的最后的最后,还要感谢 http://www.chinawp.com/2009/10/106/ 此文,给了我很大的帮助,本文的灵感就来源于此。
-
Wordpress 站内搜索高亮显示关键词2010年07月18日 -
给 WordPress 添加语音搜索功能2011年12月4日 -
万戈牌 Fuck IE6 非插件版2011年05月13日 -
非插件同步 WordPress 日志到嘀咕2011年03月31日

