將 Google 搜尋框整合至 WordPress

WordPress 雖然是個非常強大的 CMS,但我覺得「搜尋」是他所有功能裡面最雞肋的,內建的搜尋功能無法結合多組字串,也沒有支援高亮或是進階搜尋等,其實不是很方便。有的人會選擇使用外掛增強 WordPress 內建的搜尋功能,或是額外自己寫一些 function 補足,不過我們也可以把搜尋這件事情交給強大的 Google,畢竟他們就是做搜尋起家的,透過 Google 搜尋我們的網站,比內建的方便很多喲。

▼ Google 搜尋結果示意圖

實際呈現結果,可以參考我的搜尋頁面:http://muki.tw/search/?q=muki

我最近也使用 Google Search 替換了內建的搜尋,使用方法很簡單,操作也是中文說明很好入手。不過要整合至 WordPress 還是有需要注意的部分,為了以後使用方便,特地將幾個重要的步驟記起來,也供大家參考使用。


使用 Google 自訂搜尋

Google 自訂搜尋改版後,總算將新舊控制台合併起來了,步驟也簡單許多,跟著以下的說明開始做吧!

步驟一

到新版 Google 自訂搜尋,新增你的網站資料。使用方法很簡單:

  • 「要搜尋的網站」欄位:填入你的 WordPress 位置
  • 「語言」:繁體中文
  • 「搜尋引擎的名稱」:填入你的網站名稱

最後按下藍色的「建立」按鈕,即可新建完成。

步驟二

在左側選單,點選「編輯搜尋引擎」,在下拉選單找到剛剛新增的搜尋引擎設定。點選後可以看到裡面有許多跟搜尋引擎相關的設定。請選擇「外觀和風格」,我們要調整搜尋顯示的樣式,才會更完整嵌入 WordPress。

  • 版面配置:請使用「2 頁」,它會讓搜尋框跟搜尋結果分開顯示。
  • 圖片搜尋結果的版面配置:隨便選,自己開心就好。
  • 選擇或自定樣式:可以選擇自己喜愛的樣式,也可以自定,之後都可以再回來修改。

▼ 不太清楚怎麼選擇的話,可以參考我的設定圖片,照著選就好囉!記得按下儲存才會更新你的設定。

步驟三(重要!)

終於到重頭戲了!在「外觀與風格」的選單內,找到下方的「儲存並取得程式碼」,我們要在這邊設定 WordPress 的一些資訊。
點擊「搜尋結果詳細資料」,會跳出一個視窗:

  • 指定要顯示搜尋結果的目標網站完整網址:這邊請填上你的 WordPress 網址,就是你的搜尋結果網址。網址結構可以從 WordPress 自訂。我是寫 http://muki.tw/search/
  • 指定網址的內嵌查詢參數名稱:請輸入 q

最後記得按下「儲存」喔。

▼ 可參考以下截圖的設定

Google 搜尋的設定先到此告一段落,接下來請打開你的 WordPress 後台,要開始修改 WordPress 的檔案囉。


修改 WordPress 設定

步驟一

請複製剛剛 Google 提供的程式碼,請參考圖片,先複製紅框處的<script></script>

▼ 參考圖片的紅框處範圍,進行選取與複製。

步驟二

打開header.php,找到<head>,在他的上面貼上剛剛你複製的那段程式碼。

步驟三

同樣在header.php,搜尋search關鍵字,這邊會根據佈景主題的寫法而有所不同。你有可能會找到這段程式碼:

<?php get_search_form(); ?>

或者是找到input這樣的表單語法:

<form method="get" ...>
  <input type="text" class="search" value="搜尋" ... />
</form>

不管是那一種呈現方式,我們要找的程式碼是用來「顯示搜尋框」的語法。找到的後請替換成:

<gcse:searchbox-only></gcse:searchbox-only>

步驟四

再來進入 WordPress 控制台,選擇「頁面」→「新增頁面」。我們要在這個頁面顯示 Google 的搜尋結果,所以請先將編輯器切換成「文字」模式,然後輸入以下語法:

<gcse:searchresults-only></gcse:searchresults-only> 

接著我們要確認使用搜尋框之後,搜尋會跳到這一頁才對。還記得我們在設定 Google 搜尋的第 3 個步驟,有設定「指定要顯示搜尋結果的目標網站完整網址」嗎?我們要利用 WordPress 可以自定網址結構的特性,將這個 URL 新增到 WordPress 頁面的網址結構中。

我之前設定的網址是http://muki.tw/search,所以我在固定網址的地方,只要打上search即可。

▼ 文字不懂沒關係,請看圖片示意:

最後按下「發表」,這樣使用 google 自訂搜尋框搜尋關鍵字之後,就會利用參數q代入我們的搜尋字串,然後將結果顯示在頁面上。

實際呈現結果,可以參考我的搜尋頁面:http://muki.tw/search/?q=muki


Google 搜尋框其他設定

要整合至 WordPress,最重要的步驟就是前面那大兩部分,包含在 Google 搜尋控制台,以及在 WordPress 的設定。最繁複的先做好,先讓 Google 搜尋框可以跑,後面的設定對你應該都是小兒科啦!

在「外觀風格」的選單,可以自由調整搜尋樣式;還有其他選單可以自行玩玩看,因為都是中文介紹,所以應該很好上手!
希望大家都可以自由打造屬於自己的搜尋喲~ enjoy it!


  • 寫的很詳細,謝謝分享。

    • 謝謝 >/////<

  • Bubble Lee

    寫的不错,学习啦!

  • Wong Sui Hong

    想不到這麼正的女生不只是博客,還是個coder。
    不過還是建議在Child theme https://codex.wordpress.org/Child_Themes 上進行更改會更理想,否則每次佈景升級就得手動更新一次

  • Jian-Yuan Su

    寫得真好,圖文並茂,感謝

  • 新手請教 @@”
    1. 步驟二的打開header.php是指佈景主題下的header.php對嘛?
    2. 在上方貼程式碼,是多打了一個e嗎??

    • 1. 是的
      2. 是 head 沒錯,感謝已更正
      3. 搜尋框的樣式會因為你的佈景主題 CSS 所影響,所以要自行再做一些調整喔。

  • Jill Chang

    我在佈景主題編輯器裡找不到”header.php”這些字眼…..到底要去哪裡崁入呢??? 請幫幫忙!!

    • mukiwu

      也許你的佈景主題作者沒有製作 header.php 這個檔案,那你可以把每個 php 檔案都打開來看看有沒有類似的語法

    • 那你可以看看 index.php 有沒有 程式碼,因為每個佈景主題的結構不太一樣,假設你使用的佈景主題比較複雜,還是要先了解一下他們的結構才比較好找檔案喔。

  • Nicole Tang

    Hi 小美女 MUKI, 真的謝謝您的無私分享..不知為何.我按您教的步驟做好後, 在搜尋時..出現
    Warning: Cannot modify header information – headers already sent by (output started at /home3/goldglobe/public_html/index.php:3) in /home3/goldglobe/public_html/wp-includes/pluggable.php on line 1167
    不知如何修正呢?

    • 你好,我不太確定這個是甚麼原因,不知道你現在解決了沒?
      如果還沒的話可以留下網址讓我看一下唷^^

    • 孫敏荃

      請問這有辦法在自己的網站中使用以圖搜尋嗎?

    • 你要看 google 有沒有支援這功能唷