將 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,找到,在他的上面貼上剛剛你複製的那段程式碼。

步驟三

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

PHP

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

PHP

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

PHP

步驟四

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

PHP

接著我們要確認使用搜尋框之後,搜尋會跳到這一頁才對。還記得我們在設定 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!

想對你說 (ノ>ω<)ノ

感謝您閱讀到最後,對文章有任何疑問歡迎留言給我,我會盡快回覆。

Faceook / 不定時分享前端資訊與新知,歡迎追蹤!

 

如果這篇文章對您有幫助,請幫我點擊下方的廣告,讓我有更多的動力寫寫寫 (๑•̀ㅂ•́)و✧

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

寫的很詳細,謝謝分享。

muki
5 years ago
Reply to  Nel Tseng

謝謝 >/////<

Bubble Lee
Bubble Lee
5 years ago

寫的不错,学习啦!

Wong Sui Hong
Wong Sui Hong
5 years ago

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

muki
5 years ago
Reply to  Wong Sui Hong

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

Wong Sui Hong
Wong Sui Hong
5 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
5 years ago
Reply to  muki

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

muki
5 years ago
Reply to  Wong Sui Hong

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

我也是參考網路文章的

Jian-Yuan Su
Jian-Yuan Su
5 years ago

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

吳志峯
5 years ago

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

muki
5 years ago
Reply to  吳志峯

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

Jill Chang
Jill Chang
5 years ago

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

muki
3 years ago
Reply to  Jill Chang

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

Nicole Tang
Nicole Tang
3 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
3 years ago
Reply to  Nicole Tang

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

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

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

muki
3 years ago
Reply to  孫敏荃

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

粉絲團