在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 相关文章推荐
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
基于openlayers实现角度测量功能
Sep 28 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
实例详解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
PHP模板解析类实例
2015/07/09 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
js a标签点击事件
2017/03/30 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
Python中标准库OS的常用方法总结大全
2017/07/19 Python
详解Python中如何写控制台进度条的整理
2018/03/07 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
python微信撤回监测代码
2019/04/29 Python
python爬虫中多线程的使用详解
2019/09/23 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
车祸赔偿收入证明
2014/01/09 职场文书
大学生职业生涯规划书模板
2014/01/18 职场文书
入党申请自荐书范文
2014/02/11 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
庆七一宣传标语
2014/10/08 职场文书
房屋租赁协议书
2014/10/18 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技