WordPress整合Google自定义搜索

以前一直用的google自定义搜索，只不过那是旧版的，自从换了 dot-a  这个主题，很多折腾过的效果和功能都要从新加上了。
废话少说，开始做咯：

效果：本站顶部的 站内搜索 功能！

推荐指数：★★★★★

推荐理由：高速Ajax加载，减少主机负担，自定义CSS，无广告，自定义展示结果，高亮搜索关键词，Adsense集成，Analytics 集成

具体方法：

1、用 Google帐号登录 http://www.google.com/cse/

2、创建一个 自定义搜索引擎，填写相关信息，选择标准版，搜索网站 填写如下格式：
         www.hzlzh.com/*

3、进入控制面板 可以获得，诸如：搜索引擎的唯一 ID： 011726169853656484522:gvikl69lrew

----------- 分  割  线 ----------以下开始在WordPress中操作------------

4、（又要用到Wordpress页面模版这个功能，不了解的可以看这里 WordPress页面模板的使用及短代码调用 ）
     在桌面创建一个名为 cse.php 的文件，之后上传到 WP 主题目录中，[注意这里的代码不完全是Google 生成的，添加了正则传参部分]文件内容如下：

<?php
/*
Template Name: cse
*/
?>
<?php get_header();  ?>
<div>
  <div>
    <div id="cse" style="width: 100%;">正在从Google 加载搜索结果......</div>
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
  google.load('search', '1', {language : 'zh-CN'});
  google.setOnLoadCallback(function(){
        var customSearchControl = new google.search.CustomSearchControl('011726169853656484522:gvikl69lrew');
        customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        customSearchControl.draw('cse');
        var match = location.search.match(/q=([^&]*)(&|$)/);
        if(match && match[1]){
            var search = decodeURIComponent(match[1]);
            customSearchControl.execute(search);
        }
    });
</script>
    <link rel="stylesheet" href="http://www.google.com/cse/style/look/greensky.css" type="text/css" />
  </div>
  <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

5、在WP后台新建一个页面，名字随便，选择页面模板 cse 就是刚刚传上去的那个文件。之后点击发表页面，但隐藏不限是。
    访问：新建的页面，诸如：http://www.hzlzh.com/search 这个是hzlzh 建的那个页面。此时你会发现出现了以个google的搜索条，并且可以使用了。

6、现在我们有了一个正常使用的search 页面，下面开始对首页的搜索条进行修改，注意上面和下面代码中 红色 部分，这个根据不同的博客，不一样，用了一个正则来处理传递参数，比如hzlzh的：

<form method="get" id="searchform" action="http://www.hzlzh.com/search">
<div><input type="text" value="Click Enter..." name="q" id="search_input" onfocus="this.value = this.value == this.defaultValue ? '' : this.value" onblur="this.value = this.value == '' ? this.defaultValue : this.value" /></div>
<div><input type="submit" alt="search" id="search_button" /></div>
</form>

7、大功告成，现在你要做的就是优化 CSS，使之看起来跟你的博客很搭！在Google控制面板选择 [外观]-[搜索元素]-[压缩视图]-[自定样式]

8、如果是主题作者，建议在后台加入search选项，集成这个功能，唉~~折腾！

PS：Google Site Search 和 Google analytics 和 Google adsense 都是相当的完美，自己折腾去吧~