WordPress整合Google自定義搜索

之前一直用的google自定義搜索，只不過那是舊版的，自從換了 dot-a 這個主題，不少折騰過的效果和功能都要重新加上了。
廢話少說，開始作咯：

效果：本站頂部的 站內搜索 功能！

推薦指數：★★★★★

推薦理由：高速Ajax加載，減小主機負擔，自定義CSS，無廣告，自定義展現結果，高亮搜索關鍵詞，Adsense集成，Analytics 集成

具體方法：

一、用 Google賬號登陸 http://www.google.com/cse/

二、建立一個 自定義搜索引擎，填寫相關信息，選擇標準版，搜索網站 填寫以下格式：
zlz.im/*

三、進入控制面板 能夠得到，諸如：搜索引擎的惟一 ID： 011726269853656484522:gvikl69lreq

———– 分 割 線 ———-如下開始在WordPress中操做————

四、（又要用到Wordpress頁面模版這個功能，不瞭解的能夠看這裏 WordPress頁面模板的使用及短代碼調用 ）
在桌面建立一個名爲 cse.php 的文件，以後上傳到 WP 主題目錄中，[注意這裏的代碼不徹底是Google 生成的，添加了正則傳參部分]文件內容以下：

<?php
/*
Template Name: cse
*/
?>
<?php get_header(); ?>
<div>
<div>
<div id="cse" style="width: 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(); ?>
五、在WP後臺新建一個頁面，名字隨便，選擇頁面模板 cse 就是剛剛傳上去的那個文件。以後點擊發表頁面，但隱藏顯示。
訪問：新建的頁面，諸如：http://www.qvdhd.com/?search 這個是qvdhd 建的那個頁面。此時你會發現出現了以個google的搜索條，而且可使用了。

六、如今咱們有了一個正常使用的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>
七、大功告成，如今你要作的就是優化 CSS，使之看起來跟你的博客很搭！在Google控制面板選擇 [外觀]-[搜索元素]-[壓縮視圖]-[自定樣式]

八、若是是主題做者，建議在後臺加入search選項，集成這個功能，唉~~折騰！

PS：Google Site Search 和 Google analytics 和 Google adsense 都是至關的完美，本身折騰去吧~