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^)/~~