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

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

WBOY
發布: 2016-05-16 15:22:00
原創
1954 人瀏覽過

網路上諸多寫怎麼在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>

登入後複製

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板