在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实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
Extjs4中的分页应用结合前后台
Dec 13 Javascript
js操纵dom生成下拉列表框的方法
Feb 24 Javascript
JS函数重载的解决方案
May 13 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
微信小程序实现图片选择并预览功能
Jul 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
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
总结js函数相关知识点
2018/02/27 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
python 内置模块详解
2019/01/01 Python
python调试神器PySnooper的使用
2019/07/03 Python
使用pandas读取文件的实现
2019/07/31 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
python如何更新包
2020/06/11 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
SQL面试题
2013/04/30 面试题
团日活动策划书
2014/02/01 职场文书
公司经理聘任书
2014/03/29 职场文书
校长师德表现自我评价
2015/03/05 职场文书
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL