Home > Web > WordPress整合Google自定义搜索

WordPress整合Google自定义搜索

February 13th, 2012 15:31 Leave a comment Go to comments

以前我也觉得Wordpress的搜索功能确实是不怎么样,试过用Google的自定义搜索,感觉外观不统一,就又用回Wordpress自带的搜索。

这几天又心血来潮,顺便为了能利用起Google带来的Adsense收益,搜集了一番资料,把Google自定义搜索整合进Wordpress。具体效果可以直接在本站右上角的搜索框进行测试。

下面把方法大致介绍下。

一、到http://www.google.com.hk/cse/创建一个自定义搜索引擎,选择“仅搜索包含的网站”,并把自己的站点添加到列表中。记得在外观选项中,设定使用iframe方式显示结果,结果页面的地址写上你要设定的页面,比如http://nutsland.cn/blog/cse(下文讲如何建立这个页面),并且设定好结果页面的颜色样式。最后点击“获取代码”,将获得2份代码,分别是搜索框的代码和嵌入结果页面的代码。

二、修改Wordpress所用的主题,找到搜索框的部分,例如iNove主题在templates\header.php中有如下代码:

<form action="<?php bloginfo('home'); ?>" method="get">
    <div>
        <input type="text" name="s" size="24" value="<?php echo wp_specialchars($s, 1); ?>" />
        <input type="submit" value="" />
    </div>
</form>

而我们从Google得到的搜索框代码是:

<form action="http://nutsland.cn/blog/cse" id="cse-search-box">
    <div>
        <input type="hidden" name="cx" value="partner-pub-3107438038792141:7539267823" />
        <input type="hidden" name="cof" value="FORID:10" />
        <input type="hidden" name="ie" value="UTF-8" />
        <input type="text" name="q" size="55" />
        <input type="submit" name="sa" value="搜索" />
    </div>
</form>
<script type="text/javascript" src="http://www.google.cn/cse/brand?form=cse-search-box&amp;lang=zh-Hans"></script>

 稍加观察,我们把他们整合成:

<form action="http://nutsland.cn/blog/cse">
    <div>
        <input type="text" name="q" size="24" />
        <input type="submit" name="sa" value="" />
        <input type="hidden" name="cx" value="<?php echo $options['google_cse_cx']; ?>" />
        <input type="hidden" name="ie" value="UTF-8" />
        <input type="hidden" name="cof" value="FORID:10" />
    </div>
</form>
<script type="text/javascript" src="http://www.google.com.hk/coop/cse/brand?form=cse-search-box&amp;lang=zh-Hans"></script>

保存模板。

三、复制一个页面模板,例如我用iNove的page-without-sidebar.php,修改文件开始的注释起一个新的模板名,然后把内容部分替换成Google提供的嵌入结果页面的代码:

<div id="cse-search-results"></div>
<script type="text/javascript">
    var googleSearchIframeName = "cse-search-results";
    var googleSearchFormName = "cse-search-box";
    var googleSearchFrameWidth = 905;
    var googleSearchDomain = "www.google.com.hk";
    var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>
</div>

保存为cse-without-sidebar.php

四、新建一个页面,把地址设置为之前设定的显示结果页面的地址,如http://nutsland.cn/blog/cse,模板选择刚才创建的cse-without-sidebar.php。

五、这样会在顶部的导航条多出个搜索结果页面的链接。打开模板相应的文件,找到

wp_list_categories('depth=2&title_li=0&orderby=name&show_count=0');

改成

wp_list_categories('depth=2&title_li=0&orderby=name&show_count=0&exclude=109');

其中109是刚才创建的结果页面的id。

六、整合完成,测试效果吧!

分享到:
Categories: Web Tags: , , , , , , (7,630 views)
  1. Joice
    February 14th, 2012 at 02:01 | #1

    期待更多技术性博文~~~~\(^o^)/~~

  1. No trackbacks yet.