Google自定义搜索是一项依托于Google驱动的个性化站点搜索定制服务，和众多的Google产品相同，有着高度自由定制的权限，并且对于个人使用完全免费。

风向吧使用Google自定义搜索已经有一段时间了，能够消除搜索功能对数据库的查询，搜索范围又更宽广，何乐而不为呢。因为效果比较良好，近期我更是尝试使用Google自定义搜索功能来完全代替了wordpress自带的搜索。今天有空折腾了一下，找了些资料参考，把该功能整合到了blog中，使之完全成为了blog系统的一部分，顺便记录一下。当然，如果要使用Google自定义搜索功能达到好的效果，需要blog已经在Google有了良好的收录的情况下。

创建Google自定义搜索

首先使用你的Google帐号登录Google自定义搜索，并创建自定义搜索引擎，每一步都会有详细的说明，按照需要填写即可。创建完毕后，会得到Search engine unique ID。

加载自定义搜索代码

在控制面板中点击获取代码，会有三种方式的代码选择：

• 使搜索结果位于 Google 托管的网页上
  使用 iframe 使搜索结果位于我的网站上
  使用 Custom Search element 使搜索结果位于我的网站上

使搜索结果位于 Google 托管的网页上也是一个很便捷的方式，将代码拷贝至任意你想显示的地方即可，当然也可以完全的替换wordpress的搜索，搜索的结果页面将是托管在Google的单独页面。

最新推出的Custom Search element功能，使得在wordpress上使用更为简化了，只需要将获取的代码加载到任意需要显示的页面就可以了，比如支持Widget的主题，就可以创建一个Widget，将代码拷贝至其中，这样搜索结果将显示在侧边栏中。这种方式的好处是，你可以不必去修改blog主题中的任何地方，直接就可以使用了，如果原来的主题提供了搜索入口，那么这个Google的自定义搜索引擎将会是个很好的补充。

 

嵌入独立博客页面

我在风向吧中目前采取的是第二种方式：使用 iframe 使搜索结果位于我的网站上，参考了这里介绍的inove嵌入方法，修改了一些代码来针对elegant-box主题做了嵌入设置。

首先要在wordpress后台创建一个新页面，命名为Search Result，固定链接设置为：https://fengxiangba.com/cse。并获取页面ID，后台页面编辑处，页面名称上右键属性可获取页面url，并获得该ID，如post=11048。

复制一份主题模板下的page.php，重命名为cse.php，打开后编辑它，在顶部加上以下代码：

<?php

/*

Template Name: cse

*/

?>

在代码：

<?php if (have_posts()) : the_post(); ?>

以下插入Google自定义搜索代码：

<div id="cse-search-results"></div>

<script type="text/javascript">

  var googleSearchIframeName = "cse-search-results";

  var googleSearchFormName = "search_box";

  var googleSearchFrameWidth =605;

  var googleSearchDomain = "www.google.com";

  var googleSearchPath = "/cse";

</script>

<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

剩下一些调用留言框的代码等都可以注释或删除掉。将修改好的cse.php上传至主题目录下，在刚才创建的Search Result页面中选中为模板，并访问下确认可以打开。然后我们就可以找到主题模板中的header.php，打开并找到：

wp_list_pages('title_li=0&sort_column=menu_order');

修改成刚才获取的页面ID：

wp_list_pages('title_li=0&sort_column=menu_order&exclude=11048');

这样就可以在导航栏中隐藏这个页面了。

接下来修改搜索框代码，主题自带了调用Google自定义搜索的参数，录入刚才获取的Search engine unique ID并启用它，继续修改header.php，找到如下代码：

<form action="http://www.google.com/cse" id="search_box" method="get">
                        <div id="searchbox">
                            <input type="text" id="searchtxt" class="textfield" name="q" size="24" />
                            <input type="hidden" name="cx" value="<?php echo $options['google_cse_cx']; ?>" />
                            <input type="hidden" name="ie" value="UTF-8" />
                        </div>
                    </form>

修改替换成：

<form action="<?php bloginfo('wpurl') ?>/cse" id="search_box" method="get">

                        <div id="searchbox">

                            <input type="hidden" name="cx" value="<?php echo $options['google_cse_cx']; ?>" />

    <input type="hidden" name="cof" value="FORID:11" />

    <input type="hidden" name="ie" value="UTF-8" />

    <input type="text" class="textfield" id="searchtxt" name="q" size="24" />

    <input type="submit" name="sa" value="GO" />

  </div>

</form>

保存并覆盖上传修改后的header.php，这样就可以实现在不影响原主题结构的情况下，完整的嵌入Google自定义搜索结果页了。具体效果可以在本站搜索试一下，也可以点击这里：查看自定义搜索引擎效果