利用 Google 自定義搜尋引擎取代 WordPress 站內搜尋功能實作筆記

前言

站內搜尋功能對網站效能影響較大，尤其當資料庫資料量龐大時，搜尋速度會變慢。透過 Google 自定義搜尋引擎（Google CSE）可以將搜尋負擔轉移給 Google，減輕伺服器壓力，適合想優化 WordPress 站內搜尋的工程師與自學者。

設定 Google 自定義搜尋引擎

  1. 進入 Google 自定義搜尋引擎設定頁面，點擊【Add】新增搜尋引擎。
  2. 在「要搜尋的網站」輸入你的網站網域（例如：*.piglife.tw），可設定搜尋範圍。
  3. 選擇網站語言（中文網站選擇繁體中文）。
  4. 輸入搜尋引擎名稱以便識別。
  5. 按下【建立】完成搜尋引擎建立。

調整搜尋結果顯示設定

  1. 建立後點擊【控制台】進入管理頁面。
  2. 選擇左側【外觀和風格】，版面配置選擇【只顯示結果】。

選擇「只顯示結果」是因為搜尋表單會將關鍵字傳到此頁面，Google CSE 會在該頁面顯示搜尋結果。

  1. 點擊【儲存並取得程式碼】，複製產生的搜尋結果代碼。

在網站中嵌入搜尋結果代碼與建立搜尋表單

  1. 將複製的 Google CSE 代碼貼到你想顯示搜尋結果的頁面（例如 WordPress 的 search.php）。
  2. 建立搜尋表單，並設定 form 的 action 指向剛才貼入 Google CSE 代碼的頁面路徑。

範例搜尋表單：

<form role="search" method="get" id="searchform1" class="search-form" action="/search">
  <input type="hidden" name="cx" value="011351595289433252376:t_cbvf510bu" />
  <input type="text" name="q" size="31" placeholder="搜尋..." class="csetext" />
  <input type="submit" name="sa" value="搜尋" class="search_btn" />
</form>
  • action：設定為顯示搜尋結果的頁面路徑。
  • cx：Google CSE 代碼中的搜尋引擎 ID。
  • q：搜尋關鍵字參數。

實際應用與注意事項

完成以上設定後，使用者在搜尋表單輸入關鍵字並送出，會跳轉到指定結果頁面並顯示 Google CSE 搜尋結果。搜尋結果會顯示在你貼入代碼的位置，方便自訂版面。

需注意的是，Google CSE 只能搜尋已被 Google 索引的頁面，未被索引的內容不會出現在搜尋結果中。

完整程式碼

<form role="search" method="get" id="searchform1" class="search-form" action="/search">
  <input type="hidden" name="cx" value="011351595289433252376:t_cbvf510bu" />
  <input type="text" name="q" size="31" placeholder="搜尋..." class="csetext" />
  <input type="submit" name="sa" value="搜尋" class="search_btn" />
</form>

<!-- 將以下 Google 自定義搜尋引擎代碼貼入 /search 頁面 -->
<script async src="https://cse.google.com/cse.js?cx=011351595289433252376:t_cbvf510bu"></script>
<div class="gcse-searchresults-only"></div>
標籤
分享

相關文章