在WordPress中加入Google搜索功能的简单步骤讲解

 更新时间:2016年01月04日 17:43:56   作者:稍息少年  
这篇文章主要介绍了在WordPress中加入Google搜索的简单步骤讲解,谷歌搜索很有用,但同时也要注意在国内使用cse的连通性,需要的朋友可以参考下

网上诸多写怎么在 WordPress 中整合谷歌自定义搜索的文章,但很少有提到如何整合v2版代码的,今天通过实测来给大家讲解一下,如何实现在 WordPress中整合谷歌自定义搜索的。

获取谷歌自定义搜索代码
进入http://www.google.com/cse/
谷歌各系列账号都是通用的,
所以如果你有gmail的话你就可以顺利进入这个自定义搜索的系统
一系列的注册、登陆你就进入到了 cse 主界面了,网速有时候会些许蛋疼的慢,所以大家要有耐心。
进入主界面点 新建搜索引擎
如下图所示填写内容:

201614173911886.jpg (453×640)

勾选同意协议,再点下一步,
按自己喜好选择样式,下面会直接出现演示哦亲。
再点下一步,就会出现代码了。
亲们,你们获取代码了吗?我获得的代码如下:

<!-- 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>

相关文章

  • firefox浏览器下javascript 拖动层效果与原理分析代码

    firefox浏览器下javascript 拖动层效果与原理分析代码

    这篇文章主要给大家介绍了关于在firefox浏览器下如何利用javascript实现拖动层效果,以及其中的原理分析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,下面来一起看看吧
    2007-12-12
  • JavaScript实现大文件上传的示例代码

    JavaScript实现大文件上传的示例代码

    这篇文章主要为大家详细介绍了JavaScript实现大文件上传功能的示例代码,文中的代码讲解详细,对我们学习JavaScript有一定帮助,感兴趣可以跟随小编一起学习一下
    2022-11-11
  • Javascript玩转继承(二)

    Javascript玩转继承(二)

    这篇文章主要介绍了对象伪装来实现继承。我们在这里先来说一下这种方式的优缺点
    2014-05-05
  • 一次记住JavaScript的6个正则表达式方法

    一次记住JavaScript的6个正则表达式方法

    这篇文章主要介绍了一次记住JavaScript的6个正则表达式方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-02-02
  • JS拖拽排序插件Sortable.js用法实例分析

    JS拖拽排序插件Sortable.js用法实例分析

    这篇文章主要介绍了JS拖拽排序插件Sortable.js用法,结合实例形式分析了拖拽排序插件Sortable.js功能、使用方法及相关操作注意事项,需要的朋友可以参考下
    2019-02-02
  • javascript 原型继承介绍

    javascript 原型继承介绍

    最近接触了一下html5,当然,接触过html5的人都知道,html5也不过是提供一些新的标签而已,至于整下实现的核心,还是在javascript这里。
    2011-08-08
  • BootStrap 表单控件之单选按钮水平排列

    BootStrap 表单控件之单选按钮水平排列

    这篇文章主要介绍了BootStrap 表单控件之单选按钮水平排列的实现代码,需要的朋友可以参考下
    2017-05-05
  • ES6新特性四:变量的解构赋值实例

    ES6新特性四:变量的解构赋值实例

    这篇文章主要介绍了ES6新特性之变量的解构赋值操作,结合实例形式分析了ES6针对数组、对象等的解构赋值操作相关实现技巧,需要的朋友可以参考下
    2017-04-04
  • js版实现计算器功能

    js版实现计算器功能

    这篇文章主要为大家详细介绍了js版实现计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 给moz-firefox下添加IE方法和属性

    给moz-firefox下添加IE方法和属性

    给moz-firefox下添加IE方法和属性...
    2007-04-04

最新评论