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 自定義搜索