在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 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
JavaScript 继承详解(四)
Jul 13 Javascript
Javascript 模式实例 观察者模式
Oct 24 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 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
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
jQuery html()等方法介绍
2009/11/18 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
Python3分析处理声音数据的例子
2019/08/27 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
python Xpath语法的使用
2020/11/26 Python
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
销售找工作求职信
2013/12/20 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
2015年元旦标语大全
2014/12/09 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python