分享本文

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

其實每一個使用 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://carrielis.com


請拍掌支持我繼續創作

↓↓↓ 若你喜歡我的文章,請在下方的「讚賞鍵」按讚,我會因此獲得收入。

回饋由 LikeCoin 基金會出資,您只要註冊/登入帳號(fb、google 帳號都可以註冊,流程超快),按五次左鍵,就可以贊助我的文章,完全免費。感謝支持。 ↓↓↓

飛翔於文字國裏的蝴蝶,我是愛寫文的女子,不要看我的人,請你看看我的文,那裡面全是我的心.和我想對你說的話……
StartOver.回。到。原。點 https://carrielis.com

分享本文

分享在 facebook
分享在 twitter
分享在 linkedin
分享在 whatsapp
分享在 telegram

“WordPress 主題製作學習筆記:幫你的主題加上「Google 自定義搜尋」功能” 有 2 則留言

請留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

相關文章

捲動至頂端