推广 热搜:   公司  中国  行业  快速  企业  设备  上海  未来  技术 

WordPress整合Google自定义搜索

   日期:2025-01-02     移动:http://www78564.xrbh.cn/mobile/quote/28690.html

以前一直用的google自定义搜索,只不过那是旧版的,自从换了 dot-a 这个主题,很多折腾过的效果和功能都要从新加上了。
废话少说,开始做咯:

效果:本站顶部的 站内搜索 功能!

推荐指数:★★★★★

推荐理由:高速Ajax加载,减少主机负担,自定义CSS,无广告,自定义展示结果,高亮搜索关键词,Adsense集成,Analytics 集成

具体方法:

1、用 Google帐号登录 http://www.google.com/cse/

2、创建一个 自定义搜索引擎,填写相关信息,选择标准版,搜索网站 填写如下格式:
zlz.im
?>
<?php get_header(); ?>
<div>
<div>
<div id="cse" style="width: 100%;">正在从Google 加载搜索结果......</div>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
function parseQueryFromUrl () {
var queryParamName = "q";
var search = window.location.search.substr(1);
var parts = search.split('&');
for (var i = 0; i < parts.length; i++) {
var keyvaluepair = parts[i].split('=');
if (decodeURIComponent(keyvaluepair[0]) == queryParamName) {
return decodeURIComponent(keyvaluepair[1].replace(/+/g, ' '));
}
}
return '';
}

google.load('search', '1', {style : google.loader.themes.GREENSKY});
google.setonLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('011726269853656484522:gvikl69lreq');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setAutoComplete(true);
options.enableSearchResultsonly();
customSearchControl.draw('cse', options);
var queryFromUrl = parseQueryFromUrl();
if (queryFromUrl) {
customSearchControl.execute(queryFromUrl);
}
}, true);
</script>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
5、在WP后台新建一个页面,名字随便,选择页面模板 cse 就是刚刚传上去的那个文件。之后点击发表页面,但隐藏显示。
访问:新建的页面,诸如:http://www.qvdhd.com/?search 这个是qvdhd 建的那个页面。此时你会发现出现了以个google的搜索条,并且可以使用了。

6、现在我们有了一个正常使用的search 页面,下面开始对首页的搜索条进行修改,注意上面和下面代码中 红色 部分,这个根据不同的博客,不一样,用了一个正则来处理传递参数,比如hzlzh的:

<form method="get" id="searchform" action="http://www.qvdhd.com/?search/">
<div><input type="text" value="Click Enter..." name="q" id="search_input" onfocus="this.value = this.value == this.defaultValue ? '' : this.value" onblur="this.value = this.value == '' ? this.defaultValue : this.value" /></div>
<div><input type="submit" alt="search" id="search_button" /></div>
</form>
7、大功告成,现在你要做的就是优化 CSS,使之看起来跟你的博客很搭!在Google控制面板选择 [外观]-[搜索元素]-[压缩视图]-[自定样式]

8、如果是主题作者,建议在后台加入search选项,集成这个功能,唉~~折腾!

本文地址:http://www78564.xrbh.cn/quote/28690.html    迅博思语 http://www78564.xrbh.cn/ , 查看更多

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


相关最新动态
推荐最新动态
点击排行
网站首页  |  二维码  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  粤ICP备2023022329号