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

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

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

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

<!-- 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>
赞 (0)

相关推荐

  • WordPress开发中短代码的实现及相关函数使用技巧

    其实实现短代码很简单,我们只需要用到 WordPress 里面的一个函数就可以搞定短代码,外加自己的一个小函数,可以让短代码实现的轻松加愉快. 短代码实现原理 就像往 WP 一些动作里加钩子和过滤函数一样, 短代码只是经过封装了的针对文章输出内容的过滤器而已, 没有像有一些主题功能说的那么震撼.那么高深. 下面来一个简单例子: function myName() {//短代码要处理的函数 return "My name's XiangZi !"; } //挂载短代码 //xz为短代码名

  • 在WordPress中使用wp_count_posts函数来统计文章数量

    做一个全站统计是不是很酷?长久的博客越来越少,何不给自己的一个统计,看看自己在这个博客上努力了多少,不但给自己也给游客,wp_count_posts是在 WordPress 中用来统计文章数量的函数,可以统计所有类型的文章(post)和页面(page). 描述 wp_count_posts是在 WordPress 中用来统计文章数量的函数,可以统计所有类型的文章(post)和页面(page). 使用 //获取文章数量 $postcount = wp_count_posts(); //获取页面数量

  • 在WordPress中安装使用视频播放器插件Hana Flv Player

    在WordPress中安装使用视频播放器插件Hana Flv Player

    Hana Flv Player 是一个在 WordPress 中应用比较广泛的播放器插件, 该插件内置了5种媒体播放器,其播放文件以 flv 文件为主, 并将插入文件的按钮集成到 WordPress 后台的编辑界面上方便用户操作, 实在是一个不可多得的好插件. 内置的播放器 OS FLV V2.0.5 FlowPlayer V2.2.1 FlowPlayer V3.2.7 FLV Player Maxi MediaElement.js 内置播放器的特色我就不说了,网上搜搜吧,这些都是比较流行的播

  • 详解WordPress中分类函数wp_list_categories的使用

    wp_list_categories 函数是 WordPress 中用来罗列系统中分类的函数,该函数拥有许多控制输出的参数,今天突然被一个朋友问到,所以就大概整理了一下. 因为 WordPress 中内置扩展的小工具功能, 所以我们不经任何函数就可以在边栏或是其他我们想要的位置显示一个分类列表, 所以wp_list_categories函数就很少有人用到, 该函数使用起来有点类似于wp_list_bookmarks, wp_list_categories 描述 wp_list_categorie

  • WordPress开发中用于获取近期文章的PHP函数使用解析

    wp_get_recent_posts 函数在 WordPress 中是一个可以获取近期文章数组的函数,相较于其他的文章获取方式, wp_get_recent_posts 返回的将是一个数组而不是对象,所以在使用中对于一些新手或者是懒人,可能会更方便一些,下面我们就实例讲解一下这个函数. 描述 wp_get_recent_posts 英文解释很短,就不贴了, 中文大概意思是:获取最新文章的函数. 实际上这是一个 get_posts函数的再使用. 描述的再好也木用,下面看使用. 使用/用法 <?p

  • WordPress开发中自定义菜单的相关PHP函数使用简介

    函数意义 wp_nav_menu () 自定义菜单显示函数 register_nav_menu () 自定义菜单注册函数 – 单数 register_nav_menus () 自定义菜单注册函数 – 复数 (很蛋疼的一个复数形式) 以下举例均用 register_nav_menus () 这个复数形式,以免混淆. 使用位置 register_nav_menus () function.php 文件中,用于注册自定义菜单在后台的代码调用名称和后台显示名称. wp_nav_menu () 主题任意你

  • WordPress中用于获取搜索表单的PHP函数使用解析

    get_search_form 函数在 WordPress 中是用来提取预设的搜索表单或者默认的搜索表单的.因为官方这个函数没有中文的,所以我就简单写了一下. 描述 get_search_form 函数在 WordPress 中是用来提取自定义搜索表单或者默认的搜索表单的. 显示自定义表单还是显示默认表单,完全取决于您的主题中是否有search.php文件, 如果有该文件,则自动调用该文件,如果没有则显示默认的搜索表单. 使用 <?php get_search_form($echo = true

  • 详解WordPress开发中的get_post与get_posts函数使用

    get_post() 在一般主题制作时,get_post()函数我们一般很少会用到,但因为后面会讲到get_posts(),所以我们不得不先讲一下这个单数形式.这个函数的主要作用是,将一片指定的文章以一个对象或是数组的形式返回,以便我们后期利用.下面让我们简单的了解一下他的使用方法. get_post()函数说明 WordPress 的函数名总是那么浅显易懂,get_post()函数正如其表,即获得一篇文章,将一篇指定的文章以一个对象或是数组的形式返回,以便我们后期利用. 函数使用 <?php

  • WordPress开发中的get_post_custom()函数使用解析

    同get_post_meta()一样,用于返回文章的自定义字段值得一个函数,只不过get_post_custom()函数使用起来更简单,如果在循环中使用你甚至不需要设置任何参数. 其实get_post_custom()函数的基础实现与get_post_meta()大同小异~ get_post_custom()使用 get_post_custom($postid); 只接受一个参数 $postid文章id: 实例演示 if (have_posts()) : while (have_posts())

  • 解析WordPress中的post_class与get_post_class函数

    post_class() post_class 是 WordPress 内置的一个用于显示文章 class 名称的函数,该函数通常会为每一篇文章生成独一无二的 clss 值,如果你需要制作你自己的主题,而且还需要一点个性的话,那你最好驻足一下,使用该函数并配合灵活的 css 代码,我们可以制作出个性化十足的 WordPress 博客. post_class 函数描述 该函数通常会为每一篇文章生成独一无二的 clss 值,可以很方便使用于文章所在的节点中. 函数使用 向其他的诸如 header_i

  • 详解WordPress中调用评论模板和循环输出评论的PHP函数

    comments_template comments_template 函数是一个调用评论模板的函数,使用起来很简单,与get_header()等函数一样,是一个include文件类函数,今天来讲一下他的使用. 描述 上面已经讲过了,就是调用评论模板的一个函数. 使用 <?php comments_template( $file, $separate_comments ); ?> 其中 $file 需要调用的文件名 默认值: /comments.php $separate_comments 是

随机推荐