wordpress添加google自定义站内搜索功能

想在wordpress中添加google自定义搜索可能有两个原因:一是wordpress本身搜索功能又慢又弱,二是有Adsense账号,这个搜索广告不用白不用,说不定还可以小弄点美刀什么的。
对于添加google自定义搜索,有三种方法:
1、把搜索结果放google页面上,这种方法通过点击站内google搜索框,然后跳转到google页面显示搜索结果,个人觉得这个方法比较不可取,因为把浏览者牵出站外了,对自己对浏览者都不是一个好的体验。本文对该方法不作描述。
2、使用 Custom Search element让搜索结果显示在站内,这种方法针对没有Adsense账户的可以用下,该搜索结果显示在站内,展现结果跟第三种方法一样。
3、把google自定义搜索框和搜索结果都放在wordpress主题中的文件,达到整过搜索过程在站内显示的目的。
一、获取google自定义搜索框及搜索结果代码
有Adsense账户的可以直接在Adsense中跟据向导生成搜索广告代码,在生成步骤中需要注意两点:
1、指定的搜索网站列表要填写正确(如果只针对自己站点搜索,输入站点地址即可),比如:http://www.xiuchezu.com/;
2、选定搜索结果页时,可以先自己确定搜索结果页面(目前还没添加,将在下面说明),比如:http://www.xiuchezu.com/site-search,这是之后要添加生成的搜索结果代码的页面;
然后所有设置步骤完成后,会生成搜索框和搜索结果代码。
没有Adsense账户的只能使用 Custom Search element了:
1、进入www.google.com.hk/cse/,当然这个google账户必须得有(请原谅我话多)。

2、根据向导填写每个步骤的信息,要注意的是自定义搜索引擎免费版本有广告的,可以在添加后通过css处理iframe隐藏广告。
3、搜索结果的样式可以选择几个默认样式或自定义样式。下一步得到最终的搜索结果代码。

二、将生成的搜索框、搜索结果代码放到wordpress主题中。
在Adsense账户中获取的有两段代码,一是搜索框代码,另一是搜索结果代码:
1、把获取的搜索框代码替换掉主题中searchform.php文件中的form节点的所有内容,如下:

<form id="cse-search-box" action="http://www.xiuchezu.com/site-search">
<div><input type="hidden" name="cx" value="********************" /> <input type="hidden" name="cof" value="FORID:11" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="31" /> <input type="submit" name="sa" value="搜索" /></div>
</form>
<script type="text/javascript" src="http://www.google.com.hk/cse/brand?form=cse-search-box&amp;lang=zh-Hans">// <![CDATA[
mce:0
// ]]></script>

其中name=”cof”的input的 value=”FORID:11″查看google的解释,我之前设置forid值为10的时候,宽度是设置不了795以下的,改成11可以将宽度设置为600以下以适应主题。效果见本站点的搜索结果。
name=”ie”的input是输入字符的编码,取决于在生成代码过程中国家区域的选择,我之前是GB2312,输入的中文就显示乱码,改成UTF-8就OK。
修改搜索结果宽度则在搜索结果代码中修改,如下:

 var googleSearchFrameWidth = 630;

2、剩下的就是要创建搜索结果页面,处理搜索结果代码了。
新建一个文件如google-site-search.php,将要显示的博客站点框架加进来,比如head,sidebar,footer,再把搜索结果代码放到适当的地方,比如content中。
接着就要小用下wordpress的自定义页面的功能了,将如下代码添加到google-site-search.php文件的最前面。

<!--?php /* Template Name:google-site-search */ ?-->

在wordpress后台添加新页面,在模板下拉框中选择刚添加的google-site-search,修改固定链接,如:http://showyo.net/site-search/,这个链接就是刚才在上面生成代码的时候用到的搜索结果链接地址。

针对使用Custom Search element方法:
生成的代码只有搜索结果的,从建立文件到代码放置到新建页面都跟上面提到的Adsense搜索结果代码一致,不一样的是这边没有搜索框代码,但是这个是比较容易解决的,在searchform.php作小修改,只要使用“get”方法,表单结构自定义,将结果正确提交到搜索结果页面即可。类似代码如下:

<form action="http://www.xiuchezu.com/site-search/" method="get">
<div class="s input"><input id="q" type="text" name="q" /> <input type="hidden" name="ie" value="UTF-8" /></div>
<div class="s"><input class="icon" id="searchsubmit" type="submit" value="搜 索" /></div>
</form>

然后处理下CSS,让它和你的站点水乳交融就OK乐。具体可以看下本站的google自定义搜索结果的效果哦。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>