飞龙博客

前端文字教程

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

feilong.org 修订于2010-05-17 10:23:51 您好，第 396 位朋友！

今天飞龙博客尝试了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，测试。

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

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

所在分类： wordpress

新作：

旧文：