WordPress

2015.05.20

將 Google 搜尋框整合至 WordPress


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;
}

歡迎給我點鼓勵,讓我知道你來過 :)

guest
18 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Nel Tseng
7 years ago

寫的很詳細,謝謝分享。

muki
7 years ago
Reply to  Nel Tseng

謝謝 >/////<

Bubble Lee
Bubble Lee
7 years ago

寫的不错,学习啦!

Wong Sui Hong
Wong Sui Hong
7 years ago

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

muki
7 years ago
Reply to  Wong Sui Hong

老實說還真的沒用過 child theme,我來研究一下 >_ <

Wong Sui Hong
Wong Sui Hong
7 years ago
Reply to  muki

Child theme對套用其他作者主題的網站是很有幫助的 =)
我之前幫公司建立網站的時候每次更新我就得手動更改一次,好不方便 =(
http://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/
http://www.elegantthemes.com/blog/resources/wordpress-child-theme-tutorial

(還是你有什麼網站也能分享嗎?)

Wong Sui Hong
Wong Sui Hong
7 years ago
Reply to  muki

午安,你的網站是用思源黑體對嗎?能不能分享訂製中文字體的方法?我嘗試了好久還是不行

muki
6 years ago
Reply to  Wong Sui Hong

我是改整個系統的字體,不單只有網站喔。所以你可以去找找系統的改法 ^^

我也是參考網路文章的

Jian-Yuan Su
Jian-Yuan Su
6 years ago

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

吳志峯
6 years ago

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

muki
6 years ago
Reply to  吳志峯

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

Jill Chang
Jill Chang
6 years ago

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

muki
5 years ago
Reply to  Jill Chang

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

Nicole Tang
Nicole Tang
5 years ago

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
不知如何修正呢?

muki
5 years ago
Reply to  Nicole Tang

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

孫敏荃
孫敏荃
4 years ago
Reply to  muki

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

muki
4 years ago
Reply to  孫敏荃

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

Copyright (C) MUKI space* / Reborn Theme All Rights Reserved.