WordPress使用Google自定义搜索引擎来实现站内搜索

发布于,归属于wordpress9个座位已被强势霸占! 共有1,084人围观    

很多朋友向明河反应,RIA之家少了个搜索功能,非常不方便,明河将在新版中加入搜索。

WordPress的站内搜索引擎,性能相当一般,其实可以利用Google提供的自定义搜索引擎,来实现站内搜索,当然,我们同时也希望搜索结果直接显示在页博客内。

如何实现wordpress和Google自定义搜索引擎的无缝集成呢?

1、自定义一个Google搜索引擎

进入:http://www.google.com/cse/

如果没出现如上界面,请先登录google账号。

2、填写自定义搜索引擎信息

标准版的搜索结果页会显示google的广告哦,这是美中不足的地方,但速度和准确度还是有保证的。

网址上务必填写上正确的博客路径。

填写成功就会出现如下界面:

3、获取代码

进入“控制面板”,点击左侧的“获取代码”(这时候的搜索样式是采用默认的,而样式是可以自定义的)

4、自定义外观

选择“搜索元素”。

非常人性化,你可以自定义大部分的样式,赞一个。

然后再获取代码。

以下是明河对其自定义后的效果:

当然最常用的情况是在头部自定义搜索表单表单,点击搜索之后跳转到一个自定义的搜索结果页面,该页面读取url后的关键字参数,然后显示搜索结果,接着看。

5、在首页创建一个搜索表单

  1. </p>
  2. <form method="get" action="http://localhost/wordpress/site-search/">
  3. <div class="l input">
  4. <input type="text" value="" name="q" id="q" /><br /><br />
  5. <input type="hidden" value="UTF-8" name="ie"/></div>
  6. <div class="l"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/header/search-input-r.jpg" /></div>
  7. <div class="l">
  8. <input type="submit" id="searchsubmit" class="icon" value="搜 索" /></div>
  9. </p>
  10. </form>
  11. <p>

使用“get”方法,表单结构自定义,只要可以正确提交到搜索结果页面即可。搜索结果页面的创建请看下文

 6、创建一个搜索结果页面

这里需要用到wordpress的自定义页面的功能。

在你的主题下新创建一个site-search.php

  1. </p>
  2. <p><?php</p>
  3. <p>/*</p>
  4. <p>Template Name: site-search</p>
  5. <p>*/</p>
  6. <p>?></p>
  7. <p>

新建个页面

选择site-search模板

这是该页面的链接,也是搜索框提交后的处理页面。

7、读取关键字,并显示搜索结果

在site-search.php页面模板上加入google代码:

  1. </p>
  2. <div id="cse" style="width:100%;"></div>
  3. <p><script src="http://www.google.com/jsapi" type="text/javascript"></script>
  4.  
  5. <script type="text/javascript">
  6.   google.load('search', '1', {language : 'zh-CN'});
  7.   google.setOnLoadCallback(function(){
  8.     var customSearchControl = new google.search.CustomSearchControl('015918306757214125490:q3jdq9kuhmm');
  9.     customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
  10.     var options = new google.search.DrawOptions();
  11.     options.setSearchFormRoot('cse-search-form');
  12.     customSearchControl.draw('cse', options);
  13.     var match = location.search.match(/q=([^&#038;]*)(&#038;|$)/);
  14.     if(match &#038;& match[1]){
  15.         var search = decodeURIComponent(match[1]);           
  16.  
  17.         customSearchControl.execute(search);
  18.     }
  19.   }, true);
  20. </script></p>
  21. <p>

嘿嘿,使用css将广告iframe隐藏掉,大功告成!

效果详见新版的RIA之家搜索功能。

(如果您喜欢这篇教程,可以通过支付宝打赏我们1元哦,拜谢!)

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

9个座位已被强势霸占!

  1. 杨董

    这样方法做百度联盟的 推广搜索 就一举两得了

    明河共影回复于 2010年10月15日 7:19

    其实还有更好的方式,我日后会发另外一篇教程,讲述在wordpress中使用google搜索的更好方式。

  2. limp_t

    哈哈,广告的确是给隐藏了

  3. ituwen

    有一点小问题,就是我的图标一直是分两行显示的,大家有遇到这种情况吗

    明河共影回复于 2010年10月28日 4:52

    可以参考风来西林同学的解决方案:http://www.xilinqishi.com/?p=1618

  4. lee

    将广告iframe隐藏掉的css代码是什么?

    明河共影回复于 2010年12月08日 6:46

    直接display:none

  5. Pingback: WordPre插件相关 | It's Z

  6. DH

    很不错的网站风格,谢谢这篇文章,写的很详细