Wopus中文博客平台

给你的 Wordpress 添加 Google 自定义搜索

2008-10-23 0:00 | 来源: 原创 | 作者: 辐射鱼 | 评论: 28条评论

由于上周临时抱佛脚一心准备考试，罢工了一周，now，我们继续。
上周 surfone 童鞋在论坛里求助如何为Wordpress 添加 Google 自定义搜索这个问题，酋长这段时间工作繁重可能无法顾及，教程一直没有放出，对不住大家了。刚好我一直倾向于使用 Google 自定义搜索引擎来代替 Wordpress 自带的搜索功能，我曾经在我修改的 Mozilla for Wordpress Theme 中就这样干过，那么这么做有什么好处呢：

1. Wordpress 本身的搜索功能还比较弱，搜索结果不太准确
2. Wordpress 本身的搜索功能需要查询数据库，每次查询都会增加服务器负担
3. 还可以利用 Google 自定义搜索赚点小钱

不同的是，在 Mozilla for Wordpress Theme 中我只是简单把搜索结果托管在 Google 的网页上，这次我们要将它托管在自己的博客页面上。酷吧？那就一起一起来把它加在 Wordpress 上吧：

1. 首先我们得利用 Google 自定义搜索引擎建立一个自己的搜索引擎

访问：Google 自定义搜索引擎点击“创建自定义搜索引擎”即可创建属于你自己的搜索引擎啦（已有自定义搜索引擎的请略过此步）。具体新建过程我也不再赘述，相信大家能搞定。


2. 选择 Google 自定义搜索引擎样式

创建好自定义搜索引擎后，一次点击"控制面板"-"外观"，选择第一种无边框、无背景色的样式即可，因为最后都要使用自己的 Wordpress 主题来自定义的。


3. 获取 Google 自定义搜索引擎代码

点击“代码”，在“搜索结果托管选项”下选择“在您的网站上托管搜索结果：”–“iframe – 需要两个网页：一个网页提供搜索框，另一个提供结果”

“指定搜索结果详情”选项需要填写搜索结果所在的网页地址并选择广告位置

选择完毕我们就可以得到自己的 Google 自定义搜索引擎代码了


4. 自定义搜索框代码

得到上面的搜索框代码后，我们还需按照自己的 Wordpress 主题样式进行修改，才能使 Google 自定义搜索和主题相匹配。
我所使用的 Blueweed 主题的搜索框 Searchform 代码是：

1. <li class="search">
2.             <div id="searchbar">
3.             <form method="get" id="searchform" action="http://www.thirdinfo.com/">
4.             <div><input type="text" value="站内日志搜索..." onfocus="if (value =='站内日志搜索...'){value =''}" onblur="if (value ==''){value='站内日志搜索...'}" name="s" id="s" class="swap_value" />
5.             <input type="image" src="http://www.thirdinfo.com/wp-content/themes/blueweedmine/images/go.gif" id="go" alt="Search" title="Search" />
6.             </div>
7.             </form>
8.             </div>
9.         </li>

稍加改动，去掉id="cse-search-box"并合并一下input type的各个属性，大家照葫芦画瓢即可，最终代码如下（可能会因主题不同而有差异）：

1. <li class="search">
2.     <div id="searchbar">
3.         <form method="get" id="searchform" action="http://www.thirdinfo.com/search">
4.             <input type="text" name="q" id="s" value="站内日志搜索..." onfocus="if (value =='站内日志搜索...'){value =''}" onblur="if (value ==''){value='站内日志搜索...'}" />
5.             <input type="image" name="sa" id="go" alt="Search" title="Search" src="http://www.thirdinfo.com/wp-content/themes/blueweedmine/images/go.gif" />
6.             <input type="hidden" name="cx" value="016923013645410625752:v78cazfpyyu" />
7.             <input type="hidden" name="cof" value="FORID:11" />
8.             <input type="hidden" name="ie" value="UTF-8" />
9.         </form>
10.         <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=zh-Hans"></script>
11.   </div>
12. </li>

注意，请将 input type="hidden" name="cx"、input type="hidden" name="cof"、input type="hidden" name="ie"放到 input type="text" name="q" id="s"后面，以免搜索框变形

5. 自定义搜索结果代码

定义好搜索框后，我们只需自定义搜索结果就可以宣布大功告成了。要使 Google 自定义搜索显示到 Wordpress 上，我们需要建立一个搜索结果页面模板，打开 page.php，在最前面添加：

1. < ?php
2. /*
3. Template Name: Google Custom Search Results
4. */
5. ?>

以定义该页面模板名称，然后找到

1. < ?php the_content(); ?>
2. ?>

用先前得到的搜索结果代码替换它并另存为Google-Custom-Search.php即可

6. 在搜索结果上放置自己的 ADsense 广告

回到 Google 自定义搜索控制面板-赚钱，按照要求填入自己的帐号信息即可


7. 最后，新建搜索结果页面

进入 Wordpress 后台，撰写一个名为“Search”的新页面，命，缩略名（slug name）为：search，页面模板选择刚刚上传的 “Google Custom Search Results”

好了，经过以上几步，我们就成功为 Wordpress 添加 Google 自定义搜索了，具体演示详见本人博客：thirdinfo.com。
其实 surfone 童鞋自己已经 Google 找到 zEUS.童鞋那里，三下五除二就把问题解决鸟（hoho，大家要向surfone 童鞋学习）。大家也可以看看 zEUS. 的教程。

标签: custom-search , google , wordpress

编辑: 辐射鱼