快捷導(dǎo)航

在WordPress中加入Google搜索功能的簡(jiǎn)單步驟講解

更新時(shí)間：2016年01月04日 17:43:56 作者：稍息少年

這篇文章主要介紹了在WordPress中加入Google搜索的簡(jiǎn)單步驟講解,谷歌搜索很有用,但同時(shí)也要注意在國內(nèi)使用cse的連通性,需要的朋友可以參考下

網(wǎng)上諸多寫怎么在 WordPress 中整合谷歌自定義搜索的文章，但很少有提到如何整合v2版代碼的，今天通過實(shí)測(cè)來給大家講解一下，如何實(shí)現(xiàn)在 WordPress中整合谷歌自定義搜索的。

獲取谷歌自定義搜索代碼
進(jìn)入http://www.google.com/cse/
谷歌各系列賬號(hào)都是通用的，
所以如果你有g(shù)mail的話你就可以順利進(jìn)入這個(gè)自定義搜索的系統(tǒng)
一系列的注冊(cè)、登陸你就進(jìn)入到了 cse 主界面了，網(wǎng)速有時(shí)候會(huì)些許蛋疼的慢，所以大家要有耐心。
進(jìn)入主界面點(diǎn) 新建搜索引擎
如下圖所示填寫內(nèi)容：

201614173911886.jpg (453×640)

勾選同意協(xié)議，再點(diǎn)下一步，
按自己喜好選擇樣式，下面會(huì)直接出現(xiàn)演示哦親。
再點(diǎn)下一步，就會(huì)出現(xiàn)代碼了。
親們，你們獲取代碼了嗎？我獲得的代碼如下：

<!-- 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 -->
//下面這一對(duì)標(biāo)簽就是谷歌搜索框要顯示的標(biāo)簽，
//即，你想把搜索框放哪就把這一對(duì)標(biāo)簽放哪。
<gcse:search></gcse:search>

添加搜索頁面
在你的WordPress中新建一個(gè)頁面別名叫search
假設(shè)設(shè)置了固定連接，而且這個(gè)頁面的訪問地址是
http://pangbu.com/google-search-in-wordpress
用html編輯模式，在文章中添加你剛才獲取的代碼。
想知道是什么效果嘛？

效果
你可以在下面直接搜索一下試試。

系統(tǒng)整合
好了，你已經(jīng)有了搜索頁面了，現(xiàn)在我們還差整合到 WordPress 的搜索中去。
麻煩嗎？當(dāng)然不麻煩。
找到你主題搜索框樣式定義的那個(gè)文件，
一般是searchform.php，
部分主題可能稍有不同。
有比較重要的兩句，
一個(gè)是表單提交地址，action="XXX"
一個(gè)是表單參數(shù)名稱name="s",
這里的代碼大同小異，我相信你能找到。

<form action="http://pangbu.com" method="get">
<input id="searchtxt" class="textfield searchtip" type="text" name="s" size="24" value="">

把a(bǔ)ction="XXX"
改成action="你剛才新建的那個(gè)搜索頁面的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>

您可能感興趣的文章: