WordPress整合Google自定义搜索
以前我也觉得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&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&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。
六、整合完成，测试效果吧！
期待更多技术性博文~~~~\(^o^)/~~