你的位置:快乐忆站 \ 技术 \ 文章正文

emlog整合谷歌自定义搜索

其实谷歌自定义搜索很久以前就想用了,苦于没时间折腾,也没什么先例。后来看到搜搜用上谷歌的搜索了,很强大,和emlog自带的搜索比起来强大N倍!当然,前提是谷歌收录你~再后来就去折腾别的了,把搜索放一边去了,因为发现站内会用搜索的不多就先放放了。前几天又看到Ray Chow的一篇文章:《WordPress 整合 Google Ajax 搜索》,我仔细研究了一下,貌似可以移植到emlog上,而且还挺简单的。昨天自己摸索了一晚上,边做客服边码代码,在本地测试竟然成功了!那个鸡冻啊~最后整合了下样式表就拿来用了,现在本站的搜索就是谷歌的自定义搜索了,在搜索页面还是ajax搜索的哦~搜索结果直接随输入框动态显示,帅!

总结了一下,然后放出方法来了,适用于emlog用户,wp的童鞋请转向Ray Chow那里。

一、申请 Google 自定义搜索

点击此处创建属于你博客的自定义搜索引擎,要搜索的网站可填入www.example.com/*(www.example.com 为您的网站);在“外观”选项中,选择托管“搜索元素”、“两栏”布局并保存。还有一些其他选项敬请自行设置好,我不一一列举。

二、修改搜索框

你可以利用emlog知道的搜索框进行改造,一般是在侧边栏的。修改成如下形式:

<form id="searchform" action="<?php echo BLOG_URL; ?>search/">
    <input type="text" value="" name="q" id="s" />
    <input type="submit" value="搜一下" id="searchsubmit"/>
</form>

我默认大家是跟我一样的格式,如果不一致,那么请自行修改相关参数!否则可能达不到预期效果!

三、建立搜索结果页

在你博客的根目录新建一个名为search的文件夹,注意search为第二步form的action的路径,请保持一致!然后在此目录下新建一个名为index.php的文件,文件内容如下:

<?php
/**
 * 搜索
 */
require_once '../common.php';
define('TEMPLATE_URL',     TPLS_URL.$nonce_templet.'/');//前台模板URL
define('TEMPLATE_PATH', TPLS_PATH.$nonce_templet.'/');//前台模板路径
$blogtitle = '搜索 '.$_GET['q'];//页面标题,可自行修改,参数'q'文本框input的name一致
include getViews('header');//加载头部文件
include getViews('search');//加载搜索结果页,这个在后面一步讲到
cleanPage(true);//清除注释并完成url优化(伪静态用)
?>

需要注意的地方我都标注了,请注意查看。

新建一个名为search.php的文件,内容有好多,且听我慢慢废话。

<?php if(!defined('EMLOG_ROOT')) {exit('error!');} ?>//下面是自定义搜索的代码,请自行修改成你自己的!
<div id="cse" style="width: 100%;">Loading</div>//id必须注意
<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('014039152445023026385:svfhiphjeeq');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    var search = '<?php echo $_GET['q']; ?>';//注意q与上面文本输入框的name属性一致!
    options.setInput(document.getElementById('s')); // 传递输入元素
    document.getElementById('searchform').setAttribute('onSubmit',"document.getElementById('s').select(); return false;"); // 按下搜索按钮选中搜索框,并阻止表单提交
    document.getElementById('s').value = search; // 设置搜索框的内容
    options.setAutoComplete(true);//自动完成,不需要此功能可去除此句,建议留下
    customSearchControl.draw('cse', options);//cse为上面div的id
    customSearchControl.execute(search);
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
<?php
include getViews('side');//加载边栏
include getViews('footer');//加载底部
?>

将search.php上传到你所用的模板模板,切记不要传到search文件夹下!

至此,你的emlog已经结合了谷歌的自定义搜索了,写得比较急,如有不对,敬请留言指出!具体样式和一些自定义的东西可自行修改,要看效果,敬请使用本站右上角的搜索框!

此方法适用于emlog3.5.X

« 上一篇

说两句吧:

*

*

正在回复: 取消

  1. 130#
    Kevn
    Kevn Google Chrome 30.0.1599.101 Windows 8.1 x64 Edition 2014-01-23 12:55 回复
    好期待
  2. 129#
    奶爸帮
    奶爸帮 Google Chrome 21.0.1180.89 Windows 7 2013-05-28 21:10 回复
    不知道现在5.1的可以用得上不!!!!楼主能更新不!
    小松
    小松 Google Chrome 27.0.1453.93 Mac OS X 10.8.4 2013-05-28 21:58 回复
    @奶爸帮:原理相同,懒得更新了
  3. 128#
    朵未
    朵未 Maxthon 3.0 Windows 7 x64 Edition 2012-10-12 20:44 回复
    今天加了一个,小松的index.php代码过期了。
    小松
    小松 Google Chrome 24.0.1284.2 Windows 8 x64 Edition 2012-10-12 21:28 回复
    @朵未:这个已经好久木有更新了……抽空去整理整理
  4. 127#
    晓泽
    晓泽 2011-01-30 20:28 回复
    本地试了好多次都是错位,还有侧边栏也会自动加载一个
  5. 126#
    gasa insurance
    gasa insurance 2010-11-27 22:32 回复
    I am curious just what Rogelio will say with this??

    Jaime
  6. 125#
    枫雪
    枫雪 2010-11-02 22:42 回复
    现在谷歌收录不错。也顺便把这个功能也解决了....
    小松
    小松 2010-11-02 22:54 回复
    @枫雪:呵呵,现在这个谷歌收录貌似emlog的都很给力~
    枫雪
    枫雪 2010-11-02 22:56 回复
    @小松:那是谷歌有个管理工具,百度也有,但是内测不给发号。还有你上面代码好像有点不完善,我直接JS代码全部用WP的了..
    小松
    小松 2010-11-02 23:11 回复
    @枫雪:我就是用上面代码的呀,没什么不对呀
  7. 124#
    小松
    小松 2010-09-26 18:46 回复
    @箴言:search文件夹里面只需要一个文件就ok了啊~
  8. 123#
    箴言
    箴言 2010-09-26 17:44 回复
    啊啊 啊,本来我想搞的!看了下太烦啦,不搞啦!搞到seach文件夹就不愿意搞啦······
  9. 122#
    ceshi
    ceshi 2010-09-23 20:37 回复
    回复61楼:
  10. 121#
    小松
    小松 2010-09-19 15:04 回复
    @电脑人生:恩,GG收录很快很快很快的,你基本不用担心~
1 2 3 4 5 6 ... »

随机日志:

推荐日志:

彩色标签:

sitemap