在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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
iview form清除校验状态的实现
Sep 19 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
我的论坛源代码(五)
2006/10/09 PHP
实用函数4
2007/11/08 PHP
php下使用iconv需要注意的问题
2010/11/20 PHP
php中实现简单的ACL 完结篇
2011/09/07 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
phpfpm的作用和用法
2019/10/10 PHP
PHP7修改的函数
2021/03/09 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
python多线程socket编程之多客户端接入
2017/09/12 Python
解决DataFrame排序sort的问题
2018/06/07 Python
Python如何读写二进制数组数据
2020/08/01 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
教学评估实施方案
2014/03/16 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
综合素质自我评价评语
2015/03/06 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
2016党校学习心得体会
2016/01/07 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
讲解Python实例练习逆序输出字符串
2022/05/06 Python