在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中__proto__与prototype的关系深入理解
Dec 04 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 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调用google接口生成二维码示例
2014/04/28 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
Javascript面向对象之四 继承
2011/02/08 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
Python实现的计算器功能示例
2018/04/26 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
Python 控制终端输出文字的实例
2019/07/12 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
python类中super() 的使用解析
2019/12/19 Python
python如何写出表白程序
2020/06/01 Python
python Selenium 库的使用技巧
2020/10/16 Python
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
德国机车企业:FC-Moto
2017/10/27 全球购物
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
介绍一下UNIX启动过程
2013/11/14 面试题
蓝颜请假条
2014/04/11 职场文书
科技馆观后感
2015/06/08 职场文书