在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代码
Dec 04 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
js实现双色球效果
Aug 02 Javascript
Vue实现简单的拖拽效果
Aug 25 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 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/12/26 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
使用Python来开发微信功能
2018/06/13 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
编写strcpy函数
2014/06/24 面试题
采购文员岗位职责
2013/11/20 职场文书
银行贷款承诺书
2014/03/29 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书