• WordPress整合Google自定义搜索


    以前一直用的google自定义搜索,只不过那是旧版的,自从换了 dot-a 这个主题,很多折腾过的效果和功能都要从新加上了。
    废话少说,开始做咯:

    效果:本站顶部的 站内搜索 功能!

    推荐指数:★★★★★

    推荐理由:高速Ajax加载,减少主机负担,自定义CSS,无广告,自定义展示结果,高亮搜索关键词,Adsense集成,Analytics 集成

    具体方法:

    1、用 Google帐号登录 http://www.google.com/cse/

    2、创建一个 自定义搜索引擎,填写相关信息,选择标准版,搜索网站 填写如下格式:
    zlz.im/*

    3、进入控制面板 可以获得,诸如:搜索引擎的唯一 ID: 011726269853656484522:gvikl69lreq

    ———– 分 割 线 ———-以下开始在WordPress中操作————

    4、(又要用到Wordpress页面模版这个功能,不了解的可以看这里 WordPress页面模板的使用及短代码调用 )
    在桌面创建一个名为 cse.php 的文件,之后上传到 WP 主题目录中,[注意这里的代码不完全是Google 生成的,添加了正则传参部分]文件内容如下:

    <?php
    /*
    Template Name: cse
    */
    ?>
    <?php get_header(); ?>
    <div>
    <div>
    <div id="cse" style=" 100%;">正在从Google 加载搜索结果......</div>
    <script src="//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', {style : google.loader.themes.GREENSKY});
    google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('011726269853656484522:gvikl69lreq');
    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>
    </div>
    <?php get_sidebar(); ?>
    </div>
    <?php get_footer(); ?>
    5、在WP后台新建一个页面,名字随便,选择页面模板 cse 就是刚刚传上去的那个文件。之后点击发表页面,但隐藏显示。
    访问:新建的页面,诸如:http://www.qvdhd.com/?search 这个是qvdhd 建的那个页面。此时你会发现出现了以个google的搜索条,并且可以使用了。

    6、现在我们有了一个正常使用的search 页面,下面开始对首页的搜索条进行修改,注意上面和下面代码中 红色 部分,这个根据不同的博客,不一样,用了一个正则来处理传递参数,比如hzlzh的:

    <form method="get" id="searchform" action="http://www.qvdhd.com/?search/">
    <div><input type="text" value="Click Enter..." name="q" id="search_input" onfocus="this.value = this.value == this.defaultValue ? '' : this.value" onblur="this.value = this.value == '' ? this.defaultValue : this.value" /></div>
    <div><input type="submit" alt="search" id="search_button" /></div>
    </form>
    7、大功告成,现在你要做的就是优化 CSS,使之看起来跟你的博客很搭!在Google控制面板选择 [外观]-[搜索元素]-[压缩视图]-[自定样式]

    8、如果是主题作者,建议在后台加入search选项,集成这个功能,唉~~折腾!

    PS:Google Site Search 和 Google analytics 和 Google adsense 都是相当的完美,自己折腾去吧~

  • 相关阅读:
    Java 异常基础详解
    Try-with-resources
    Java集合详解
    Java面向对象之多态
    Java面向对象之继承
    Java面向对象之封装
    Java 接口
    Java抽象类
    Java类和对象
    Java 数组结构
  • 原文地址:https://www.cnblogs.com/zhongbin/p/3927396.html
Copyright © 2020-2023  润新知