首页 » 建站技术 » WordPress » 浏览内容

为WordPress博客集成Google自定义搜索功能


2010-12-25 20:44:00 3,113 0 发表评论 字体: 作者:C.K.
标签: googleWordPress备忘

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

下面讲一下如何在wordpress中集成Google自定义搜索引擎:
第一步:注册Google自定义搜索引擎:
首先,我们需要到Google上面去注册一个自己的搜索引擎。访问http://www.google.com/cse/,用你的Google账户登录之后,创建新的搜索引擎。

在Sites(网站)中加上自己的博客链接,这样搜索结果就限定在你设置的网站内了。注意通配符的使用。

在外观那里选择一个托管选项。我选的是第一个,其他的如样式之类的就看你自己的喜欢随便选吧。

上面的托管选项选项选好后,保存设置,就可以获取代码了

自动生成的代码很多很长,如果你不介意的话也可以直接使用,不过我是不喜欢那么冗长的代码了,

我们只需要下面这段代码就行了

<div id="cse" style="width: 100%;">正在从Google 加载搜索结果......</div>
  •                         <script src="http://www.google.com.hk/jsapi" type="text/javascript"></script>
  •                         <script type="text/javascript">
  •                             google.load('search', '1', {language : 'UTF-8'});
  •                             google.setOnLoadCallback(function(){
  •                             var customSearchControl = new google.search.CustomSearchControl('<?php echo $options['google_cse_cx']; ?>');
  •                             customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
  •                             customSearchControl.draw('cse');
  •                             var match = location.search.match(/q=([^&]*)(&|$)/);
  •                             if(match && match[1]){
  •                                 var search = decodeURIComponent(match[1]);
  •                                 customSearchControl.execute(search);
  •                             }
  •                         });
  •                     </script>
  •  <link rel="stylesheet" href="http://www.google.com/cse/style/look/greensky.css" type="text/css" />
  • 注意:'<?php echo $options['google_cse_cx']; ?>'这就是你的Google自定义搜索ID了。
  • 第二步:创建搜索结果页

    为了让搜索结果在博客内显示,我们需要在wordpress中创建一个新的页面,作为搜索结果展示的页面。定位到wordpress主题文件夹下,然后新建一个叫做Google-Custom-Search.php(文件名无所谓)的模板文件,内容如下所示,注意到,中间的一段代码就是在第一步中Google自定义搜索引擎后台获取到的代码。不过你仔细看下,还是有点不同的哦。在customSearchControl.draw(‘cse’)下面还加了几行代码的。

    <?php
  • /*
  • Template Name: Google Custom Search Results
  • */
  • ?>
  • <?php get_header(); ?>
  • <?php $options = get_option('S_options');?>
  •             <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
  •             <div id="content" class="webshot">
  •                 <div class="f-s"></div>
  •                 <div class="f-m">
  •                
  •                     <div class="box" id="post-<?php the_ID(); ?>">
  •                         <div id="page-cnt"><div id="cse" style="width: 100%;">正在从Google 加载搜索结果......</div>
  •                         <script src="http://www.google.com.hk/jsapi" type="text/javascript"></script>
  •                         <script type="text/javascript">
  •                             google.load('search', '1', {language : 'UTF-8'});
  •                             google.setOnLoadCallback(function(){
  •                             var customSearchControl = new google.search.CustomSearchControl('<?php echo $options['google_cse_cx']; ?>');
  •                             customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
  •                             customSearchControl.draw('cse');
  •                             var match = location.search.match(/q=([^&]*)(&|$)/);
  •                             if(match && match[1]){
  •                                 var search = decodeURIComponent(match[1]);
  •                                 customSearchControl.execute(search);
  •                             }
  •                         });
  •                     </script>
  •  <link rel="stylesheet" href="http://www.google.com/cse/style/look/greensky.css" type="text/css" />    </div>
  •                     </div>
  •                 </div>
  •                 <div class="f-e"></div>
  •             </div><!-- /content -->
  •             <?php endwhile; ?>
  • <?php
  •     get_sidebar();
  •     get_footer();
  • ?>
  • 注意,上面代码中的Template Name后面填的名称,将会显示在wordpress后台文章/页面编辑器的模板选择框中。(greensky.css为搜索栏的CSS,需要自己定义css的,可以把下载在本地修改,或者完全自己重写。)

    将此模板文件通过FTP上传到服务器上相应的主题文件夹下,然后我们登录wordpress后台,创建一个新的页面,名字为cse(当然名字设置为其他也可以):

    第三步:修改站内搜索提交表单
    上面我们已经创建了一个搜索结果页了,但现在这个页面是一个孤立页面,没有和其他页面关联起来。接下来我们要做的事情,就是当用户点击你网站上任意页面的站内搜索按钮的时候,将用户引导到你刚刚创建的搜索结果页上

    在你的主题文件夹中找到相应的模板页,在模板页中找到站内搜索相关的代码,站内搜索相关的代码一般是放在templates/header.php文件中,不同的主题,代码位置也许不同,大家可以尝试在整个主题文件夹中搜索包含“searchbox”关键字的文件。自用代码如下:

                    <form id="searchform" method="get" action="/search">
  •                 <label for="s">请输入关键字</label>
  •                 <input type="text" name="q" id="s" />
  •                 <button type="submit">搜索</button>
  •             </form>
  • 网上的代码,没有使用,仅作收藏:

    <div class="searchbox">
  • <form method="get" action="/">
  •   <input type="text" size="24" name="q" value="搜索文章...." class="textfield" style="float:left" onblur="if (this.value == '') {this.value = '搜索文章....';}" onfocus="if (this.value != '') {this.value = '';}"/>
  •   <input type="hidden" value="UTF-8" name="ie"/>
  •   <input class="submitSearch" type="submit" value="Search"></input>
  • </form>
  • </div>
  • 上面的search就是你刚才在WordPress后台中新建的搜索页面名称了。
    第四步:细微调整
    好了,其实到了这里,我们的Google自定义搜索功能就已经集成好了,不过由于众所周知的原因,我们使用Google.com搜索的时候经常会无厘头的被重置掉了,我们并不希望用户在我们网站上搜索文章的时候无缘无故被屏蔽掉了。所以为了保险起见,我们可以将第一步代码中引用的javascript文件地址修改成google.com.hk,这样所有的搜索都会使用google.com.hk(部分功能如adsense还是会使用google.com)。

    <script src="http://a.linji.cn/2010/12/125520wnY.jpg" type="text/javascript"></script>

    修改成:

    <script src="http://a.linji.cn/2010/12/125520uO4.jpg" type="text/javascript"></script>

    让搜索结果只包含文章页
    大多数博客为了便于用户查阅文章,都会对文章进行聚类,例如按文章标签(也就是关键词)聚类,按文章类别聚类,按存档年份或者月份聚类,等等,这样就会出现大量冗余的内容,对搜索引擎来说,这样的聚类可以让博客看起来内容更丰富些,同时站内链接比较健康,SEO效果会相对好,但这样一来,用户就不容易在搜索结果中快速找到他想看的文章了,因此我们在设置搜索结果的时候,最好让结果只包含文章内容页即可。

    要做到这一点,只需要在第一步中的“包含网站”中将原先的“linji.cn/*”替换成linji.cn/*.html”即可。

      网站统计 Statistics

      • 创建时间: 2005年1月3日 距今4971 天
      • 日志总数: 2461
      • 评论总数: 630
      • 标签总数: 654
      • 链接总数: 273
      • 最后更新: 2017-7-1 18:16:33
      • 您是本站第 13798034 位访客

      广告区 Guǎng Gào