在WordPress中加入Google搜尋功能的簡單步驟講解_javascript技巧
May 16, 2016 pm 03:22 PM網路上諸多寫怎麼在WordPress 中整合谷歌自訂搜尋的文章,但很少有提到如何整合v2版代碼的,今天透過實測來給大家講解一下,如何實現在WordPress中整合谷歌自訂搜索的。
取得Google自訂搜尋代碼
進入http://www.google.com/cse/
谷歌各系列帳號都是通用的,
所以如果你有gmail的話就可以順利進入這個自訂搜尋的系統
一系列的註冊、登陸你就進入到了 cse 主介面了,網速有時候會些許蛋疼的慢,所以大家要有耐心。
進入主界面點 新搜尋引擎
如下圖填寫內容:
勾選同意協議,再點下一步,
依自己喜好選擇樣式,下面會直接出現示範哦親。
再點下一步,就會出現程式碼了。
親們,你們取得代碼了嗎?我得到的程式碼如下:
<!-- Put the following javascript before the closing </head> tag. --> <script> (function() { var cx = '006739494664361712883:_id_bvfkgey'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); </script> <gcse:searchbox></gcse:searchbox> <!-- Place this tag where you want both of the search box and the search results to render --> //下面这一对标签就是谷歌搜索框要显示的标签, //即,你想把搜索框放哪就把这一对标签放哪。 <gcse:search></gcse:search>
新增搜尋頁面
在你的WordPress中新建一個頁面別名為search
假設設定了固定連接,而且這個頁面的訪問位址是
http://pangbu.com/google-search-in-wordpress
用html編輯模式,在文章中加入你剛才取得的程式碼。
想知道是什麼效果嘛?
效果
你可以在下面直接搜尋試試。
系統整合
好了,你已經有搜尋頁面了,現在我們還差整合到 WordPress 的搜尋中去。
麻煩嗎?當然不麻煩。
找到你主題搜尋框樣式定義的那個文件,
一般是searchform.php,
部分主題可能稍有不同。
有比較重要的兩句,
一個是表單提交地址,action="XXX"
一個是表單參數名稱name="s",
這裡的程式碼大同小異,我相信你能找到。
<form action="http://pangbu.com" method="get"> <input id="searchtxt" class="textfield searchtip" type="text" name="s" size="24" value="">
改成action="你剛才新建的那個搜尋頁面的url"
記著要帶http,例如
action="http://pangbu.com/google-search-in-wordpress"
整合程式碼範例
我的主題搜尋樣式修改後程式碼如下
<div id="searchbox" style="display: block;"> <form action="http://pangbu.com/google-search-in-wordpress" method="get"> <div class="scontent clearfix"> <input type="text" id="searchtxt" class="textfield searchtip" name="q" size="24" value=""> <input type="submit" id="searchbtn" class="button" value="搜索"> </div> </form> </div>

熱門文章

熱門文章

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

傳聞 Google Pixel 9 和 Pixel 9 Pro 將在發佈時配備 Creative Assistant AI

Pixel 9 Pro XL 的 Google Tensor G4 在 原神 方面落後於 Tensor G2

Google app beta APK teardown reveals new extensions coming to Gemini AI assistant

Google AI 為開發者發佈 Gemini 1.5 Pro 和 Gemma 2

儘管做出了七年更新承諾,Google Pixel 9 智慧型手機仍不會搭載 Android 15

新的 Google Pixel 桌面模式在新鮮影片中展示,可能是 Motorola Ready For 和 Samsung DeX 的替代方案

谷歌向大多數用戶開放 AI Test Kitchen & Imagen 3
