飞龙博客

深入经藏 智慧如海

博客整合Google自定义搜索菜鸟操作步骤

feilong.org 修订于2011-06-05 12:07:22 1,133

今天飞龙博客尝试了Google的自定义搜索,想把它整合到博客上来。参考有关资料,写个简明方法步骤,方便朋友们尝试。本日志更新网址:http://feilong.org/Google-cse-into-blog 飞龙第4次修订于20100517,5次修订于20110605

一、新建cse模板。步骤如下:

1、用记事本把以下代码记录下来:

<?php
/*
Template Name: cse
*/
 ?><?php get_header(); ?>
 
<div id="cse">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'en'});
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('**************************');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.draw('cse');
 
//下面是在google代码基础上添加的
var match = location.search.match(/q=([^&]*)(&|$)/);
if(match && match[1]){
    var search = decodeURIComponent(match[1]);
    customSearchControl.execute(search);
}
  }, true);
//添加结束
 
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/greensky.css" type="text/css" />
 
<?php get_footer(); ?>

2、把它保存为mycse.php,然后上传到你的主题模板文件夹。

二、 新建页面。方法如下:

1、标题随意,比如"搜索"。
2、日志缩略名即post slug,取名“search”
3、点击html源代码编辑模式,输入:

<div id="cse"> 正在搜索...</div>

4、在“页面模板”下拉框选择刚才上传的 “cse”
5、发布和查看效果。比如:http://feilong.org/search

三、改造搜索模板。步骤如下:

1、找到主题中 searchform.php,在后面加上如下html代码:

<form action="/search"  id="searchbox">
<input type="text" name="q" id="input_search" />
<input type="submit" value="搜索" />
</form>

2、原来的搜索表单可以删除,也可以保留便于自己平时使用。

四、ok,测试。

更新网址:http://feilong.org/google-cse-into-blog
最初发布:20100517 10:23:51 feilong.org 于广州

加入收藏夹,查看更方便。

所在分类: wordpress

新作:

旧文:

飞龙前端QQ群