很多朋友向明河反应,RIA之家少了个搜索功能,非常不方便,明河将在新版中加入搜索。
WordPress的站内搜索引擎,性能相当一般,其实可以利用Google提供的自定义搜索引擎,来实现站内搜索,当然,我们同时也希望搜索结果直接显示在页博客内。
如何实现wordpress和Google自定义搜索引擎的无缝集成呢?
1、自定义一个Google搜索引擎

如果没出现如上界面,请先登录google账号。
2、填写自定义搜索引擎信息
标准版的搜索结果页会显示google的广告哦,这是美中不足的地方,但速度和准确度还是有保证的。
网址上务必填写上正确的博客路径。
填写成功就会出现如下界面:

3、获取代码
进入“控制面板”,点击左侧的“获取代码”(这时候的搜索样式是采用默认的,而样式是可以自定义的)
4、自定义外观
选择“搜索元素”。

非常人性化,你可以自定义大部分的样式,赞一个。
然后再获取代码。
以下是明河对其自定义后的效果:

当然最常用的情况是在头部自定义搜索表单表单,点击搜索之后跳转到一个自定义的搜索结果页面,该页面读取url后的关键字参数,然后显示搜索结果,接着看。
5、在首页创建一个搜索表单
- </p>
- <form method="get" action="http://localhost/wordpress/site-search/">
- <div class="l input">
- <input type="text" value="" name="q" id="q" /><br /><br />
- <input type="hidden" value="UTF-8" name="ie"/></div>
- <div class="l"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/header/search-input-r.jpg" /></div>
- <div class="l">
- <input type="submit" id="searchsubmit" class="icon" value="搜 索" /></div>
- </p>
- </form>
- <p>
使用“get”方法,表单结构自定义,只要可以正确提交到搜索结果页面即可。搜索结果页面的创建请看下文
6、创建一个搜索结果页面
这里需要用到wordpress的自定义页面的功能。
在你的主题下新创建一个site-search.php
- </p>
- <p><?php</p>
- <p>/*</p>
- <p>Template Name: site-search</p>
- <p>*/</p>
- <p>?></p>
- <p>

新建个页面

选择site-search模板

这是该页面的链接,也是搜索框提交后的处理页面。
7、读取关键字,并显示搜索结果
在site-search.php页面模板上加入google代码:
- </p>
- <div id="cse" style="width:100%;"></div>
- <p><script src="http://www.google.com/jsapi" type="text/javascript"></script>
- <script type="text/javascript">
- google.load('search', '1', {language : 'zh-CN'});
- google.setOnLoadCallback(function(){
- var customSearchControl = new google.search.CustomSearchControl('015918306757214125490:q3jdq9kuhmm');
- customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
- var options = new google.search.DrawOptions();
- options.setSearchFormRoot('cse-search-form');
- customSearchControl.draw('cse', options);
- var match = location.search.match(/q=([^&]*)(&|$)/);
- if(match && match[1]){
- var search = decodeURIComponent(match[1]);
- customSearchControl.execute(search);
- }
- }, true);
- </script></p>
- <p>
嘿嘿,使用css将广告iframe隐藏掉,大功告成!
效果详见新版的RIA之家搜索功能。

这样方法做百度联盟的 推广搜索 就一举两得了
其实还有更好的方式,我日后会发另外一篇教程,讲述在wordpress中使用google搜索的更好方式。
哈哈,广告的确是给隐藏了
有一点小问题,就是我的图标一直是分两行显示的,大家有遇到这种情况吗
可以参考风来西林同学的解决方案:http://www.xilinqishi.com/?p=1618
将广告iframe隐藏掉的css代码是什么?
直接display:none
Pingback: WordPre插件相关 | It's Z
很不错的网站风格,谢谢这篇文章,写的很详细