在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 相关文章推荐
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
微信小程序全局变量功能与用法详解
Jan 22 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
实例详解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
adodb与adodb_lite之比较
2006/12/31 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
vuejs绑定class和style样式
2017/04/11 Javascript
基于vue实现分页效果
2017/11/06 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
前端性能优化建议
2020/09/17 Javascript
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
Python判断字符串与大小写转换
2015/06/08 Python
python 系统调用的实例详解
2017/07/11 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
Python调用C语言程序方法解析
2020/07/07 Python
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
Sql面试题
2013/03/20 面试题
小学生获奖感言范文
2014/02/02 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
升职演讲稿范文
2014/05/23 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
仓库管理制度范本
2015/08/04 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis