自定义Google Search API设置教程

最新推荐文章于 2024-05-01 21:15:48 发布

dingshi7798

最新推荐文章于 2024-05-01 21:15:48 发布

阅读量370

点赞数

文章标签： javascript php ViewUI

本文介绍如何为博客或网站配置Google Search API替代默认的WordPress搜索功能。通过简单的设置步骤，即可实现自定义搜索并展示博客文章、图片、视频等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因此，今天我做了一些关于如何为您的博客/网站设置Google Search API的教程。可以使用它代替WordPress主题中通常提供的标准搜索功能。设置非常简单！您可以自定义搜索以仅显示博客/网站和其他搜索（例如图像，视频，新闻和其他搜索）的结果（完整列表请参见下文）。

现场演示
 下载源

怎么做

获取您的Google API密钥
将您的密钥放在下面的代码中
自定义搜索（添加您自己的域名！）
自定义样式以适合您的网站
请享用！

JavaScript

google.load("search", "1", {"language" : "en"});

// Call this function when the page has been loaded
function initialize() {
var searchControl = new google.search.SearchControl();

// site restricted web search
var siteSearch = new google.search.WebSearch();
siteSearch.setUserDefinedLabel("jquery4u.com");
siteSearch.setUserDefinedClassSuffix("siteSearch");
siteSearch.setSiteRestriction("jquery4u.com");
searchControl.addSearcher(siteSearch);
	
//Search API Topics
searchControl.addSearcher(new google.search.WebSearch());
searchControl.addSearcher(new google.search.NewsSearch());
searchControl.addSearcher(new google.search.BlogSearch());
searchControl.addSearcher(new google.search.ImageSearch());
searchControl.addSearcher(new google.search.BookSearch());
searchControl.addSearcher(new google.search.VideoSearch());
//others
//searchControl.addSearcher(new google.search.LocalSearch());
//searchControl.addSearcher(new google.search.PatentSearch());
	
// create a drawOptions object
var drawOptions = new google.search.DrawOptions();
// tell the searcher to draw itself in tabbed mode
drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
searchControl.draw(document.getElementById("searchcontrol"), drawOptions);
}
google.setOnLoadCallback(initialize);

HTML

Type in a search below!

CSS

/* the width of the controls (keep same as gsc-results for flush look) */
#searchcontrol { width:600px; }
.gsc-control { width:600px; }
/* the width of the search results box; no height value = nice auto look  */
.gsc-results { width:600px; }
/* the width of the search input */
.gsc-input { width:20px; }
/* hide "powered by google" (optional) */
.gsc-branding { display:none; }
/* custom colors */
.gs-title a { color:orange; font-weight:bold; }
#searchcontrol a { color:orange; }

开发人员指南

From: https://www.sitepoint.com/google-search-api-ajax/