和 "Ajax" 有关的文章

2007-07
31

在WordPress中加入Google AJAX搜索

WordPress ，，， 浏览：1,241 8

这两天在为博客添加 Google 搜索功能的时候了解到了 Google Ajax Search ，听闻其功能很强大，于是马上 Google 了一下，学习怎样加入到 WordPress 中，其实不只是 WordPress，所有的页面都可以使用 Google Ajax Search。

在使用过程中参考了徘徊在玻璃之城的文章 Google AJAX Search 使用简介，成功地将 Google AJAX Search 加入到了我的 blog 中。下面给大家分享一下具体怎样做：（更新：由于 Google Ajax 搜索代码很多，比较拖速度，故本站暂停使用。本文介绍的方法仍然有效。重新加入了 Google Ajax 搜索，演示地址请看存档页。）

首先你要做的是去 Google 的网站申请一个 Google AJAX Search API ，点击左下角的确认框，并且输入你的 blog 地址后，你会得到一个长长的 Key 。

然后把如下代码加入到你的 header.php 的 <head> 和 </head> 之间。

<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=请在此处填写你的key" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
function OnLoad() {
// create a search control
var searchControl = new GSearchControl();
searchControl.setLinkTarget(GSearch.LINK_TARGET_SELF); //可选项，如果删除此行，搜索结果将在新页中打开
searchControl.setResultSetSize(GSearch.LARGE_RESULTSET); //可选项，如果删除此行，搜索结果将从10条变为4条
 
// create a draw options object so that we
// can position the search form root
var options = new GdrawOptions();
options.setSearchFormRoot(document.getElementById("searchForm"));
options.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
 
var siteSearch = new GwebSearch();
siteSearch.setUserDefinedLabel("填入你的网站标签");
siteSearch.setUserDefinedClassSuffix("siteSearch");
siteSearch.setSiteRestriction("填入你的blog网址");
searchControl.addSearcher(siteSearch);
 
// standard, unrestricted web search
searchControl.addSearcher(new GwebSearch());
 
searchControl.draw(document.getElementById("searchResults"), options);
}
GSearch.setOnLoadCallback(OnLoad);
//]]>
</script>

几个需要修改的地方已经在代码中说明。

接下来就看你需要什么样的显示方式了，你可以选择把搜索栏和搜索结果分开显示，或者在一起显示。

1、分开显示：在你需要显示搜索结果的地方（例如 index.php 或 single.php 中）加入如下代码：

<div id="searchResults"/></div>

然后在你需要显示搜索栏的地方（例如 sidebar.php 中）加入如下代码：

<div id="searchForm"></div>

2、一起显示：在你需要显示搜索栏和结果的地方加入如下代码：

<div id="searchResults"/></div>

注意：把搜索栏和搜索结果一起显示不需要 <div id=”searchForm”></div>，在 <div id=”searchResults”/></div> 处会显示搜索栏和搜索结果。

最后，再把搜索栏和搜索结果的 CSS 样式加入你的 style.css 中，然后按照你自己的风格修改一下，就大功告成了。CSS 代码如下（需要修改的地方已经在代码中说明）：

/** Copyright 2005 Google Inc. All rights reserved. */
 
/* the GSearchControl CSS Classes
* .gsc-control :主显示框
*/
.gsc-control {
width: 98%;
}
 
.gsc-control div {
position: static;
}
 
/* control inputs
* .gsc-search-box : 搜索栏大小
* .gsc-input : the text input area
* .gsc-keeper : the save link below savable results
*/
form.gsc-search-box {
width: 96%;
}
 
/*
* This table contains the input element as well as the search button
* Note that the search button column is fixed width, designed to hold the
* button div‘s background image
*/
table.gsc-search-box {
width : 100%;
margin-bottom : 2px;
margin-top : 5px;
margin-left: -6px;
}
 
td.gsc-search-button {
width : 1%;
}
 
td.gsc-clear-button {
width : 14px;
}
 
/**
* undo common generic table rules
* that tend to impact branding
*/
table.gsc-branding td,
table.gsc-branding {
margin: 0 0 0 0;
padding: 0 0 0 0;
border : none;
}
 
table.gsc-branding {
border-style : none;
border-width : 0px;
border-spacing : 0px 0px;
width : 100%;
}
 
td.gsc-branding-text {
vertical-align : top;
}
 
td.gsc-branding-text div.gsc-branding-text {
padding-bottom : 2px;
text-align : right;
color : #676767;
font-size : 11px;
margin-right : 2px;
}
 
td.gsc-branding-img-noclear {
width : 51px;
vertical-align : bottom;
}
 
td.gsc-branding-img {
width : 60px;
vertical-align : bottom;
}
 
input.gsc-search-button {
margin-left : 4px;
}
 
