首頁 web前端 js教程 在WordPress中加入Google搜尋功能的簡單步驟講解_javascript技巧

在WordPress中加入Google搜尋功能的簡單步驟講解_javascript技巧

May 16, 2016 pm 03:22 PM
google javascript wordpress 搜尋

網路上諸多寫怎麼在WordPress 中整合谷歌自訂搜尋的文章,但很少有提到如何整合v2版代碼的,今天透過實測來給大家講解一下,如何實現在WordPress中整合谷歌自訂搜索的。

取得Google自訂搜尋代碼
進入http://www.google.com/cse/
谷歌各系列帳號都是通用的,
所以如果你有gmail的話就可以順利進入這個自訂搜尋的系統
一系列的註冊、登陸你就進入到了 cse 主介面了,網速有時候會些許蛋疼的慢,所以大家要有耐心。
進入主界面點 新搜尋引擎
如下圖填寫內容:

201614173911886.jpg (453×640)

勾選同意協議,再點下一步,
依自己喜好選擇樣式,下面會直接出現示範哦親。
再點下一步,就會出現程式碼了。
親們,你們取得代碼了嗎?我得到的程式碼如下:

<!-- 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:' &#63; 'https:' : 'http:') +
  '//www.google.com/cse/cse.js&#63;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="XXX"
改成action="你剛才新建的那個搜尋頁面的url"
記著要帶http,例如
action="http://pangbu.com/google-search-in-wordpress"
登入後複製
name="s"改成name="q"

整合程式碼範例
我的主題搜尋樣式修改後程式碼如下

<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>

登入後複製

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
威爾R.E.P.O.有交叉遊戲嗎?
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

Google Pixel 9 Pro XL 接受桌面模式測試 Google Pixel 9 Pro XL 接受桌面模式測試 Aug 29, 2024 pm 01:09 PM

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

Pixel 9 Pro XL 的 Google Tensor G4 在 原神 方面落後於 Tensor G2 Pixel 9 Pro XL 的 Google Tensor G4 在 原神 方面落後於 Tensor G2 Aug 24, 2024 am 06:43 AM

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

Google app beta APK teardown reveals new extensions coming to Gemini AI assistant Google app beta APK teardown reveals new extensions coming to Gemini AI assistant Jul 30, 2024 pm 01:06 PM

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

儘管做出了七年更新承諾,Google Pixel 9 智慧型手機仍不會搭載 Android 15 儘管做出了七年更新承諾,Google Pixel 9 智慧型手機仍不會搭載 Android 15 Aug 01, 2024 pm 02:56 PM

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

新的 Google Pixel 桌面模式在新鮮影片中展示,可能是 Motorola Ready For 和 Samsung DeX 的替代方案 新的 Google Pixel 桌面模式在新鮮影片中展示,可能是 Motorola Ready For 和 Samsung DeX 的替代方案 Aug 08, 2024 pm 03:05 PM

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

洩漏的 Google Pixel 9 廣告展示了新的人工智慧功能,包括「添加我」相機功能 洩漏的 Google Pixel 9 廣告展示了新的人工智慧功能,包括「添加我」相機功能 Jul 30, 2024 am 11:18 AM

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

據傳谷歌的新 Chromecast'TV Streamer”將推出以太網和線程連接 據傳谷歌的新 Chromecast'TV Streamer”將推出以太網和線程連接 Aug 01, 2024 am 10:21 AM

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

谷歌向大多數用戶開放 AI Test Kitchen & Imagen 3 谷歌向大多數用戶開放 AI Test Kitchen & Imagen 3 Sep 12, 2024 pm 12:17 PM

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

See all articles