其實每一個使用 WordPress 架設的部落格都有自帶搜尋功能,但是遠不如使用 Google 自定義搜尋來得快、狠、準,並且還能為你的部落格帶來 Google Adsense 的廣告收益。今天的主題製作學習筆記,就要告訴大家如何為你的主題加上這個功能。

 

首先,你必須要有 Google 的帳號(如果你有 GMail 帳號就代表你有 Google 帳號),沒有的朋友,請自行去申請一個,這裡不做帳號申請說明。以下僅就申請 Google 自定義搜尋做說明。

 

請大家到 Google Adsense 的網站新增一個 Adsense 廣告,在設定頁面填寫所有必填選項資料。

 

請記住,在第三頁的設定中,就是「開啟搜尋結果網頁」的設定那裡,請記得一定要選擇「在我的網站中開啟結果」,網址填上「 https://你的網域名稱/search 」,也別忘了在你的部落格裏新增一個「搜尋結果」的分頁,分頁代稱填寫「search」,先存成草稿不發佈,下面我們會用到這個頁面。也請你在這個頁面將搜尋結果的寬度和廣告位置設定完成。

 

當你填寫完所有選項之後,就能得到 Google 自定義搜尋的程式碼,一共有兩種,分別是「搜尋框程式碼」和「搜尋結果程式碼 」。我們要做修改的就是這兩部份。

每一個標準的主題裏都會有搜尋表單(searchform.php)的檔案,如果你的沒有,請新建一個。搜尋表單大約長得像這樣:

接著請你跟 Google 自定義搜尋的程式碼,那個「搜尋框程式碼」做比對,然後修改代碼,我自己這款主題則將代碼更改為下述代碼:

大家如果有跟你自己的 Google 搜尋框代碼做過比較,應該可以從代碼裏發現我把 id=”cse-search-box” 這段給刪除了,並且給了這段代碼一個新的屬性。這樣搜尋框的樣式比較能符合我這款主題。而且因為我的搜尋框放在頁首檔案(header.php)裏,所以以下是我在頁首的代碼:

瞧,這樣代碼是不是很簡潔呢?而且搜尋框的樣式,我用了 searchbar 的區塊屬性來註明,這樣在 CSS 樣式表裡,你就能自由編輯外觀囉!

 

現在編輯我們之前新增的搜尋結果分頁,請你新增一個搜尋結果(search.php)的檔案到你的主題裏,代碼如下:

大家可以看到我在以上代碼裏做了註解,請你把得來的搜尋結果代碼貼在註解處,最後將檔案存成 search.php、並放到主題資料夾裏。接著編輯剛剛新增的「搜尋結果」分頁,選擇「Google自定義搜索結果」的模板,分頁內容保持空白即可,並將分頁發佈。如此,你就有內嵌的 Google 自定義搜尋頁面了。

 

如需觀看 Demo,請於本文右上角的搜尋框裏隨便輸入你想搜尋的字串,點擊「GO」即可得到搜尋結果頁面。歡迎大家圍觀 :mrgreen:

 

 

文by覺非/WordPress 主題製作學習筆記.之八


 飛翔於文字國裏的蝴蝶,我是愛寫文的女子,不要看我的人,請你看看我的文,那裡面全是我的心.和我想對你說的話……

 StartOver.回。到。原。點 https://blogs.carrielis.com