在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对象和字串之间的转换实例探讨
Apr 21 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
JavaScript中的 new 命令
May 22 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
OpenLayers实现图层切换控件
Sep 25 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 Javascript
js实现鼠标拖曳效果
Dec 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正确配置mysql(apache环境)
2011/08/28 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
用js遍历 table的脚本
2008/07/23 Javascript
cloudgamer出品ImageZoom 图片放大效果
2010/04/01 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
js运动事件函数详解
2016/10/21 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
python主线程捕获子线程的方法
2018/06/17 Python
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
年级组长自我鉴定
2014/02/22 职场文书
出生公证委托书
2014/04/03 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
质量保证书
2015/01/17 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
学校运动会简讯
2015/07/20 职场文书
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android