在WordPress中加入Google搜尋功能的簡單步驟講解_javascript技巧
網路上諸多寫怎麼在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>

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

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

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

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

Dreamweaver CS6
視覺化網頁開發工具

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

熱門話題

Google在 Pixel 8 系列中引入了 DisplayPort 替代模式,並且在新推出的 Pixel 9 系列中也採用了該模式。雖然它主要是為了讓您透過連接的螢幕鏡像智慧型手機顯示,但您也可以將其用於桌面

谷歌最近回應了有關 Pixel 9 系列 Tensor G4 性能的擔憂。該公司表示,該 SoC 的設計初衷並不是為了超越基準。相反,該團隊專注於使其在 Google 想要的領域中表現良好。

Google's AI assistant, Gemini, is set to become even more capable, if the APK teardown of the latest update (v15.29.34.29 beta) is to be considered. The tech behemoth's new AI assistant could reportedly get several new extensions. These extensions wi

Pixel 9 系列即將上市,原定於 8 月 13 日發布。根據最近的傳言,Pixel 9、Pixel 9 Pro 和 Pixel 9 Pro XL 將與 Pixel 8 和 Pixel 8 Pro(亞馬遜售價 749 美元)一樣,配備 128 GB 儲存空間。

自從 Android Authority 展示Google隱藏在 Android 14 QPR3 Beta 2.1 中的新 Android 桌面模式以來,已經過了幾個月。緊接著 Google 為 Pixel 8 和 Pixel 8 新增 DisplayPort Alt 模式支援之後

更多與 Pixel 9 系列相關的宣傳資料已在網路上洩漏。作為參考,在 91mobiles 分享多張圖片後不久,新的洩漏事件也出現了,其中還展示了 Pixel Buds Pro 2 和 Pixel Watch 3 或 Pixel Watch 3 XL。這次

谷歌距離全面展示新硬體還有大約兩週的時間。像往常一樣,無數消息來源洩露了有關新 Pixel 設備的詳細信息,無論是 Pixel Watch 3、Pixel Buds Pro 2 還是 Pixel 9 智慧型手機。看來公司也

谷歌的 AI Test Kitchen 包括一套供用戶使用的 AI 設計工具,現已向全球 100 多個國家的用戶開放。此舉標誌著世界各地的許多人第一次能夠使用 Imagen 3、Googl
