在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 CSS 修改学习第四章 透明度设置
Feb 19 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
js实现加载更多功能实例
Oct 27 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
vue.js 实现a标签href里添加参数
Nov 12 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
PL-880隐藏功能
2021/03/01 无线电
PHP实现MySQL更新记录的代码
2008/06/07 PHP
第四章 php数学运算
2011/12/30 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
个人自我评价分享
2013/12/20 职场文书
合作意向书格式及范文
2014/03/31 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
2015年端午节活动总结
2015/02/11 职场文书
论文致谢词范文
2015/05/14 职场文书
博士论文答辩开场白
2015/06/01 职场文书
毕业赠语大全
2015/06/23 职场文书
企业年会祝酒词
2015/08/11 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书