宝宝健康成长网首页刘易桉宝宝健康成长 林林微博 育儿护理知识 宝宝网址导航
当前位置: 首页 >> 宝宝建站 >> 整合新Google自定义搜索到WordPress

整合新Google自定义搜索到WordPress

Google自定义搜索代码更新了,在启动Google自定义搜索引擎一文中,我使用的搜索结果托管选项是选择在非Google网站上托管结果的iframe 方式。昨天打开Google cse,发现已经不再支持iframe托管自定义搜索,据说是旧的Google自定义搜索代码是通不过W3C HTML 验证的,虽然不更新代码仍可正常使用Google自定义搜索,不过,我还是又折腾了一番新自定义搜索代码,现在与大家共勉下。

1.建立Google自定义搜索

登录http://www.google.com/cse/,创建自定义搜索:

输入自定义搜索引擎的名称和需要搜索的网站等相关信息后创建Google自定义搜索引擎;

打开您创建的搜索引擎——控制面板——选择Google自定义搜索的外观;

最重要一步,获得Custom Search Element 代码。代码中有你的专属搜索引擎的ID,诸如:13579734766857921304:i-dk。。。,代码备用。

2.创建Google自定义搜索结果页面

新建一个名为 googlecse.php 的页面模板文件,上传到 WP 主题目录中,将上面获得的代码加入该新建php中,内容如下:

<?php
/*
Template Name: googlecse
*/
?>
<?php get_header(); ?>
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  function parseQueryFromUrl () {
    var queryParamName = "q";
    var search = window.location.search.substr(1);
    var parts = search.split(‘&’);
    for (var i = 0; i < parts.length; i++) {
      var keyvaluepair = parts[i].split(‘=’);
      if (decodeURIComponent(keyvaluepair[0]) == queryParamName) {
        return decodeURIComponent(keyvaluepair[1].replace(/\+/g, ‘ ‘));
      }
    }
    return ”;
  }
  google.load(‘search’, ’1′, {language : ‘zh-CN’});
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl(‘您的专属id’);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.setAutoComplete(true);
    options.enableSearchResultsOnly();
    customSearchControl.draw(‘cse’, options);
    var queryFromUrl = parseQueryFromUrl();
    if (queryFromUrl) {
      customSearchControl.execute(queryFromUrl);
    }
  }, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
<?php get_footer(); ?>

然后,Wordpress后台新建Pages页面,模板就选用googlecse。命名为search。该页面用来输出Google自定义搜索结果,因此要设置该页面为不显示。使用wp_list_pages()函数和exclude参数把该页面隐藏。

3.用Google自定义搜索替换Wordpress自带搜索

找到主题中的searchform.php,替换成如下代码:

<form method="get" id="searchform" action="/search">
  <input type="text" value="" name="q" onfocus="if (this.value == '') {this.value = '';}" onblur="if (this.value == '') {this.value = '';}" />

<input id="searchsubmit" type="submit" value="站内搜索"/>

</form>

最后要做的就是CSS美化,上面代码中主要是要定义#searchsubmit。

演示就是本站的“站内搜索”,我这个没有更改google cse的default.css,你也可以修改下css上传到自己空间,然后,定义stylesheet即可。

其实,WordPress自带的搜索比Google自定义搜索更有针对性,尤其是文章内链比较多的博客,google cse一搜就是数十页,只要有这个关键字出现的网页全部列出,真正有用的其实一页足矣。但是使用Google自定义搜索可以减少Wordpress数据库的查询,对于主机来说好处也是明显的。

敬请留言当前共有 2 条评论

  1. [...] 每个域名都有www和非www两种网址形式,出于SEO、PR值权重等目的,我们一般会选定一个首选域,首选域是您希望您的网站在搜索结果中所显示的格式。比如,本网站的首选域是http://nervkernel.hp2.jp/blog,网址格式就是http://nervkernel.hp2.jp/blog/wordpress-host.html,而不是带www尾巴的。接下来,就需要对非首选域即http://nervkernel.hp2.jp/blog进行301重定向,这样,对搜索引擎就实现最友好的跳转了。 [...]

发表评论

^留言没头像?教你设置头像!
我的应用 Follow@cnbabyup 宝宝问答>  0-1岁  1-3岁  3-6岁 手气不错