WordPress 無縫集成 Google 自定義搜索引擎

前幾天突然發現本站的搜索功能出現了點問題，索性直接更改為 Google 自定義搜索引擎。可在折騰搜索功能的時候經歷了一些坎坷，所以整理了下內容分享給大家。

1 、創建搜索引擎

登入 https://accounts.google.com/ServiceLogin？continue=http://www.google.com/cse/all&service=cprose&hl=zh-CN&gl=us&passive=true，若沒有 Google 的帳號可去簡單註冊一個。登入後，我們開始創建一個「定製 Google 搜索引擎「，如下圖：

#FormatImgID_0#

在輸入框內輸入要搜索的網站，這裏需要注意的是索引整個網站還是隻是文章部分。若是整個網站直接按照圖中的提示填寫即可，若是單純搜索全部文章頁面就可能會麻煩些。

若只想讓 Google 搜索網站的文章頁面，首先要確定 WordPress 固定鏈接的設置。

默認：http://www.domain.com/？p=123 在輸入框中填入 http://www.domain.com/？p=*

日期和名稱型：http://www.domain.com/2013/03/19/sample-post/ 在輸入框中填入 http://www.domain.com/年份/月份/天/*

月份和名稱型以此類推

數字型：http://www.domain.com/archives/123 在輸入框中填入 http://www.domain.com/archives/*

文章型：http://www.mywpku.com/sample-post/ 在輸入框中填入 http://www.mywpku.com/*/

偽靜態 HTML 型：http://www.mywpku.com/sample-post.html 在輸入框中填入 http://www.mywpku.com/*.html

其餘可以此類推。

可別忘了選擇網站語言哦！完成後下一步吧。

#FormatImgID_1#

2 、更改搜索外觀更改原主題文件

接下來可以根據需要來更改 Google 搜索頁面的背景顏色，按鈕顏色等等。不過最重要的一點是將佈局更改為全寬：

#FormatImgID_2#

接下來我們對主題的搜索頁面進行修改。在 WordPress 中輸入一個搜索詞，它將會顯示出搜索頁面，並按照搜索詞來顯示內容。不過現在我們需要變一下：顯示出搜索頁面後按照輸入的內容來調用 Google 搜索引擎幫你搜索。

在主題目錄中找到類似於 search.php 這樣的文件，以我的主題來做個示例：

<？php get_header（）; ？>

<div id=「content」 class=「group」>

<div id=「content_main」>

<？php if （have_posts（））： while （have_posts（））： the_post（）; ？>

<？php $fmimg = get_post_meta（$post->ID，「fmimg_value」， true）; ？>

<article <？php post_class（）？> id=「post-<？php the_ID（）; ？>」 data-posttime=「<？php the_time（『Y-m-d H:i：s』）; ？>」><header>

<figure class=「post_category」><？php the_category（『』）; ？></figure>

<a href=「<？php the_permalink（）; ？>」 rel=「bookmark」 title=「<？php the_title（）; ？>」 target=『_blank』><？php has_post_thumbnail（）; if （ has_post_thumbnail（））{ the_post_thumbnail（『fmimg』）; } elseif（$fmimg） { ？><img src=「<？php echo $fmimg; ？>」 /><？php } else { ？><img src=「<？php echo catch_that_image（）; ？>」 /><？php } ？></a><strong><h4 class=「post_title」>

<a href=「<？php the_permalink（）; ？>」 rel=「bookmark」 title=「<？php the_title（）; ？>」 target=『_blank』><？php the_title（）; ？></a></h4></strong>

</header>

<div class=「entry group」>

<？php echo mb_strimwidth（strip_tags（apply_filters（『the_content』， $post->post_content））， 0， 180，「。。。」，「utf-8」）; ？></div>

<footer class=「post_meta」>

Written By

<a href=「<？php echo get_author_posts_url（get_the_author_meta（『ID』））; ？>」 rel=「nofollow」><？php echo the_author_meta（『display_name』）; ？></a>

