在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 相关文章推荐
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 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
真正的ZIP文件操作类(php)
2007/07/21 PHP
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
javascript 页面划词搜索JS
2009/09/28 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
python命令行参数sys.argv使用示例
2014/01/28 Python
python通过线程实现定时器timer的方法
2015/03/16 Python
Python随机生成带特殊字符的密码
2016/03/02 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
python实现字符串加密成纯数字
2019/03/19 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
美国家具网站:Cymax
2016/09/17 全球购物
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
高中英语演讲稿范文
2014/04/24 职场文书
师德师风自查总结
2014/10/14 职场文书
步步惊心观后感
2015/06/12 职场文书