首頁 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:' ? '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="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

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 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 和 Pixel 9 Pro 將在發佈時配備 Creative Assistant AI 傳聞 Google Pixel 9 和 Pixel 9 Pro 將在發佈時配備 Creative Assistant AI Jun 22, 2024 am 10:50 AM

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

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 Pro XL 的 Google Tensor G4 在 原神 方面落後於 Tensor G2

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 app beta APK teardown reveals new extensions coming to Gemini AI assistant

Google AI 為開發者發佈 Gemini 1.5 Pro 和 Gemma 2 Google AI 為開發者發佈 Gemini 1.5 Pro 和 Gemma 2 Jul 01, 2024 am 07:22 AM

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

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

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

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

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

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

Google Pixel 9 Pro XL 接受桌面模式測試

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

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

See all articles