<span class=「info-category-icon」><？php the_category（『，』）？></span>

<span class=「info-comment-icon」><？php comments_popup_link （『沙發還在』，『還有板凳』，『% 條評論』）; ？> <？php edit_post_link（『編輯本文』，『』，『』）; ？></span>

<a href=「<？php the_permalink（）; ？>」 title=「<？php the_title（）; ？>」 class=「more」 target=『_blank』><img src=「http://upload.chinaz.com/2013/0321/1363835608792.png」></a>

<div class=「clear」></div>

</footer>

</article>

<？php endwhile;？>

<？php else ：？>

<article class=「post」>

<h2> 沒有找到任何內容</h2>

<？php get_search_form（）; ？>

</article>

<？php endif; ？>

<div class=「navigation group」>

<div class=「wp-pagenavi」><？php par_pagenavi（9）; ？></div>

</div>

</div>

<？php get_sidebar（）; ？>

</div>

<？php get_footer（）; ？>

我將它刪除至只剩下一個大概的結構：

<?phpget_header();?> <div id="content"><span style="line-height: 1.6em;"></span> </div> <?phpget_footer();?>

去剛剛的自定義搜索引擎頁面那獲取代碼吧，這是最後一步了。

#FormatImgID_3#

很顯然普通的代碼已經不能滿足我們的需求了，下方點擊獲取 V1 代碼。

將獲得的代碼與 search.php 合併：

<？phpget_header（）;？>

<div id=「content」class=「group」>

<div id='cse' style='width： 100%;'>

Loading

</div>

<script src='//www.google.com/jsapi' type='text/javascript'></script>

<script type='text/javascript'>google.load（'search'， '1'， {language： 'zh-Hans'， style： google.loader.themes.V2_DEFAULT}）;

google.setOnLoadCallback（function（） {var customSearchOptions = {};var orderByOptions = {};orderByOptions［『keys』］ = ［{label：『Relevance』， key：『』} ， {label：『Date』， key：『date』}］;

customSearchOptions［『enableOrderBy』］ = true;customSearchOptions［『orderByOptions』］ = orderByOptions;customSearchOptions［『overlayResults』］ = true;

var customSearchControl = new google.search.CustomSearchControl（'002417144856058510941:uk_1aiwj0ok'， customSearchOptions）;

customSearchControl.setResultSetSize（google.search.Search.FILTERED_CSE_RESULTSET）;var options = new google.search.DrawOptions（）;

options.setAutoComplete（true）;customSearchControl.draw（'cse'， options）;}， true）;

</script>

