在WordPress中加入Google搜索功能的简单步骤讲解


Posted in Javascript onJanuary 04, 2016

网上诸多写怎么在 WordPress 中整合谷歌自定义搜索的文章,但很少有提到如何整合v2版代码的,今天通过实测来给大家讲解一下,如何实现在 WordPress中整合谷歌自定义搜索的。

获取谷歌自定义搜索代码
进入http://www.google.com/cse/
谷歌各系列账号都是通用的,
所以如果你有gmail的话你就可以顺利进入这个自定义搜索的系统
一系列的注册、登陆你就进入到了 cse 主界面了,网速有时候会些许蛋疼的慢,所以大家要有耐心。
进入主界面点 新建搜索引擎
如下图所示填写内容:

在WordPress中加入Google搜索功能的简单步骤讲解

勾选同意协议,再点下一步,
按自己喜好选择样式,下面会直接出现演示哦亲。
再点下一步,就会出现代码了。
亲们,你们获取代码了吗?我获得的代码如下:

<!-- Put the following javascript before the closing </head> tag. -->
<script>
 (function() {
 var cx = '006739494664361712883:_id_bvfkgey';
 var gcse = document.createElement('script');
 gcse.type = 'text/javascript';
 gcse.async = true;
 gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
  '//www.google.com/cse/cse.js?cx=' + cx;
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(gcse, s);
 })();
</script>
<gcse:searchbox></gcse:searchbox>
 
<!-- Place this tag where you want both of the search box and the search results to render -->
//下面这一对标签就是谷歌搜索框要显示的标签,
//即,你想把搜索框放哪就把这一对标签放哪。
<gcse:search></gcse:search>

添加搜索页面
在你的WordPress中新建一个页面别名叫search
假设设置了固定连接,而且这个页面的访问地址是
http://pangbu.com/google-search-in-wordpress
用html编辑模式,在文章中添加你刚才获取的代码。
想知道是什么效果嘛?

效果
你可以在下面直接搜索一下试试。

系统整合
好了,你已经有了搜索页面了,现在我们还差整合到 WordPress 的搜索中去。
麻烦吗?当然不麻烦。
找到你主题搜索框样式定义的那个文件,
一般是searchform.php,
部分主题可能稍有不同。
有比较重要的两句,
一个是表单提交地址,action="XXX"
一个是表单参数名称name="s",
这里的代码大同小异,我相信你能找到。

<form action="http://pangbu.com" method="get">
<input id="searchtxt" class="textfield searchtip" type="text" name="s" size="24" value="">
把action="XXX"
改成action="你刚才新建的那个搜索页面的url"
记着要带http,比如
action="http://pangbu.com/google-search-in-wordpress"
name="s"改成name="q"

整合代码示例
我的主题搜索样式修改后代码如下

<div id="searchbox" style="display: block;">
 <form action="http://pangbu.com/google-search-in-wordpress" method="get">
 <div class="scontent clearfix">
  <input type="text" id="searchtxt" class="textfield searchtip" name="q" size="24" value="">
  <input type="submit" id="searchbtn" class="button" value="搜索">
 </div>
 </form>
</div>
Javascript 相关文章推荐
通过隐藏option实现select的联动效果
Nov 10 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
关于Vue项目跨平台运行问题的解决方法
Sep 18 Javascript
Vue-Router基础学习笔记(小结)
Oct 15 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 #Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 #Javascript
JavaScript原型及原型链终极详解
Jan 04 #Javascript
jQuery实现简单的点赞效果
May 29 #Javascript
jQuery+Ajax实现无刷新操作
Jan 04 #Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 #Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 #Javascript
You might like
基于Zend的Captcha机制的应用
2013/05/02 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
js比较和逻辑运算符的介绍
2013/03/10 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
python实现转圈打印矩阵
2019/03/02 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
python logging设置level失败的解决方法
2020/02/19 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
Pycharm修改python路径过程图解
2020/05/22 Python
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
实习老师个人总结的自我评价
2013/09/28 职场文书
办公室主任职责范本
2014/03/07 职场文书
银行自荐信怎么写
2015/03/05 职场文书
小学大队长竞选稿
2015/11/20 职场文书