WordPress 整合 Google 自定義搜尋

WordPress 有自帶的搜尋功能，但是這個自帶的搜尋功能不僅搜尋結果匹配度很低，而且也會影響到伺服器的效能。做搜尋比較牛逼的就是 Google 搜尋引擎，那我們能不能將 google 的搜尋技術應用到我們站內的搜尋呢？答案是可以的。下面 WordPress 教程網為大家介紹 WordPress 整合 Google 自定義搜尋的兩種方式：

簡潔版整合 (搜尋結果使用 Google 的域名)

這個方法比較簡單：只要複製並貼上此程式碼即可。
首頁訪問：http://www.google.com/cse/tools/create_onthefly?hl=zh-CN

複製選框中的搜尋程式碼替換你網站的搜尋程式碼即可。搜尋框的樣式為 Google 定義的，可以透過 js 來改變搜尋框和搜尋按鈕的樣式。本站例項：

<!-- 本教程由 WordPress 教程網 （http://www.wpnoob.cn） 提供 -->
<!-- 使用該程式碼即表示您同意接受 Google 自定義搜尋服務條款。 -->
<!-- 有關服務條款，請訪問 http://www.google.com/cse/docs/tos.html?hl=zh-CN -->
<form name="search-form"  id="searchbox_demo" action="http://www.google.com/cse">
  <input type="hidden" name="cref" value="" />
  <input type="hidden" name="ie" value="utf-8" />
  <input type="hidden" name="hl" value="zh-CN" />
  <input  name="q" type="text"  />
  <input type="submit" name="sa"   value="搜尋" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/tools/onthefly?form=searchbox_demo&lang=zh-CN"></script>
<script>
//透過 js 來控制搜尋框的樣式
$(function() {
$(".search-input").css({"padding":"3px 8px"});
})
</script>

自定義版整合（搜尋結果使用自己網站的域名）

在簡潔版中的搜尋結果顯示的域名是 google 的，如果我們想要自己的域名作為搜尋結果怎麼設定呢？方法如下：
第一步：註冊 Google 自定義搜尋引擎
首先，我們需要到 Google 上面去註冊一個自己的搜尋引擎。訪問 http://www.google.com/cse/，用你的 Google 賬戶登入之後，建立新的搜尋引擎。

透過點選「ADD」按鈕來新增你網站的搜尋引擎，這樣可以限定搜尋為站內搜尋。設定完成後進入「外觀」選擇好佈局後點選「儲存並獲取程式碼」

<script>
  (function() {
    var cx = '018092602284569563163:ylokktt9zcq';
    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:search></gcse:search>

第二步：建立搜尋結果頁
為了讓搜尋結果在部落格內部顯示，我們需要在 WordPress 中建立一個新的頁面，用來顯示搜尋的搜尋結果。我們在本地新建一個檔案，命名為 search.php，檔案內容複製下面的即可：

<?php
/*
Template Name: search
*/
?>
<?php get_header(); ?>
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com.hk/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'zh-CN'});
  google.setOnLoadCallback(function(){
        var customSearchControl = new google.search.CustomSearchControl('你的 Google 自定義搜尋 ID');
        customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        customSearchControl.draw('cse');
    });
</script>
<link rel="stylesheet" href="http://www.google.com.hk/cse/style/look/shiny.css" type="text/css" />
<?php get_footer(); ?>

其中將「你的 Google 自定義搜尋 ID」替換為 Google 給你的「搜尋引擎的唯一 ID」，可以在控制面板的基本資訊內獲取。

儲存後將 search.php 上傳至你的主題根目錄下。 search.php 檔案中的樣式控制需要根據你網站例項來設定。

最後在你部落格的後臺 – 頁面中新建頁面，在頁面屬性的模版中找到 search 並選擇，寫好標題釋出即可。

第三步：修改當前主題的搜尋提交的表單

這裡算是最關鍵的一步啦，就是當使用者點選你部落格上任意頁面的站內搜尋按鈕的時候，將使用者引導到你剛剛建立的搜尋結果頁上。這裡我們需要在主題資料夾中找到搜尋框所在的檔案，每個主題都不同，我用我在使用的一款主題來演示吧，找到類似以下的程式碼：

<?php
//搜尋
?>
<form method="get"  action="/search" >
<input  name="q" type="text" placeholder="輸入 回車搜尋" autofocus x-webkit-speech="" onfocus="if (this.value == '輸入 回車搜尋') {this.value = '';}" onblur="if (this.value == '') {this.value = '輸入 回車搜尋';}" value="<?php echo $_GET['s']?$_GET['s']:'輸入 回車搜尋'?>"><input type="submit" value="搜尋" >
</form>

其中我們需要修改的地方大致如下：

method=」get」
action=」/search」
還有文字框 name=」q」

注意：*action 的地址可以根據你自己固定連結的方式來修改，只要保證能訪問到我們剛新建的頁面就行；不管你原先主題搜尋框的 name 等於什麼，都將引號內的字母改成 q 。

第四步：初始化搜尋關鍵字

這是無縫整合 Google 自定義搜尋框的最後一步，完成他你就大功告成了哦。這一步我們要做的是：從 URL 中提取瀏覽者搜尋的關鍵詞，然後呼叫 Google API 進行搜尋。聽起來很複雜？無需理解，簡單的跟著做就可以了：

開啟我們剛才新建的 search.php，在 Google 的程式碼 customSearchControl.draw(『cse』, options); 後插入以下程式碼：

var match = location.search.match(/q=([^&]*)(&|$)/);
if(match && match[1]){
    var search = decodeURIComponent(match[1]);
customSearchControl.execute(search);
}

大功告成啦，從此以後你依舊可以使用主題原始的搜尋框而享受 Google 自定義搜尋帶來的好處。以下是本站成功配置後的效果圖：

WordPress 整合 Google 自定義搜尋