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: , , , , , , (6,924 views)
声明: 本站遵循 知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议 . 转载请注明转自 Nutsland.cn
  1. Joice
    February 14th, 2012 at 02:01 | #1
    Reply | Quote

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

  2. Cycling Shorts
    January 18th, 2015 at 01:22 | #2
    Reply | Quote

    Simply wish too say your article is as amazing.
    The clarity in your submit is simply nice and i can suppose you are a professional in this subject.
    Fine along with your permission let me to
    seize your RSS feed to keep updated with imminent post.
    Thankos onee million and please continue the gratifying work.

  1. No trackbacks yet.