div.gsc-clear-button {
display : inline;
text-align : right;
margin-left : 4px;
margin-right : 4px;
padding-left : 10px;
background-repeat: no-repeat;
background-position: center center;
background-image: url(’http://www.google.com/uds/css/clear.gif’);
 
cursor : pointer;
}
 
/*
* Given that this is sitting in a variable width tabel cell, the idea is
* for it to consume the entire cell. The adjacent cell contains the search
* button and that is a fixed width cell.
*/
input.gsc-input {
padding-left : 2px;
border-style : solid;
border-width : 1px;
border-color : #BCCDF0;
width : 99%;
}
 
/* tabbed mode of search control
* .gsc-tabsArea : the box containing all of the tabs
* .gsc-tabsAreaInvisible : same as above, but this is the state when search has been cleared
* .gsc-tabHeader : an individual tab
* .gsc-tabHeader.gsc-tabhActive : the active tab
* .gsc-tabHeader.gsc-tabhInactive : an inactive tab
* .gsc-tabData : the data area/box containg results and header data for each tab
* .gsc-tabData.gsc-tabdActive : the data area for the active tab
* .gsc-tabData.gsc-tabdInactive : the data area for inactive tabs
*/
.gsc-tabsArea {
clear: both;
margin-top: 6px;
}
 
.gsc-tabsAreaInvisible {
display : none;
}
 
.gsc-tabHeader {
display: inline;
cursor: pointer;
display: inline;
padding: 2px 10px !important;
border: 1px solid #999; /*可修改搜索结果标题栏的边框颜色*/
border-bottom: none;
margin-bottom: 0;
margin-right: -6px; /*不要修改*/
margin-left: 10px; /*不要修改*/
}
 
.gsc-tabHeader.gsc-tabhActive {
background: #f3fce6; /*正在显示的搜索结果标题栏的背景*/
color: #0C72A2; /*正在显示的搜索结果标题栏的字体颜色*/
 
}
 
.gsc-tabHeader.gsc-tabhInactive {
 
}
 
.gsc-tabData.gsc-tabdActive {
display: block;
border: 1px solid #999; /*搜索结果显示栏的边框颜色*/
padding:10px;
background: #f3fce6; /*搜索结果显示栏的背景颜色*/
margin-bottom:10px; /*搜索结果显示栏内文字字体*/
font-size:14px;
}
 
/*此代码只对IE6适用*/
* html .gsc-tabData.gsc-tabdActive {
display: block;
border: 1px solid #999; /*搜索结果显示栏的边框颜色*/
padding:10px;
background: #f3fce6; /*搜索结果显示栏的背景颜色*/
margin-bottom:10px; /*搜索结果显示栏内文字字体*/
font-size:14px;
margin-top:1px; /*不要更改，保证tab显示效果和firefox一致*/
}
 
/*此代码只对IE7适用*/
*+ html .gsc-tabData.gsc-tabdActive {
display: block;
border: 1px solid #999; /*搜索结果显示栏的边框颜色*/
padding:10px;
background: #f3fce6; /*搜索结果显示栏的背景颜色*/
margin-bottom:10px; /*搜索结果显示栏内文字字体*/
font-size:14px;
margin-top:1px; /*不要更改，保证tab显示效果和firefox一致*/
}
 
.gsc-tabData.gsc-tabdInactive {
display: none;
}
 
/* tab specific results header supression
* - no twiddle, tabbed mode runs in full expand mode
* - no title
* - no stats
*/
.gsc-tabData .gsc-resultsHeader .gsc-title {
display: none;
}
 
.gsc-tabData .gsc-resultsHeader .gsc-stats {
display: none;
}
 
.gsc-tabData .gsc-resultsHeader .gsc-results-selector {
display : none;
}
 
/* the results for each section
* .gsc-resultsbox-{visible,invisible} : a complete-collection of results including headers
* .gsc-results : the collection of results for a given searcher
* .gsc-result : a generic result within the control. each result has this class, as well as .gsc-xxxResult where xxx is web, image, local, blog, etc.
*/
 
.gsc-resultsbox-visible {
display : block;
}
 
.gsc-resultsbox-invisible {
display : none;
}
 
.gsc-results {
clear: both;
padding-bottom: 2px;
}
 
.gsc-result {
margin-bottom: 10px;
}
 
.gsc-result .gs-title {
height: 1.4em;
overflow: hidden;
}
 
/* specialized, result type specific, fine grained controls */
.gsc-result div.gs-watermark {
display: none;
}
 
/* Ads
*/
.gsc-results .gsc-result img.gs-ad-marker {
display: none;
}
 
/*** End of Control, Begin Results ***/
 
/* generic, cross cutting result style
* - in the form of .gs-result .gs-xxx where xxx is the generic style
* .gs-title : typically the first line of a result, typically a link, image results over ride this, since for image results, the image is the link
* .gs-divider : typically seperates results from ads
* .gs-visibleUrl : typically the last line of a result, displayed in green. sometimes a link (like in blog search)
* .gs-clusterUrl : for news, and other similar services, this is a cluster of additional results
* img.gs-image : an actial image in a result
* .gs-phone : a phone number
* .gs-address : an address (includes street, city, region, country)
* .gs-streetAddress : a street (including #)
* .gs-city : a city
* .gs-region : a region (zip code, area, etc.)
* .gs-country : a country
* .gs-snippet : snippetized content
 
* .gs-watermark : indicator that user selected this result
* .gs-metadata : generic metadata, e.g.,
* .gs-image-box : generic container for a result‘s image (within a table)
* .gs-text-box : generic container for a result‘s text content (within a table). Note that this class, and image-box are only used in video
*/
.gs-result .gs-title,
.gs-result .gs-title * {
color: #0C72A2; /*搜索结果内容标题栏颜色 */
font-weight: bold;
text-decoration: underline;
padding-bottom:5px;
}
 
.gs-divider {
padding-bottom: 8px;
text-align: center;
color: #676767;
}
 
.gs-result a.gs-visibleUrl,
.gs-result .gs-visibleUrl {
color: #789d47; /*搜索结果来源网站的颜色 */
text-decoration: none;
}
 
.gs-webResult div.gs-visibleUrl-long {
width : 100%;
overflow : hidden;
display : none;
}