在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 对Cookie 操作的封装小结
Dec 31 Javascript
优化javascript的执行速度
Jan 23 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
javascipt基础内容--需要注意的细节
Apr 10 Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 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消息队列用法实例分析
2016/02/12 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
php生成无限栏目树
2017/03/16 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
python清除字符串里非字母字符的方法
2015/07/02 Python
Python多进程原理与用法分析
2018/08/21 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
python selenium xpath定位操作
2020/09/01 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
应用化学专业职业生涯规划书
2013/12/31 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
旷课检讨书范文
2014/10/30 职场文书
财务检查整改报告
2014/11/06 职场文书
2014年教育工作总结
2014/11/26 职场文书
学校运动会感想
2015/08/10 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技