在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创建和操作表格的函数集合
May 07 Javascript
预加载css或javascript的js代码
Apr 23 Javascript
JQuery中getJSON的使用方法
Dec 13 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
从零学JS之你需要了解的几本书
May 19 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
简单的分页代码js实现
May 17 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 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 fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
php防止sql注入的方法详解
2017/02/20 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
点击广告后才能获得下载地址
2006/10/26 Javascript
超简单的jquery的AJAX用法
2010/05/10 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
Vue3为什么这么快
2020/09/23 Javascript
python爬虫获取多页天涯帖子
2018/02/23 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
Python中包的用法及安装
2020/02/11 Python
python实现飞船大战
2020/04/24 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
好人好事事迹材料
2014/02/12 职场文书
超市创业计划书
2014/04/24 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
高中班主任心得体会
2016/01/07 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js