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

▼ Google 搜尋結果示意圖

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

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

使用 Google 自訂搜尋

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

步驟一：新增網站資料

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

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

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

步驟二：調整外觀和風格

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

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

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

步驟三（重要！）：設定搜尋資料

終於到重頭戲了！在「外觀與風格」的選單內，找到下方的「儲存並取得程式碼」，我們要在這邊設定 WordPress 的一些資訊。

點擊「搜尋結果詳細資料」，會跳出一個視窗：

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

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

▼ 可參考以下截圖的設定

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

修改 WordPress 設定

步驟一：複製程式碼

請複製剛剛 Google 提供的程式碼，請參考圖片，先複製紅框處的

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

步驟二：貼上程式碼

打開 header.php，找到 <?php wp_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 的搜尋結果，請新增「自訂 HTML 區塊」並貼上語法：

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

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

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

▼ 文字不懂沒關係，請看圖片示意：

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

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

Google 搜尋框其他設定

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

在「外觀風格」的選單，可以自由調整搜尋樣式；還有其他選單可以自行玩玩看，因為都是中文介紹，所以應該很好上手！

希望大家都可以自由打造屬於自己的搜尋喲～ enjoy it!

我的 CSS 設定

2022.05.03 更新

最近發現 Google Search 呈現的樣式，有的不是很滿意，但也無法透過控制台做調整，所以我就直接修改了他的 CSS，我將自己使用的 CSS 語法放在下方，每一段樣式都有說明作用，有需要的朋友可以自由取用。

/* 讓縮圖的框線可以完美包住圖片，不會出現一條線 */
.gs-result .gs-image {
  display: block;
}

/* 放大縮圖 開始 */
.gs-web-image-box {
  padding: 0 !important;
  width: 155px !important;
}
.gs-web-image-box .gs-image {
  max-width: 140px !important;
}
/* 放大縮圖 結束 */

/* 讓頁碼有圓角，並稍微調整間距，不要讓他那麼擠 */
.gsc-results .gsc-cursor-box .gsc-cursor-page {
  padding: 5px 10px;
  border-radius: 5px;
}

/* 調整左上角的「排序依據」下拉選單，讓文字不會換行 */
.gsc-selected-option {
  white-space: nowrap;
}

/* 高亮關鍵字 開始 */
.gs-title b {
  color: #2B8FB4 !important;
}
.gs-snippet b {
  color: #2B8FB4 !important;
}
/* 高亮關鍵字 結束 */

/* 調整搜尋文字的大小 */
.gs-webResult .gs-snippet {
  font-size: .9rem;
}

1

發生錯誤。