<style type='text/css'>.gsc-control-cse {

font-family:Arial，sans-serif;border-color：#FFFFFF;background-color：#FFFFFF;}

.gsc-control-cse .gsc-table-result {font-family:Arial，sans-serif;

}

input.gsc-input， .gsc-input-box， .gsc-input-box-hover， .gsc-input-box-focus {border-color：#D9D9D9;

}

input.gsc-search-button， input.gsc-search-button:hover， input.gsc-search-button:focus {border-color：#666666;background-color：#CECECE;background-image:none;filter:none;}

.gsc-tabHeader.gsc-tabhInactive {border-co
lor：#FF9900;background-color：#FFFFFF;}

.gsc-tabHeader.gsc-tabhActive {border-color：#E9E9E9;background-color：#E9E9E9;border-bottom-color：#FF9900}

.gsc-tabsArea {border-color：#FF9900;}

.gsc-webResult.gsc-result， .gsc-results .gsc-imageResult {border-color：#FFFFFF;background-color：#FFFFFF;}

.gsc-webResult.gsc-result:hover， .gsc-imageResult:hover {border-color：#FFFFFF;background-color：#FFFFFF;}

.gs-webResult.gs-result a.gs-title:link， .gs-webResult.gs-result a.gs-title:link b， .gs-imageResult a.gs-title:link， .gs-imageResult a.gs-title:link b {color：#0000CC;}

.gs-webResult.gs-result a.gs-title:visited， .gs-webResult.gs-result a.gs-title:visited b， .gs-imageResult a.gs-title:visited， .gs-imageResult a.gs-title:visited b {color：#0000CC;}

.gs-webResult.gs-result a.gs-title:hover， .gs-webResult.gs-result a.gs-title:hover b， .gs-imageResult a.gs-title:hover， .gs-imageResult a.gs-title:hover b {color：#0000CC;}

.gs-webResult.gs-result a.gs-title:active， .gs-webResult.gs-result a.gs-title:active b， .gs-imageResult a.gs-title:active， .gs-imageResult a.gs-title:active b {color：#0000CC;}

.gsc-cursor-page {color：#0000CC;}a.gsc-trailing-more-results:link {color：#0000CC;}

.gs-webResult .gs-snippet， .gs-imageResult .gs-snippet， .gs-fileFormatType {color：#000000;}

.gs-webResult div.gs-visibleUrl， .gs-imageResult div.gs-visibleUrl {color：#008000;}.gs-webResult div.gs-visibleUrl-short {color：#008000;}.gs-webResult div.gs-visibleUrl-short {display:none;}

.gs-webResult div.gs-visibleUrl-long {display:block;}.gs-promotion div.gs-visibleUrl-short {display:none;}

.gs-promotion div.gs-visibleUrl-long {display:block;}.gsc-cursor-box {border-color：#FFFFFF;}

.gsc-results .gsc-cursor-box .gsc-cursor-page {border-color：#E9E9E9;background-color：#FFFFFF;color：#0000CC;}

.gsc-results .gsc-cursor-box .gsc-cursor-current-page {border-color：#FF9900;background-color：#FFFFFF;color：#0000CC;}

.gsc-webResult.gsc-result.gsc-promotion {border-color：#336699;background-color：#FFFFFF;}

.gsc-completion-title {color：#0000CC;}.gsc-completion-snippet {color：#000000;}

.gs-promotion a.gs-title:link，.gs-promotion a.gs-title:link *，.gs-promotion .gs-snippet a:link {color：#0000CC;}

.gs-promotion a.gs-title:visited，.gs-promotion a.gs-title:visited *，.gs-promotion .gs-snippet a:visited {color：#0000CC;}

.gs-promotion a.gs-title:hover，.gs-promotion a.gs-title:hover *，.gs-promotion .gs-snippet a:hover {color：#0000CC;}

.gs-promotion a.gs-title:active，.gs-promotion a.gs-title:active *，.gs-promotion .gs-snippet a:active {color：#0000CC;}

.gs-promotion .gs-snippet， .gs-promotion .gs-title .gs-promotion-title-right， .gs-promotion .gs-title .gs-promotion-title-right * {color：#000000;}

.gs-promotion .gs-visibleUrl，

.gs-promotion .gs-visibleUrl-short {color：#008000;}

</style>

</div>

<？phpget_footer（）;？>

保存代碼吧，我們的工作還沒有完成，接下來可能會出現輸入搜索詞無效的問題。因為是從外部調用谷歌搜索引擎，它自然不知道你要搜索什麼，所以要從 URL 中提取出搜索詞：

在剛剛修改完成的 search.php 文件中搜索}, true，用下面的代碼替換它：

varmatch=location.search.match(/q=([^&]*)(&|$)/);

if(match&&match[1])

{

varsearch=decodeURIComponent(match[1]);

customSearchControl.execute(search); }

}

大功告成！不過需要注意的是，在上面的代碼中找到 match(/q=([^&]*)(&|$)/)，裏面的 q 是根據搜索網址格式決定的，如果你搜索關鍵字 XX 得到的網址為 http://domain.com/?s=XX，那麼必須將 q 改成 s 才可正常使用。並且由於某些原因，有時使用 Google 的服務可能會被………………所以請慎重考慮。

WordPress 無縫集成 Google 自定義搜索引擎

WordPress 無縫集成 Google 自定義搜索引擎

訂單服務

媒體中心

服務支持

使用條款

關於公司